用ajax提交表单

Question

I'm building a website with GitHub pages and Jekyll.

I want to build a contact form where userss can send emails. For this I'm using Formspree . I created an account and I tried and it's working. The problem is that when an email is sent, i don't want to redirect the page at default thanks page. I tried to submit it with ajax but something is wrong and for that it's not working!! As result I have a 404 error. Also URL is changed and it looks like this: /?name=Name+Lastname&_replyto=test%40hotmail.com&message=Email+content+ Can somebody help me! Here's my code:

<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/[e-mail]", 
      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>

Here's my html code:

 <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="[e-mail]">
  </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

Remove the action="/" from your form, leaving you with:

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

Try that and let me know what happens.

Yh and change the submit input to a button

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

@Subhasish contribution is correct too. vote our answers pls. Let's know if u find it helpful