刷新表单提交不起作用

问题描述：

使用Google搜索后，找不到我的代码的正确解决方案。在这里，我将JQuery与ajax google库链接以进行HTML FORM验证。它可以正常工作，但不会在成功提交表单后刷新。请指导我。刷新表单提交不起作用

<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表单，它就会显示“表单提交成功”，然后显示要刷新的表单。

'类型=“按钮”'不会提交表单... – Rayon

在您最后一次'elseif'reset的投入？ – DaniP

答

除了由人造丝建议的修改，你可以刷新你放置$("#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提交你的表单，你的页面将被重新加载，从而破坏了显示“表单提交成功”消息的目的。你应该在你的程序做

我已经检查过，在输入第一个数据后，它给予成功和自动刷新。 – guruje

@guruje是否修改了输入以传递事件？？这对我来说可以。如果我只输入一个字段，它会请求剩余的字段 – StaticBeagle

谢谢，它正在工作 – guruje

答

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

与之前一样正常工作，但刷新未实现。 – guruje

@guruje，在SO片段中，表单提交被阻止..在你的代码中测试.. – Rayon

@guruje - 你使用'ajax'表单提交吗？ – Rayon

答

使用以下功能...

location.reload(true); 

window.location.reload() 

window.location.href=window.location.href

一旦成功消息出现，那么只有刷新才会发生。 – guruje

答

两个步骤如下：

需要给表单的名称使用下面的一个

<形式ID = “FORM_NAME” NAME = “形式”方法= “POST” 行动=”“>

代替上述系U

<形式名称= “形式” ID = “FORM_NAME” NAME = “形式” 的方法= “邮报” 行动=”“>

2.加在你的脚本行 ”提交“

文件.form.reset（）;

//这里“形式”是你的表单名称

刷新表单提交不起作用

相关推荐