表单提交，无法停止刷新

Question

So I am very new to this stuff and i have a specific problem I just can't fix. I have searched all over, and I have tried loads of solutions to no avail. I'm sure I'm missing something or have something in the wrong order but I just need some guidance.

I have a simple form in my website and I can't stop it refreshing the page on submit. There's some php validating happening also.

Here's a link to the website: www.nathanchapmanphotography.co.uk

Any help would be massively appreciated.

 $("form").submit(function() { var error = ""; var success = ""; var fail = ""; if ($("#name").val() == "") { error += "name required<br>"; } if ($("#email").val() == "") { error += "email required<br>"; } if ($("#message").val() == "") { error += "message required<br>"; } if (error != "") { $("#error").html(error); $("#success").html(success); $("#fail").html(fail); return false; } else { sendContactForm(); return false; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post"> <p class="form-p">name: <input class="input" type="text" id="name" name="name"> </p> <p class="form-p">email: <input class="input" type="email" id="email" name="email"> </p> <p class="form-p">message: <br/> <textarea id="message" cols="40" rows="7" name="message"></textarea> </p> <button type="submit" id="submit">submit</button> <div id="error"> <? echo $error; ?> </div> <div id="success"> <? echo $success; ?> </div> <div id="fail"> <? echo $fail; ?> </div> </form> 

Answer 1

You need to prevent the default action of the submit event:

$("form").submit(function(event) { // capture the function's event here
    event.preventDefault(); // use the captured event here
    // rest of your code...

---

EDIT: from the OP's website after the change -

Answer 2

I'm not 100% sure what you are looking for,..however,

If sendContactForm does the posting of the form data and you just don't want the submit to happen automatically you can make the button of type button and bind to it for the validation.

 $(document).ready(function() { function sendContactForm(){ console.log('sendContactForm'); }; $('#submit').on('click', function() { var error = ""; var success = ""; var fail = ""; if ($("#name").val() === "") { error += "name required<br>"; } if ($("#email").val() === "") { error += "email required<br>"; } if ($("#message").val() === "") { error += "message required<br>"; } if (error !== "") { $("#error").html(error); $("#success").html(success); $("#fail").html(fail); } else { sendContactForm(); } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post"> <p class="form-p">name: <input class="input" type="text" id="name" name="name"> </p> <p class="form-p">email: <input class="input" type="email" id="email" name="email"> </p> <p class="form-p">message: <br/> <textarea id="message" cols="40" rows="7" name="message"></textarea> </p> <button type="button" id="submit">submit</button> <div id="error"> <? echo $error; ?> </div> <div id="success"> <? echo $success; ?> </div> <div id="fail"> <? echo $fail; ?> </div> </form> 

---

or,..if you want to only have more control over the submit itself without the page refreshing, you can use ajax. Similar to this:

var $form = $("form");

$.ajax({
    data: $form.serialize(),
    url: $form[0].action,
    type: 'post',
    dataType: 'json',
    success: function(data) {
        sendContactForm();
    }
});

 $(document).ready(function() { function postData() { var $form = $("form"); $.ajax({ data: $form.serialize(), url: $form[0].action, type: 'post', dataType: 'json', success: function(data) { sendContactForm(); } }); } function sendContactForm() { console.log('sendContactForm'); } $('#submit').on('click', function() { var error = ""; var success = ""; var fail = ""; if ($("#name").val() === "") { error += "name required<br>"; } if ($("#email").val() === "") { error += "email required<br>"; } if ($("#message").val() === "") { error += "message required<br>"; } if (error !== "") { $("#error").html(error); $("#success").html(success); $("#fail").html(fail); } else { postData(); } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" action="http://yourtageturl"> <p class="form-p">name: <input class="input" type="text" id="name" name="name"> </p> <p class="form-p">email: <input class="input" type="email" id="email" name="email"> </p> <p class="form-p">message: <br/> <textarea id="message" cols="40" rows="7" name="message"></textarea> </p> <button type="button" id="submit">submit</button> <div id="error"> <? echo $error; ?> </div> <div id="success"> <? echo $success; ?> </div> <div id="fail"> <? echo $fail; ?> </div> </form> 

Answer 3

So I managed to sort it using both your suggestions, thanks so much. The issue was that the function I found online to send the data actually wasn't doing anything. I have it running perfectly now, no server side validation but that's for another day. If your interested, here's the revised code.

 $("form").submit(function(e) { e.preventDefault(); var error = ""; var success = "Thank you for your message!<br/>I'll get back to you shortly." var url = "index.php"; // the script where you handle the form input. if ($("#name").val() == "") { error += "name required<br>"; } if ($("#email").val() == "") { error += "email required<br>"; } if ($("#message").val() == "") { error += "message required<br>"; } if (error != "") { $("#error").html(error); //alert("We need your" + error + "please!" ); } else { $.ajax({ type: "POST", url: url, data: $("form").serialize(), // serializes the form's elements. success: function(data) { $("#success").html(success); $("#error").html(error); } }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post"> <p class="form-p">name: <input class="input" type="text" id="name" name="name"> </p> <p class="form-p">email: <input class="input" type="email" id="email" name="email"> </p> <p class="form-p">message: <br/> <textarea id="message" cols="40" rows="7" name="message"></textarea> </p> <button type="submit" id="submit">submit</button> <div id="error"> <? echo $error; ?> </div> <div id="success"> <? echo $success; ?> </div> <div id="fail"> <? echo $fail; ?> </div> </form>