微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – 防止页面重新加载和重定向表单提交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-b​​utton-submit时阻止页面刷新.我试过回复假;我试过preventDefault()和每个组合,包括return false;在onClick里面.我也尝试使用input type =“button”和type =“submit”代替相同的结果.我无法解决这个问题,而且它正在变得疯狂.如果可能的话我宁愿使用超链接由于一些设计的东西.
我非常感谢你对此的帮助.

解决方法

像这样修改函数

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',success: function(results) {
        $('ul#response').html(results);
      }
    });
});

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐