jQuery UI dialog form answers remain when box is closed.

Question

I want to use a jQuery UI dialog box to handle part of my form.

I want the code to work something like this.

<form id="MyForm" name="MyForm">
<input type="text" id="Input1" name="Input1">
<input type="text" id="Input2" name="Input2">

<div id="dialog">
<input type="text" id="Input3" name="Input3">
<input type="text" id="Input4" name="Input4">
</div>

<button type="button" onclick="$('#dialog').dialog('open');">Fill out 3 and 4</button>

</form>

I will declare turn the dialog div into a dialog object using a script at the top of the page.

1) Is it possible to include part of the form in a dialog box like this?

2) Is it possible to make it so that the user entered values for Input3 and Input4 are not deleted when the dialog box is closed?

Answer 1

I've tried your code in Firefox 3.5 and the answers are:

1) Yes. I haven't tested the submission will be submitted OK, but I don't think there will be a problem. 2) Yes, in fact this is the default behaviour

Answer 2

@kgiannakakis is correct (and I voted up for it). You might want to try using a tool like FireFox's Web Developer plugin, which would let you show/hide various parts of the page.

The UI dialog just uses a "display:none;" tag to hide the div that you turn into a dialog. It doesn't really go anywhere.

You could fill out the dialog, then remove the style tag that sets the DIV to hidden to see that the values are still there in the input boxes.