0

我的网站上有一个表单，可以推送到我的电子邮件地址。以前在我编写 ajax 函数之前，表单会成功推送到我的电子邮件地址。唯一的问题是当用户填写表单时，它会在提交表单时将他们带到另一个页面。我的表单的 HTML 如下。 

            <form id="contact" method="post" action="E-mail-form.php" name="EmailFromMyWebsite">

                <label for="name">Name</label> <br>
                <input type="text" name="name" class="required" placeholder="Your Name" title=" (Your name is required)"> <br />

                <label for="email">E-mail</label> <br>
                <input type="email" name="email" class="required email" placeholder="Name@email.com" title=" (Your email is required)"> <br />

                <label for="message">Message/Comment</label> <br>
                <textarea name="message" class="required" placeholder="Leave a brief message" title=" (Please leave me a brief message)"></textarea> <br />

                <input type="submit" name="submit" id="submit" value="Send Message" />
            </form>
        </div><!-- /end #contact-form -->

我写的ajax调用是......

$("#submit").on('click', function(){
var formData = $('#contact').serialize();
$.ajax({
    type:"POST",
    data:"formData",
    url:"Email-form.php",
    success: function(data){
        $('#contact').html('<p>Your message has been sent</p>');
      }
   });
});

我的 javaScript 控制台没有显示任何错误，所以我认为问题出在我的 jQuery 逻辑上。在 Chrome 上，当我单击提交时，我被重定向到我的主页。在 Firefox 上，表单提交但我被重定向到另一个页面，因此它完全忽略了我的 AJAX 调用。有 AJAX 经验的人可以告诉我我做错了什么吗？如果通话失败，我也很想附上一条消息。我可以添加'失败：'并为价值设置一个函数，就像我为成功所做的那样？

4

2 回答 2

2

你有两个问题

  • 您的表单正在正常提交
  • 你试图发布错误的数据

要阻止表单提交，您可以从 jQuery 单击处理程序返回 false 或从事件对象调用 preventDefault。
您正在发送一个字符串"formData"作为表单数据，而不是formData变量中的字符串

$("#submit").on('click', function(event){
  var formData = $('#contact').serialize();
  $.ajax({
    type:"POST",
    data:formData,
    url:"Email-form.php",
    success: function(data){
        $('#contact').html('<p>Your message has been sent</p>');
      }
  });
  event.preventDefault();
  // or
  return false;
});
于 2013-08-05T00:28:37.827 回答
1

即使您也有 AJAX 调用，正常的表单提交操作仍有可能发生。一个简单的解决方法可能是将按钮类型从 更改submit为button。这样，您的点击处理程序仍然可以工作，但它不会自行执行提交表单的默认操作。

<input type="button" name="submit" id="submit" value="Send Message" />
于 2013-08-05T00:24:15.800 回答