阻止页面重新加载和重定向表单提交ajax/jquery

Question

我已经浏览了所有相似的帖子,但似乎没有任何帮助.这就是我所拥有的

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"不是相同的结果.我无法解决这个问题,而且它正在变得疯狂.如果可能的话,我宁愿使用超链接,因为一些设计的东西.我非常感谢你对此的帮助.

Answer 1

像这样修改函数:

function sendForm(e){
  e.preventDefault();
}

正如评论所提到的,传递事件:

onclick = sendForm(event);

更新2:

$('#form-button-submit').on('click', function(e){
   e.preventDefault();

   var name = $('input#name').val(),
       email = $('input#email').val(),
       comments = $('textarea#comments').val(),
       formData = 'name=' + name + '&email=' + email + '&comments=' + comments;

    $.ajax({
      type: 'post',
      url: 'js/sendEmail.php',
      data: formData,
      success: function(results) {
        $('ul#response').html(results);
      }
    });
});