刷新表單提交不起作用

Question

上網搜索后，我找不到正確的代碼解決方案。 在這里，我將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表單后，將顯示“表單提交成功”，然后刷新表單。

Answer 1

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> 

Answer 2

使用以下功能...

location.reload(true);

window.location.reload()

window.location.href=window.location.href

Answer 3

除了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提交表單，則頁面將被重新加載，這違背了顯示“表單提交成功”消息的目的。

Answer 4

您應該在程序中執行以下兩個步驟

1. 需要用以下名稱給表格名稱

<form id =“ form_name” name =“ form” method =“ post” action =“”>

而不是你上面的線

<form name =“ form” id =“ form_name” name =“ form” method =“ post” action =“”>

2.在腳本“提交”中添加該行

document.form.reset（）;

//這里“ form”是您的表單名稱