Submit inputs in a dialog

Submit inputs in a dialog

Typically I use AJAX to submit data from a dialog, but this time I wish to traditionally submit the form.  My inputs in the dialog, however, appear outside the form.  The only way I can get it to work is move the value in the input to another input.  Is there a better way?  On a sidenote, any ideas why this submits before clicking "save"?
 
Thank you
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Jquery UI</title>


  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />

  3. <script type="text/javascript">
    $(function(){
  4.     $("#my_button").click(function() {$("#my_dialog").dialog("open");});
  5.     $("#my_dialog").dialog({
            autoOpen: false,
            height: 400,
            width: 350,
            modal: true,
            buttons: {
                'Save': function() {
                    alert("Save");
                    document.dialog_submit.submit();
                },
                'Cancel': function() {alert("Cancel"); $(this).dialog('close');}
            }
        });











  6. });
    </script>
    </head>

  7. <body>
  8. <form action="dialog_submit.php" method="post"  id="dialog_submit" name="dialog_submit">
    <p>The PHP code in dialog_submit.php is only <code>exit('&lt;pre&gt;'.print_r($_POST,1).'&lt;/pre&gt;');</code></p>
  9. <div id="my_dialog" class="dialog" title="My Dialog">
    Dialog Input:<input type="text" id="input_dialog" name="input_dialog" value="input_dialog"/>
    </div>

  10. <p>Non-Dialog Input:<input type="text" id="input_no_dialog" name="input_no_dialog" value="input_no_dialog" /></p>
  11. <button id="my_button">Click Me</button>
    </form>
  12. </body>
    </html>