Input inside Jquery UI Dialog not being sent??

Question

The input fields in my dialog box aren't being posted, and i'm not sure why...

i've tested it on mac firefox and safari, and windows IE & firefox with the same results, so i don't think it's the browser, and the fields post fine if I disable the dialog box.

I've re-read the jquery ui docs and can't find what i'm doing wrong... It seems unlikely that the dialog box wouldn't support input.

here's a condensed version of the code i'm using:

<script type="text/javascript">
 $(document).ready(function(){
  $("#dialog").dialog({
   autoOpen: false,
   buttons: {
    "OK": function() {
     $(this).dialog('close');
    }
   }
  });
  $("#publishSettings").click(function(){
   $("#dialog").dialog('open');
  });
 });
</script>

<form method="POST" action="publish.php">
 <input type="button" id="publishSettings" value="Publish Settings">
 <div id="dialog">
  Publish Date
  <input type="text" name="publishOn"><br>
  Unpublish Date
  <input type="text" name="unPublishOn">
 </div>
 <input type="submit" name="pubArticle" value="Publish">
</form>

Nothing out of the ordinary, right? Why won't this work for me!?

thanks!

Answer 1

I'm pretty sure jQuery UI breaks out the Dialog section from its normal place in the dom and then moves it to a different place. That would take your input element out of the form parent element. You can't submit a form without a form element, so that's why it fails.

I would suggest rewriting the html as:

<div id="dialog">
<form method="POST" action="publish.php">
 <input type="button" id="publishSettings" value="Publish Settings">
  Publish Date
  <input type="text" name="publishOn"><br>
  Unpublish Date
  <input type="text" name="unPublishOn">
 <input type="submit" name="pubArticle" value="Publish">
</form>
</div>

If the publishSettings button needs to not be in the popup, then you could move it out of the form and just capture its value on the submit event and add it as a hidden input element before anything gets submitted.

Best of luck.

Answer 2

When JQuery opens the dialog box , it moves it outside the form.

Here's the solution for that:

http://stackoverflow.com/questions/757232/jquery-ui-dialog-with-asp-net-button-postback

basically in your case:

var dlg =  $("#dialog").dialog({ 
   autoOpen: false, 
   buttons: { 
    "OK": function() { 
     $(this).dialog('close'); 
    } 
   } 
  }); 
dlg.parent().appendTo($("#yourformId"));

should fix it.