Empêcher le rechargement de la page et de les rediriger sur le formulaire de soumission ajax/jquery

J'ai regardé à travers les postes là, mais rien ne semble aider. C'est ce que j'ai

HTML:

<section>
<form id="contact-form" action="" method="post">
<fieldset>
<input id="name" name="name" placeholder="Name" type="text" />
<input id="email" name="email" placeholder="Email" type="text" />
<textarea id="comments" name="comments" placeholder="Message"></textarea>
<div class="12u">
<a href="#" id="form-button-submit " class="button" onClick="sendForm()">Send Message</a>
<a href="#" id="form-button-clear" class="button" onClick="document.getElementById('contact-form').reset()">Clear Form</a>
</div>
<ul id="response"></ul>
</fieldset>
</form>
</section>

JavaScript/jQuery:

function sendForm() {
var name = $('input#name').val();
var email = $('input#email').val();
var comments = $('textarea#comments').val();
var formData = 'name=' + name + '&email=' + email + '&comments=' + comments;
$.ajax({
type: 'post',
url: 'js/sendEmail.php',
data: formData,
success: function(results) {
$('ul#response').html(results);
}
}); //end ajax
}

Ce que je suis incapable de le faire est de prévenir l'actualisation de la page lorsque le #form-button-submit est pressé. J'ai essayé return false; j'ai essayé preventDefault() et chaque combinaison, y compris return false; à l'intérieur de la onClick. J'ai aussi essayé d'utiliser input type="button" et type="submit" au lieu et au même résultat. Je ne peux pas résoudre cela, et c'est la conduite de noix. Si possible, je préfère utiliser le lien hypertexte dû à une certaine conception des choses.
J'apprécierais vraiment votre aide.

OriginalL'auteur Vettan Maximillion | 2014-10-25

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *