Question

我正在尝试使用formspree提交表单我遇到两个不同的错误。当我在刷新页面后尝试提交表单时，我在新页面上出现错误

无法发布/联系

当我回去尝试再次提交表单时，我在控制台中收到错误消息：

POST https://formspree.io/sheabathandbody@mail.com 400（）jquery.min.js：4

发送@jquery.min.js：4

ajax @ jquery.min.js：4

（匿名）@main.js：8

dispatch @ jquery.min.js：3

r.handle @ jquery.min.js：3

我之前使用过此方法/代码提交表单，所以我不知道问题是什么

Contact.vue表格

<form id="contact" name="contact-form" method="post" action = "">
    <fieldset>
      <input placeholder="Your name" name="name" type="text" id="name" tabindex="1" required="required">
     </fieldset>
     <fieldset>
        <input placeholder="Your Email Address" name="email" id="email" type="email" tabindex="2" required="required">
      </fieldset>
      <fieldset>
         <input placeholder="Your Phone Number (optional)" type="tel" tabindex="3">
      </fieldset>
      <fieldset>
        <textarea placeholder="Type your message here...." tabindex="5" name="message" id="message" required="required"></textarea>
       </fieldset>
       <fieldset>
         <button name="submit" type="submit" id="submit_btn" >Submit</button>
       </fieldset>
</form>

这是我的main.js

(function($) {
$(window).on("load", function() {
// Contact form
var form = $("#contact");
form.submit(function(event) {
  event.preventDefault();
  var form_status = $('<div class="form_status"></div>');
  $.ajax({
    url: "https://formspree.io/sheabathandbody@mail.com",
    method: "POST",
    data: $(this).serialize(),
    dataType: "json",
    beforeSend: function() {
      form.prepend(
        form_status
          .html(
            '<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>'
          )
          .fadeIn()
      );
    }
  }).done(function(data) {
    form_status
      .html(
        '<p class="text-success">Thank you for contacting us. We will be in touch.</p>'
      )
      .delay(3000)
      .fadeOut();
  });
 });
});
})(jQuery);

Answer 1

猜猜这与VueJS无关，因为它不会在你共享的那些代码块中使用所有vue，这是纯粹的jQuery。

说，发送表单的问题是因为你没有正确地提交事件。

form.on('submit', function () { ... })

另一方面，ajax调用无法正常工作;你应该检查formspree.io的文档并更正它。

检查下一个代码

$(document).ready(function() {
  // Contact form
  var form = $("#contact");
  form.on('submit', function(event) {
    alert('Hola hola. This is working now!');
    event.preventDefault();
    var form_status = $('<div class="form_status"></div>');
    $.ajax({
      url: "https://formspree.io/sheabathandbody@mail.com",
      method: "POST",
      data: $(this).serialize(),
      dataType: "json",
      beforeSend: function() {
        form.prepend(
          form_status
          .html(
            '<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>'
          )
          .fadeIn()
        );
      }
    }).done(function(data) {
      form_status
        .html(
          '<p class="text-success">Thank you for contacting us. We will be in touch.</p>'
        )
        .delay(3000)
        .fadeOut();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="contact" name="contact-form" method="post" action="">
  <fieldset>
    <input placeholder="Your name" name="name" type="text" id="name" tabindex="1" value="blah" required="required">
  </fieldset>
  <fieldset>
    <input value="email@email.com" placeholder="Your Email Address" name="email" id="email" type="email" tabindex="2" required="required">
  </fieldset>
  <fieldset>
    <input value="123123123" placeholder="Your Phone Number (optional)" type="tel" tabindex="3">
  </fieldset>
  <fieldset>
    <textarea placeholder="Type your message here...." tabindex="5" name="message" id="message" required="required">Damn</textarea>
  </fieldset>
  <fieldset>
    <button name="submit" type="submit" id="submit_btn">Submit</button>
  </fieldset>
</form>

Answer 2

您可以创建一个方法，例如 postNow。

  methods: {

   postNow() {
      const link = "https://formspree.io/sheabathandbody@mail.com"
     var data = new FormData();
     data.append('_replyto',this.email)
     data.append('message',this.message)
  
     this.axios.post(link,data , {
      headers: {
        'Accept': 'application/json',
      },
    // body: data,
    }).then(res =>{
       console.log("response ===" ,res)
       this.email = "" ;this.message=""; //don't forget to create your data
    }).catch(err =>{
      console.log(err)
    });
  }
},

在您的模板中，您可以使用简单的 HTML 表单，只需稍作调整，

<form  @submit.prevent="postNow" method="POST" >
          <label>
            Your email:
            <input type="email" name="_replyto" v-model="email" />
          </label>
          <label>
            Your message:
            <textarea name="message" v-model="message"></textarea>
          </label>


          <button type="submit">Send</button>
        </form>

使用VuesJS使用ajax和formspree提交表单

2 个答案: