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
- <!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>
- <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" />
- <script type="text/javascript">
$(function(){
- $("#my_button").click(function() {$("#my_dialog").dialog("open");});
- $("#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');}
}
});
- });
</script>
</head>
- <body>
- <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('<pre>'.print_r($_POST,1).'</pre>');</code></p>
- <div id="my_dialog" class="dialog" title="My Dialog">
Dialog Input:<input type="text" id="input_dialog" name="input_dialog" value="input_dialog"/>
</div>
- <p>Non-Dialog Input:<input type="text" id="input_no_dialog" name="input_no_dialog" value="input_no_dialog" /></p>
- <button id="my_button">Click Me</button>
</form>
- </body>
</html>