html - 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

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

Here's the solution for that:

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.