提交后重置表单[重复]

Posted 2023-05-07

【中文标题】提交后重置表单[重复]

【英文标题】：Reset form after submit [duplicate]

【发布时间】：2013-03-03 17:29:40

【问题描述】：

我是 ajax 和 jquery 的新手。 我已使用以下代码提交表单数据，它工作正常。

但我需要在提交表单后重置（清除表单字段）且所有验证均属实。 在哪里编写代码来清除表单。

HTML 表单：

<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 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;
        
    

【问题讨论】：

也不要让重置按钮太容易被误击。我记得那些填写大表格并错误地点击重置并浪费大量时间的日子......我认为这就是你几乎看不到重置按钮的原因。

@BenjaminGruenbaum:i google 并尝试了与“Dipesh parmar”建议我相同的解决方案，但没有奏效。

document.forms['replyform'].reset() 甚至User_pass1.form.reset()。

顺便说一句，提交监听器应该在表单上，​​而不是按钮上，因为无需点击按钮就可以提交表单。

@RobG：你的第一个选项有效。但你能告诉我为什么 $('#replyform').reset();不工作。

【参考方案1】：

你需要在success回调里面写。

success: function (output) 

  alert(output);
  $('#replyform').reset();

【参考方案2】：

试试这个：

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

此外，如果您使用的是jQuery，那么您应该使用$('#User_pass1').val() 代替document.getElementById("User_pass1").value

【讨论】：

无论是否使用jQuery，将监听器放在表单的提交处理程序上要简单得多，传递this并使用form.User_pass1.value。

@Swap 试试上面的代码。另请阅读***.com/questions/6364289/…

@RohanKumar：谢谢。但 RobG 回答对我有用。请参阅对我的问题的评论。