prevent页面重新加载和重定向表单提交的Ajax / jQuery的 [英] Prevent page reload and redirect on form submit ajax/jquery

问题描述

我已经经历了所有的类似帖子看上去在那里，但似乎没有任何帮助。这是我

I have looked through all the similar posts out there but nothing seems to help. This is what I have

<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
}

我所不能做的是prevent页面刷新的时候＃表单按钮提交是pressed。我试过返回false; 我试过 preventDefault（），每一个组合，包括返回假; 在的onClick 。我也尝试过使用输入类型=按钮和类型=提交来代替，而同样的结果。我解决不了这个，这是推动BE坚果。如果可能的话，我宁愿使用的超级链接，由于一些设计的东西。 我会在这个真正的AP preciate你的帮助。

What I am unable to do is prevent the page refresh when the #form-button-submit is pressed. I tried return false; I tried preventDefault() and every combination including return false; inside the onClick. I also tried using input type="button" and type="submit" instead and same result. I can't solve this and it is driving be nuts. If at all possible I would rather use the hyperlink due to some design things. I would really appreciate your help on this.

推荐答案

修改功能是这样的：

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

和作为注解中提到的，传递事件：

And as comment mentions, pass the event:

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);
      }
    });
});

这篇关于prevent页面重新加载和重定向表单提交的Ajax / jQuery的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！