Question

我正在使用GitHub页面和Jekyll建立一个网站。

我想构建一个用户可以发送电子邮件的联系表单。为此我正在使用Formspree。我创建了一个帐户，我尝试了它的工作。问题是，当发送电子邮件时，我不想在默认感谢页面重定向页面。我尝试用ajax提交它，但有些东西是错误的，因为它不起作用!! 结果我有404错误。此外，网址也已更改，如下所示：/?name=Name+Lastname&_replyto=test%40hotmail.com&message=Email+content+ 有人可以帮帮我！这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script>
    $("#contact-form").validate({
  submitHandler: function(form) {
    $.ajax({
      url: "//formspree.io/egzontina.krasniqi@hotmail.com", 
      method: "POST",
      data: {
        name: $(form).find("input[name='name']").val(),
        _replyto: $(form).find("input[name='_replyto']").val(),
        message: $(form).find("textarea[name='message']").val()
      },
      dataType: "json",
      success: function() {
        $("#submit-success").fadeIn();
        $("#contact-form").fadeOut();
      },
      error: function() {
        $("#submit-errors").fadeIn();        
      }
    });
  }
});
</script>

这是我的HTML代码：

 <div id="submit-success" class="alert alert-success alert-dismissible collapse" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          Message received! I'll be in touch.
 </div>


<div id="submit-errors" class="alert alert-danger alert-dismissible collapse" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  It looks like there was an error submitting the form. Please try again later.
</div>


<form id="contact-form" class="form" action="/">
  <div class="form-group">
    <label for="name">Name</label>
    <input class="form-control" type="text" name="name" required placeholder="Name">
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input class="form-control" type="email" name="_replyto" required placeholder="email@address.com">
  </div>
  <div class="form-group">
    <label for="message">Message</label>
    <textarea class="form-control" name="message" placeholder="Message" required rows="5"></textarea>
  </div>
  <input class="btn btn-primary" type="submit" value="Send">
</form>

Answer 1

目前，您的表单正在正常提交。使用

停止默认操作

$('#contact-form').on('submit', function(e) {
    e.preventDefault();
});

Answer 2

从表单中删除action="/"，然后留下：

<form id="contact-form" class="form">

试试看，让我知道会发生什么。

是的，并将提交输入更改为按钮

<button type="button" class="btn btn-primary">Send</button>

@Subhasish贡献也是正确的。投票我们的答案。让我们知道你是否觉得有用

Answer 3

从表单中删除操作，然后肯定会有效。否则，“/”将被称为GET请求，尽管您在客户端进行了任何其他验证。

@Dekoy绝对正确。使用此代码： <form id="contact-form" class="form">

使用ajax提交表单

3 个答案: