4

I have a modal form that opens up for user to reset their password.

<div id="password-form" title="Reset Password">
<form method="post">
<fieldset>
<label for="emailreset">Enter Email Address</label>
<input type="text" name="emailreset" id="emailreset" class="text ui-widget-content   ui-corner-all" />
</fieldset>
</form>
</div>

When the user hits the reset password button I call a function that checks if the user exists. upon success of the post I change the content of the div to a message generated. all of that works as expected. Now what I want to happen is once the close the modal dialog, I want the content to reset back to the form. I'm having problems making this happen.

Here is what I have for the jquery

$( "#password-form" ).dialog({
autoOpen: false,
height: 200,
width: 300,
modal: true,
buttons: {
"Reset Password": function() {

$.ajax({
url: "/model/websitemanager.cfc"
, type: "post"
, dataType: "html"
, data: {
method: "resetpassword"          
, emailreset: $("#emailreset").val()
}
, success: function (data){
//alert(data);
$('#password-form').html('<p>'+data+'</p>');
}
// this runs if an error
, error: function (xhr, textStatus, errorThrown){
// show error
alert(errorThrown);
}
});
<!--//end ajax call//-->
},
},
close: function() {
emailreset.val( "" ).removeClass( "ui-state-error" );
$(this).dialog('destroy').remove()
}
});
Cœur
  • 37,241
  • 25
  • 195
  • 267
user2033361
  • 41
  • 1
  • 2
  • You can just use .reset(), just give the form an ID first. http://stackoverflow.com/questions/6653556/jquery-javascript-function-to-clear-all-the-fields-of-a-form – PlantTheIdea Feb 01 '13 at 17:35
  • That would work if I was resetting the form. but the form is replaced by content on success. So when the dialog is closed and opened again I'd like the form to be displayed. – user2033361 Feb 01 '13 at 17:41
  • On close of the dialog i ended up just recreating the form: $('#password-form').html('
    '); If anyone knows a better option let me know     – user2033361 Feb 01 '13 at 18:12

1 Answers1

2

Here's a simple function I have globally available across my application:

function clearInputs(target) {
  $(target).find(':input').each(function () {
    switch (this.type) {
        case 'password':
        case 'select-multiple':
        case 'select-one':
        case 'text':
        case 'textarea':
            $(this).val('');
            break;
        case 'checkbox':
        case 'radio':
            this.checked = false;
    }
  });
}

And here's how I use it for jQuery dialogs:

$('#myDialog').dialog({
    buttons:{
        'Submit':function () {
            // Do something here
            clearInputs($(this).find('form'));
            $(this).dialog('close');
        },
        'Cancel':function () {
            clearInputs($(this).find('form'));
            $(this).dialog('close');
        }
    },
    close:function () {
        clearInputs($(this).find('form'));
    }
});
Aegix
  • 629
  • 6
  • 14