Question

i have a form and i wish to show a part with dialog boxes.

However, when i assign a div inside of the form to a dialog, it will be located to the bottom of script and not anymore inside of the form element, so that i can’t submit the values.

Like:

<form>
<div id="dialog_container"><input name="test"></div>
</form>
<script> $('#dialog_container').dialog();</script>

In this case, the div doesn’t stay in the form tags.

How would you solve this?

Thank you!

Answer 1

I add the same kind of problem and what I did was adding a hidden input for each of my dialog forms.

Then at closure of the dialog box, I could replace the hidden input with the value from the dialog box.

Something like that:

<div id="dialog_container">
  <form id="dialog_form">
    ... any input ...
  </form>
</div>

<form id="main_form">
  <input type="hidden" id="test">
</form>

and in javascript something like:

  $("#dialog_container").dialog({
    close: function(ev, ui) { 
         var dialogInput // build inputs from dialogInputs
                         // you can even mix former inputs with new ones
         $("#test").replaceWith( dialogInput  )
    }
  });