刷新表单提交不工作

Refresh form submission not working

本文关键字：工作 表单提交 刷新      更新时间：2023-09-26

在网上搜索后，我找不到我的代码的正确解决方案。这里我链接JQuery与ajax谷歌库的HTML表单验证。它工作正常，但表单成功提交后不刷新。请引导我。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function Submit(){
    var emailRegex = /^[A-Za-z0-9._]*'@[A-Za-z]*'.[A-Za-z]{2,5}$/;
    var formemail = $("#femail").val();
    var name = $("#name").val();
        var name = $("#place").val();
    var femail = $("#femail").val();
        if($("#name").val() == "" ){
            $("#name").focus();
            $("#error").html("Enter the Name.");
            return false;
        }else if($("#place").val() == "" ){
                $("#place").focus();
                $("#error").html("Enter the Place.");
                return false;
        }else if($("#femail").val() == "" ){
                $("#femail").focus();
                $("#error").html("Enter the email.");
                return false;
        }else if(!emailRegex.test(formemail)){
                $("#femail").focus();
                $("#error").html("Enter the valid email.");
                return false;
        }else if($(name != '' && place != '' && femail != '')){
            $("#error").html("Form submitted successfully.")
                }
         }
</script>
<form id="form_name" name="form" method="post" action="   ">
   <div id="error"></div>
       NAME:  <input type="text" name="Name"  id="name" > <br>
       PLACE:  <input type="text" name="Place" id="place"> <br>
       EMAIL:  <input type="text" name="Email" id="femail"> <br><br> 
       <input type="button" id="submit" value="Submit" onClick="Submit()"/>
</form>

一旦HTML表单被提交，它会显示"表单提交成功"，然后刷新表单。

有了type = 'button'，它将不作为submit-button

  • 使用type = "submit"
  • 使用event.preventdefault()防止表单提交，如果客户端验证失败

function Submit(e) {
  var emailRegex = /^[A-Za-z0-9._]*'@[A-Za-z]*'.[A-Za-z]{2,5}$/;
  var formemail = $("#femail").val();
  var name = $("#name").val();
  var name = $("#place").val();
  var femail = $("#femail").val();
  if ($("#name").val() == "") {
    $("#name").focus();
    $("#error").html("Enter the Name.");
    e.preventDefault();
  } else if ($("#place").val() == "") {
    $("#place").focus();
    $("#error").html("Enter the Place.");
    e.preventDefault();
  } else if ($("#femail").val() == "") {
    $("#femail").focus();
    $("#error").html("Enter the email.");
    e.preventDefault();
  } else if (!emailRegex.test(formemail)) {
    $("#femail").focus();
    $("#error").html("Enter the valid email.");
    e.preventDefault();
  } else if ($(name != '' && place != '' && femail != '')) {
    $("#error").html("Form submitted successfully.")
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="form_name" name="form" method="post" action="   ">
  <div id="error"></div>
  NAME:
  <input type="text" name="Name" id="name">
  <br>PLACE:
  <input type="text" name="Place" id="place">
  <br>EMAIL:
  <input type="text" name="Email" id="femail">
  <br>
  <br>
  <input type="submit" id="submit" value="Submit" onClick="Submit(event)" />
</form>

除了Rayon建议的更改之外，您可以通过将$("#form_name")[0].reset()放在$("#error").html("Form submitted successfully.")的正下方来刷新表单:

function Submit(e){
    e.preventDefault();
    // You will have to submit your form using ajax.
    var emailRegex = /^[A-Za-z0-9._]*'@[A-Za-z]*'.[A-Za-z]{2,5}$/;
    var formemail = $("#femail").val();
    var name = $("#name").val();
        var name = $("#place").val();
    var femail = $("#femail").val();
        if($("#name").val() == "" ){
            $("#name").focus();
            $("#error").html("Enter the Name.");
            return false;
        }else if($("#place").val() == "" ){
                $("#place").focus();
                $("#error").html("Enter the Place.");
                return false;
        }else if($("#femail").val() == "" ){
                $("#femail").focus();
                $("#error").html("Enter the email.");
                return false;
        }else if(!emailRegex.test(formemail)){
                $("#femail").focus();
                $("#error").html("Enter the valid email.");
                return false;
        }else if($(name != '' && place != '' && femail != '')){
            $("#error").html("Form submitted successfully.")
            $("#form_name")[0].reset();
         }
     }

但是如果你没有使用ajax提交你的表单，你的页面将被重新加载，这违背了显示"表单提交成功"消息的目的。

使用下面的函数…

location.reload(true);
window.location.reload()
window.location.href=window.location.href

您应该在程序中执行以下两个步骤

  1. 需要给出表单名称，请使用下面的

& lt;表单id="form_name" name=" Form " method="post" action=" ">

代替上面的u

& lt;form name="form" id="form_name" name="form" method="post" action=" ">

2。在脚本中添加一行"Submit"

document.form.reset ();

这里的

//"形式"是表单的名称

相关文章：