guruje guruje - 5 months ago 14
jQuery Question

Refresh form submission not working

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

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.