jQuery UI dialog form caveats
June 24, 2010 22:04:19 Last update: June 24, 2010 22:04:19
Start with this page:
When you click "Submit", the form submits fine.
Now turn the form to a jQuery dialog:
When you click "Submit", the form no longer submits!
Why? When you convert the contents of the form into a dialog, the form becomes empty! The "Submit" button is no longer associated with the form.
Conclusion: you should always put the form tag inside the element you are converting to a dialog.
<!DOCTYPE html> <html> <head> <title>jQuery UI Dialog</title> </head> <body> <form> <div id="dialog" title="Dialog Form Test"> <div class="input"> <label for="field1">Field 1</label> <input name="field1" type="text"> </div> <div class="input"> <label for="field2">Field 2</label> <input name="field2" type="text"> </div> <input type="submit" value="Submit"> </div> </form> </body> </html>
When you click "Submit", the form submits fine.
Now turn the form to a jQuery dialog:
<head> <title>jQuery UI Dialog</title> <link rel="stylesheet" type="text/css" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-darkness/jquery-ui.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"> </script> <script type="text/javascript"> $(function() { $("#dialog").dialog({ autoOpen: true, height: 220, width: 300 }); }); </script> </head>
When you click "Submit", the form no longer submits!
Why? When you convert the contents of the form into a dialog, the form becomes empty! The "Submit" button is no longer associated with the form.
Conclusion: you should always put the form tag inside the element you are converting to a dialog.
