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

Answer 2

function sendForm(){
    // all your code
    return false;
}

Answer 3

您是否尝试过使用

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

Answer 4

我也有点想找到解决这个问题的方法，到目前为止我找到的最好的工作方法就是这个 -

尝试使用XHR向任何网址发送请求，而不是$ .ajax（）......我知道这听起来有点奇怪但是试试看！
的实施例 -

<form method="POST" enctype="multipart/form-data" id="test-form">

var testForm = document.getElementById('test-form');
testForm.onsubmit = function(event) {
event.preventDefault();

var request = new XMLHttpRequest();
// POST to any url
request.open('POST', some_url, false);

var formData = new FormData(document.getElementById('test-form'));
request.send(formData);

这将成功发送您的数据......无需重新加载页面。

Answer 5

简单完整的工作代码

<script>
    $(document).ready(function() {
        $("#contact-form").submit(function() {
            $("#loading").show().fadeIn('slow');
                $("#response").hide().fadeOut('slow');
                 var frm = $('#contact-form');
                 $.ajax({
                     type: frm.attr('method'),
                     url: 'url.php',
                     data: frm.serialize(),
                     success: function (data) {
                         $('#response').html(data);
                         $("#loading").hide().fadeOut('slow');
                         $("#response").slideDown();
               }, error: function(jqXHR, textStatus, errorThrown){
              console.log(" The following error occured: "+ textStatus, errorThrown );
            } });
           return false;
        });
    });
</script>

#loading可以是图片或在表单处理时显示的内容，使用代码只需创建ID为contact-form的表单

Answer 6

避免提交表单的另一种方法是将按钮放在表单之外。我有现有的代码正在工作，并根据工作代码创建了一个新页面并编写了这样的html：

<form id="getPatientsForm">
    Enter URL for patient server
    <br/><br/>
    <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
    <input name="patientRootUrl" size="100"></input>
    <br/><br/>
    <button onclick="javascript:postGetPatientsForm();">Connect to Server</button>
</form>

此形式会导致上述不良重定向。将html更改为下面显示的内容可以解决问题。

<form id="getPatientsForm">
    Enter URL for patient server
    <br/><br/>
    <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
    <input name="patientRootUrl" size="100"></input>
    <br/><br/>
</form>
<button onclick="javascript:postGetPatientsForm();">Connect to Server</button>

Answer 7

我希望任何人都能很好地理解我的想法，因为这是一个非常简单的想法。

将您所需的表格本身作为身份证明，或者您可以通过您喜欢的任何其他方式获取。
＆＃34;提交＆＃34;从您的javascript文件中调用onclick方法。
在这个方法中创建一个变量，在你的id上引用addEventListener，并在＆＃34;提交＆＃34;上生成一个preventDefault方法。不在＆＃34;点击＆＃34;。
澄清一下，看到这个：
```
// element refers to the form DOM after you got it in a variable called element for example:
element.addEventListener('submit', (e) => {
   e.preventDefault();
   // rest of your code goes here
});  
```
简单的想法是在点击事件处理提交按钮后通过提交事件来处理表单。

无论您在此方法中的需求是什么，它现在都可以正常运行而无需刷新:) 只要确保以正确的方式处理ajax，你就会完成。

当然它只适用于表格。

Answer 8

我的处理方式：我删除了整个form标记，并将所有表单元素（例如input，textarea标记）放置在div内，并使用一个按钮调用了javascript函数。像这样：

<div id="myform">
<textarea name="textarea" class="form-control">Hello World</textarea>
<button type="submit" class="btn btn-primary"
                            onclick="javascript:sendRequest()">Save
                            changes</button>
<div>

Javascript：

function sendRequest() {

        $.ajax({
            type: "POST",
            url: "/some/url/edit/",
            data: {
                data: $("#myform textarea").val()
            },
            success: function (data, status, jqXHR) {
                console.log(data);
                if (data == 'success') {
                    $(`#mymodal`).modal('hide');
                }
            }
        });

        return true;
}

我想过为什么在使用AJAX发送实际请求时为什么使用form。这种方法可能需要额外的精力来完成重置表单元素之类的事情，但对我有用。

注意：上面的答案比这更优雅，但是我的用例有些不同。我的网页有很多表格，我认为向每个提交按钮注册事件侦听器不是一个好方法。因此，我使每个提交按钮都调用了sendRequest（）函数。

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

HTML：

的JavaScript / jQuery的：

8 个答案: