Input fields on dialog box not resetting ...

Question

I can't figure out how to reset input fields that appear on a dialog box, after they've been submitted once already. Basically the jist of the problem is this:

I have a button on a page that triggers a dialog box. The dialog box contains 3 input fields and submit button. I fill in data and submit the form. That submit button triggers an ajax call. Upon success, it closes the dialog box and displays a message (another dialog box).

Now, if I open the dialog box again, fill in the fields and submit, it submits the old information which I filled in the first time I opened the dialog box.

I created an example here: http://www.thekirchners.net/dialog/

All code is in the page, just view the source of it.

Thanks all.

Answer 1

$('#field1, #field2, #field3').val('');

Answer 2

The problem is you are creating the input texts every time you hit "test dialogs", so you have after 1st time, you have another div with the same names. You repeat the input texts. You start let's say with 3 first time and then 6 and then 9.

I would simply recreate and destroy every time, I push the button. A simple: $('#dialogBox').remove();

every time.

Or put this inputs in the html and I hide and show if i need it.

Answer 3

Is the content for the dialog always the same? If so, you could just reset the HTML in the div of your dialog, i.e. reassign it the correct HTML.