Question

更新 - 可在此URL找到联系表单。

我正在尝试使用此tutorial来获取以下联系表单。

我设法使用apache webserver在我的计算机上按预期工作。将文件上传到在线网站后，ajax功能无法启动。我似乎e.preventDefault();在上传后停止工作，表单被重定向到新网站，而不仅仅是在没有重新加载的情况下在网站上处理。

我一直在尝试使用return false;代替e.preventDefault();而没有取得任何成功。

她是我的代码：

html的

<form method="post" action='mail/mail.php'>
    <label>Name</label>
    <input name="name" id="name" placeholder="Name.." required="true" class="input-field">

    <label>Mail</label>
    <input type="email" name="email" placeholder="Mail.." required="true" class="input-field">

    <label>Msg</label>
    <textarea name="message" id="message" class="textarea-field" required="true"></textarea>

    <input type="submit" id="submit" name="submit" value="Send">
</form>

    <div id="loading">
        Sender melding...
    </div>
    <div id="success">
    </div>

的.js

$(function(){
      $('form').submit(function(e){
        var thisForm = $(this);
        //Prevent the default form action

        //return false;
        e.preventDefault();

        //Hide the form
        $(this).fadeOut(function(){
          //Display the "loading" message
          $("#loading").fadeIn(function(){
            //Post the form to the send script
            $.ajax({
              type: 'POST',
              url: thisForm.attr("action"),
              data: thisForm.serialize(),
              //Wait for a successful response
              success: function(data){
                //Hide the "loading" message
                $("#loading").fadeOut(function(){
                  //Display the "success" message
                  $("#success").text(data).fadeIn();
              });
            }
          });
        });
      });
    })

请帮忙！

Answer 1

那是因为您的 JS 缺少结束});。请检查此演示以确认默认操作确实已被阻止，并且ajax确实启用了。但是，我期待POST，但我看到了OPTIONS请求。

注意：为name或id属性值submit提供元素是不好的做法。例如，您无法使用JavaScript通过默认表单提交提交表单 - this.submit() or $('form')[0].submit()，而不会收到错误...submit() is not a function ....。

$(function() {
      $('form').submit(function(e) {
        var thisForm = $(this);
        //Prevent the default form action

        //return false;
        e.preventDefault();

        //Hide the form
        $(this).fadeOut(function() {
          //Display the "loading" message
          $("#loading").fadeIn(function() {
            //Post the form to the send script
            $.ajax({
              type: 'POST',
              url: thisForm.attr("action"),
              data: thisForm.serialize(),
              //Wait for a successful response
              success: function(data) {
                //Hide the "loading" message
                $("#loading").fadeOut(function() {
                  //Display the "success" message
                  $("#success").text(data).fadeIn();
                });
              }
            });
          });
        });
      });
  }); // <==== MISSING THIS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post" action='mail/mail.php'>
  <label>Name</label>
  <input name="name" id="name" placeholder="Name.." required="true" class="input-field">

  <label>Mail</label>
  <input type="email" name="email" placeholder="Mail.." required="true" class="input-field">

  <label>Msg</label>
  <textarea name="message" id="message" class="textarea-field" required="true"></textarea>

  <input type="submit" id="submit" name="submit" value="Send">
</form>

<div id="loading">
  Sender melding...
</div>
<div id="success">
</div>

Answer 2

由于您仍在通过AJAX提交，您可能会发现将输入类型更改为按钮更容易，并且绑定到click而不是表单提交，以避免您试图规避的默认提交行为。

使用e.preventDefault（）联系表单;不工作

2 个答案: