Formspree：Ajax提交不起作用 [英] Formspree: Ajax submit not working

问题描述

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

但是，我的代码isn没有工作。据我所知，这些消息不会出现。我认为它与想要在我的按钮中显示的消息有关，而我的按钮是一个输入字段。

以下是小提琴，以下是代码：

HTML：

 < div id =contactFormWrapper> 
< form id =contact-formaction =http://formspree.io/[e-mail] =POST> 
< input type =messagename =namevalue placeholder =Chanel Boy ..class =design  -  form> 
< input id =send-buttontype =submitclass =btn  -  mainstyle =width：autovalue =SUBMIT> 
 
< / form>< / div> 
  

JS：

  var contactForm = document.querySelector（'＃contact-form'），
 inputName = contactForm.querySelector（'[name =name]'），
 sendButton = contactForm.querySelector （ '＃发送按钮'）; 
 
 sendButton.addEventListener（'click'，function（event）{
 event.preventDefault（）; //防止表单发布信息
 
 sendButton .innerHTML ='Sending ..'; 
 
 var xhr = new XMLHttpRequest（）; 
 xhr.open（'POST'，'//formspree.io/[e-mail]' ，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！'; 
} 
} 
}）; 
  

谢谢！ b

解决方案

我使用 www.enformed.io < a>，就像formpree一样工作，但具有开箱即用的重定向功能，可以运行grea吨也有一些有趣的功能，如电子邮件定制。

I'm using formspree for a one-field form on my page. To avoid redirecting my users to the default thank you page, I'm trying to use ajax to submit the form and display success/error messages.

However, my code isn't working. As far as I can tell, the messages don't appear. I think it has something to do with the messages wanting to display within my button, and my button being an input field..

Here's the fiddle, and here's the code:

HTML:

<div id="contactFormWrapper">
<form id="contact-form"      action="http://formspree.io/[e-mail]" 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/[e-mail]', 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!';
    }
  }
});

Thanks!

解决方案

I did it using www.enformed.io, works just as formspree but has a redirect out of the box, works great. Also has a couple of interesting features like email customization.

这篇关于Formspree：Ajax提交不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！