Reset form after submit

Question

I am new with ajax and jquery. i have used the following code to submit form data it working fine.

but i need to reset(clear form field) after submit form with all validation true. where to write a code to clear a form.

Html Form:

<form action="#" name="formdata" id="replyform" method="post">
    <div class="pass-form">
        <div class="input-row">
            <div class="row_label">
                Old Password
            </div>
            <span><input type="text" id="User_pass1" name="User_pass1"/></span>
        </div>
        <div class="input-row">
            <div class="row_label">
                New Password:
            </div>
            <span><input id="User_pass2" name="User_pass2" type="password"/></span>
        </div>
        <div class="input-row">
            <div class="row_label">
                Re-Enter New Password:
            </div>
            <span><input id="User_pass3" name="User_pass3" type="password"/></span>
        </div>
        <div class="input-row">
            <div class="row_label">
                &nbsp;
            </div>
            <span>&nbsp;<button name="chpass" onclick="submitform();" class="button" type="button" value="Save">Save</button>
            <button name="chpr" type="reset" class="button" value="Reset">Reset</button></span>
        </div>
    </div>
</form>

Javascript function:

 function submitform() {
        var User_pass1 = document.getElementById("User_pass1").value.match("^\\S[0-9a-zA-Z.-]*$");
        var User_pass2 = document.getElementById("User_pass2").value.match("^\\S[0-9a-zA-Z.-]*$");
        var User_pass3 = document.getElementById("User_pass3").value.match("^\\S[0-9a-zA-Z.-]*$");
        //document.getElementById("User_pass1").value="";
        //document.getElementById("User_pass2").value="";
        //document.getElementById("User_pass3").value="";
        if (User_pass1 == null) {
            alert("password field Required.....!");
            return;
        } else if (User_pass2 == null) {
            alert(" New password  field Required.....!");
            return;
        } else if (User_pass3 == null) {
            alert("New password conformation field Required.....!");
            return;
        } else if (String(User_pass2) != String(User_pass3)) {
            alert("New password and  conformation not match....!");
            return;
        } else {
            var str = "User_pass1=" + User_pass1 + "&User_pass2=" + User_pass2;
            $.ajax({
                type: "POST",
                url: _baseurl + "/setting/",
                data: str,
                success: function (output) 
                {alert(output);}
            });
            return;
        }
    }

Also do not make the reset button too easy to hit by mistake. I can remember the days of filling out a large form and hitting reset by mistake and loosing a lot of time... I think that's why you hardly see reset buttons anymore. — Danny, Mar 15 '13 at 04:55
@BenjaminGruenbaum:i google and tried the solution same as 'Dipesh parmar' suggest me but it did not work. — Kango, Mar 15 '13 at 04:59
`document.forms['replyform'].reset()` or even `User_pass1.form.reset()`. — RobG, Mar 15 '13 at 05:08
BTW, the submit listener should be on the form, not the button, since forms can be submitted without clicking the button. — RobG, Mar 15 '13 at 05:09
@RobG:your first option work.but can you tell me why $('#replyform').reset(); is not working. — Kango, Mar 15 '13 at 05:12

score 3 · Answer 1 · answered Mar 15 '13 at 04:52

3

You need to write in inside success callback.

success: function (output) 
{
  alert(output);
  $('#replyform').reset();
}

answered Mar 15 '13 at 04:52

Dipesh Parmar

27,090
8
61
90

Rohan Kumar · Answer 2 · 2013-03-15T05:28:20.837

3

Try this:

 $.ajax({
      type: "POST",
      url: _baseurl + "/setting/",
      data: str,
      success: function (output)  {
         alert(output);
         $('#replyform').find("input[type=text], input[type=password]").val("");
      }
 });

Also if you are using jQuery than you should use $('#User_pass1').val() in place of document.getElementById("User_pass1").value

edited Mar 15 '13 at 05:28

answered Mar 15 '13 at 04:54

Rohan Kumar

40,431
11
76
106

Whether jQuery is being used or not, far simpler to put the listener on the form's submit handler, pass `this` and use `form.User_pass1.value`. – RobG Mar 15 '13 at 05:11
@Swap Try the above code. Read also http://stackoverflow.com/questions/6364289/clear-form-fields-with-jquery – Rohan Kumar Mar 15 '13 at 05:29
@RohanKumar:Thanks. but RobG answer work for me.see comment on my question. – Kango Mar 15 '13 at 05:41

Reset form after submit

2 Answers2