刷新表单提交不起作用

Question

After googling the web, I could not find the correct solution to my code. Here I am linking the JQuery with ajax google libraries for HTML FORM validation. It works fine but not refreshing after form successful form submission. Please guide me.

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

Once the HTML form is submitted, it is showing "Form submitted successfully" then the form to be refreshed.

Answer 1

Having type = 'button' , it will not act as submit-button

• Use type = "submit"
• Use event.preventdefault() to prevent form submission if client-side-validation fails

 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

Use below function...

location.reload(true);

window.location.reload()

window.location.href=window.location.href

Answer 3

In addition to the changes suggested by Rayon, you could refresh you form by placing $("#form_name")[0].reset() right below $("#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();
         }
     }

But if you are not submitting your form using ajax your page is going to get reloaded which defeats the purpose of displaying a "form submitted successfully" message.

Answer 4

Two steps you should do in your program as follows

1. Need to give name of form use the below one

< form id="form_name" name="form" method="post" action=" ">

instead of above line u

< form name="form" id="form_name" name="form" method="post" action=" " >

2.add the line in your script "Submit"

document.form.reset();

//Here "form" is name of your form