Form Button Refreshes On Click - One Page Website

I've created a contact form so that users can send us an email. However, every time I click to send the email it also refreshes the page when clicked. This is a one page website. I

Solution 1:

You can try using jquery ajax method

Create New File for send Email and in form attribute to give any id

<script>
$('#main-contact-form').submit(function(event){
event.preventDefault();
$.ajax({
    type:'post',
    url:'sendememail.php',
    data:$(this).serialize(),
    success:function(response){ 
        if(response==1)
        {   

            setInterval(function(){$('.review_form').html('<h5><center><div class="alert alert-success">Review Successfully Submited......</div></center></h5>');},5);

        }
        else 
        {

            setInterval(function(){$('.review_form').html('<h5><center><div class="alert alert-danger">Sorry Your Review Not Submit......</div></center></h5>');},5);

        }
    }

});
});
</script>

Solution 2:

For doing it in ajax, remove the form.action="" because it will reload the page.

Try

• remove the action attribute from form.
• remove the type=submit from button.
• add the click event handler to button instead of adding it to form.submit.

---

The code will look like this

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="contactForm">
  <input type="text" name="name" id="name" placeholder="Name...">
  <input type="text" name="email" id="email" placeholder="Email...">
  <p><br></p>
  <textarea name="message" id="message" cols="40" rows="3" spellcheck="true" placeholder="Message..."></textarea>
  <p><br></p>
  <button id="submit" name="submit">Send Message</button>
</form>

jQuery

$(document).ready(function() {
  $('#submit').click(function(e) {
    e.preventDefault();
    $.post('index.php', $("form#contactForm").serialize(), function(data) {}).error(function(xhr) {alert(xhr)});
  });
});

Solution 3:

Use jQuery AJAX form submit and also Event.preventDefault(), so that page is not refreshed further.

for more help here is the link https://api.jquery.com/jquery.post/

Solution 4:

I think jQuery and AJAX is the way to go. I have a couple suggestions:

1. Try moving the e.preventDefault() to before you do $.post. This should stop the event before it can reload the page and then send the email.

2. Try using e.stopPropagation() in addition to or instead of e.preventDefault(). This will stop the event from bubbling up the DOM so that other elements won't trigger the reload.

3. Try adding return false; to the end of the function. There was a similar question where this worked: Prevent form redirect OR refresh on submit?