Question

我在页面上使用formspree作为单字段表单。为避免将我的用户重定向到默认的感谢页面，我尝试使用ajax提交表单并显示成功/错误消息。

但是，我的代码不起作用。据我所知，消息不会出现。我认为它与希望在我的按钮中显示的消息有关，而我的按钮是输入字段..

这里是fiddle，以下是代码：

HTML：

<div id="contactFormWrapper">
<form id="contact-form"      action="http://formspree.io/myemail@gmail.com" method="POST">
<input type="message" name="name" value placeholder="Chanel Boy.." class="design--form">
<input id="send-button" type="submit"  class="btn--main"  style="width:auto" value="SUBMIT">

</form></div>

JS：

var contactForm = document.querySelector('#contact-form'),
inputName = contactForm.querySelector('[name="name"]'),
sendButton = contactForm.querySelector('#send-button');

sendButton.addEventListener('click', function(event){
  event.preventDefault(); // prevent the form to do the post.

  sendButton.innerHTML = 'Sending..';

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '//formspree.io/myemail@gmail.com', true);
  xhr.setRequestHeader("Accept", "application/json")
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

  xhr.send(
    "name=" + inputName.value;

  xhr.onloadend = function (res) {
    if (res.target.status === 200){
      sendButton.innerHTML = 'Message sent!';
    }
    else {
      sendButton.innerHTML = 'Error!';
    }
  }
});

谢谢！

Answer 1

有一些错别字和对输入值如何工作的误解。这是更新后的fiddle。

我看到的两个主要问题是：

xhr.send没有右括号
您无法使用<input type="submit>更改输入文本（innerHTML），您需要更改value：sendButton.value = 'Sending...';

当我把我的电子邮件地址放在你的电子邮件地址而不是你的电子邮件地址时我收到了来自formspree的确认电子邮件，然后能够通过小提琴提交给我自己。

Answer 2

我是使用www.enformed.io完成的，只是作为formspree工作，但是开箱即用的重定向，效果很好。还有一些有趣的功能，如电子邮件自定义。

Formspree：Ajax提交无法正常工作

2 个答案: