Form Button Refreshes On Click - One Page Website
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 fromform
. - remove the
type=submit
frombutton
. - add the click event handler to
button
instead of adding it toform.submit
.
The code will look like this
HTML
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><formid="contactForm"><inputtype="text"name="name"id="name"placeholder="Name..."><inputtype="text"name="email"id="email"placeholder="Email..."><p><br></p><textareaname="message"id="message"cols="40"rows="3"spellcheck="true"placeholder="Message..."></textarea><p><br></p><buttonid="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:
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.Try using
e.stopPropagation()
in addition to or instead ofe.preventDefault()
. This will stop the event from bubbling up the DOM so that other elements won't trigger the reload.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?
Post a Comment for "Form Button Refreshes On Click - One Page Website"