Formspree：Ajax提交不起作用

我在頁面上使用Formspree作爲一個字段的表單。爲了避免將我的用戶重定向到默認的感謝頁面，我嘗試使用ajax提交表單並顯示成功/錯誤消息。Formspree：Ajax提交不起作用

但是，我的代碼不起作用。據我所知，這些消息不會出現。我認爲這是與希望的消息我的按鈕中顯示，和我的按鈕是一個輸入字段..

這裏的fiddle，這裏是代碼：

HTML：

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

謝謝！

來源

2016-01-09 Diane

語法問題太多。元素缺失屬性值=「東西」。 xhr.onloadend應該在xhr.send之外。 –

-1

以下是使用Ajax和formspree.io jsfiddle的工作示例。

您需要編輯jsfiddle中JavaScript的第14行的url以測試您的formpree url。

HTML

<form id="contact-form"> 
    <div class="form-group center-block"> 
    <label for="inputName">Name</label> 
    <input type="text" class="form-control contact-input" id="inputName" placeholder="Name" name="name"/> 
    </div> 
    <div class="form-group center-block"> 
    <label for="inputEmail">Email</label> 
    <input type="email" class="form-control contact-input" id="inputEmail" placeholder="Email" name="email"/> 
    </div> 
    <div class="form-group center-block"> 
    <label for="inputMessage">Message</label> 
    <textarea id="inputMessage" class="form-control contact-input" rows="3" placeholder="Your Message" name="message"></textarea> 
    </div> 
    <input type="text" name="_gotcha" style="display:none" /> 
    <div class="text-center"> 
    <button class="btn btn-default" type="submit" id="email-submit-btn" value="Send">Submit</button> 
    <div class="alert alert-danger center-block submit-fail display-none">Please check your entries.<br><a href="#"></a> 
    </div> 
    <div class="alert alert-success center-block submit-success display-none">Message sent<br><a href="#"></a> 
    </div> 
    </div> 
    <span></span> 
</form>

$(document).ready(function() { 
    $('#contact-form').submit(function(e) { 
     var name = $('#inputName') 
     var email = $('#inputEmail') 
     var message = $('#inputMessage') 

     if(name.val() == "" || email.val() == "" || message.val() == "") { 
     $('.submit-fail').fadeToggle(400); 
     return false; 
     } 
     else { 
     $.ajax({ 
      method: 'POST', 
      url: '//formspree.io/[email protected]', 
      data: $('#contact-form').serialize(), 
      datatype: 'json' 
     }); 
     e.preventDefault(); 
     $(this).get(0).reset(); 
     $('.submit-success').fadeToggle(400); 
     } 
    }); 

    $('.submit-fail, .submit-success').click(function() { 
    $(this).hide(); 
    }) 
});

CSS

body { 
    margin: 15px; 
} 
.display-none { 
    display: none; 
}

來源

2016-05-04 16:10:47 jtlindsey

有幾個錯別字和輸入值是如何工作的一種誤解。這裏是更新的fiddle。

我看到的兩個主要問題是：

的xhr.send沒有一個右括號
您不能更改使用innerHTML輸入（<input type="submit>）的文本，你需要改變在value：sendButton.value = 'Sending...';

這絕對是爲我工作，當我把我的電子郵件地址，而不是你的。我從formpree收到確認電子郵件，然後能夠通過小提琴向我自己提交。

來源

2016-09-19 22:11:57 Jake

我用它做www.enformed.io，作品一樣formspree但有重定向開箱即用，工程巨大。還有一些有趣的功能，如電子郵件定製。

來源

2016-10-07 15:03:25 Ivangrx

Formspree：Ajax提交不起作用

回答

相關問題