Предотвратить перезагрузку страницы и перенаправить на форму отправить ajax / jquery
Я просмотрел все подобные посты, но ничего не помогло. Это то, что у меня есть
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
}
Что я не могу сделать, это предотвратить обновление страницы, когда#form-button-submit
нажата. Я старалсяreturn false;
Я старалсяpreventDefault()
и каждая комбинация, включаяreturn false;
внутриonClick
, Я также пытался использоватьinput type="button"
а такжеtype="submit"
вместо этого и тот же результат. Я не могу решить это, и это сводит с ума. Если это вообще возможно, я бы предпочел использовать гиперссылку из-за некоторых дизайнерских вещей. Буду очень признателен за вашу помощь в этом.