Что не так с ajax формой?

Question

[Дмитрий]

<form id="contact-form">

<div class="contact-form_input-container">
	<input class="contact-form_input validate[required,minSize[4]]" id="contact-name" type="text" name="first_name">
	<label class="contact-form_label" for="first_name">Имя</label>
</div>

<div class="contact-form_input-container">
	<input class="contact-form_input validate[required, custom[email]]" id="contact-email" type="email" >
	<label class="contact-form_label" for="email">E-mail</label>
</div>

<div class="contact-form_textarea-container">
	<textarea class="contact-form_input validate[required,minSize[20]]" name="text_message" id="contact-text" cols="30" rows="5"></textarea>
	<label class="contact-form_label" for="text_message">Сообщение</label>
</div>


<div class="contact-form_submit-container">
	<input class="contact-form_submit" type="submit" value="Отправить" name="submit" id="send">
</div>

</form>

$('#contact-form').submit(function() {
	$.ajax({
		url: "https://formspree.io/[e-mail]", 
    method: "POST",
    data: $(this).serialize(),
    dataType: "json"
	}).done(function() {
	   $('#contact-form').trigger("reset");
	});
	return false;
});

Что здесь не так? После отправки в адресной строке выводятся все поля. На другом проекте такой же код работает без проблем.

Answer 1

[Павел]

Попробуйте так.

$('#contact-form').on("submit", function(e) {
   e.preventDefault();
  $.ajax({
    url: "https://formspree.io/[e-mail]", 
    method: "POST",
    data: $(this).serialize(),
    dataType: "json"
  }).done(function() {
     $('#contact-form').trigger("reset");
  });
  return false;
});

Comments

[Дмитрий]

Как я понял в таком случае return false; уже не нужен?

[Павел]

Дмитрий: да, не нужен

[Дмитрий]

Павел: и все же я не очень понял в чем проблема, но вроде бы работает) Вообще не понял в чем была проблема

[Дмитрий]

Павел: кстати, можете взглянуть на вот это(wp) ?) Почему не выводится get_theme_mod()?

[Павел]

Дмитрий: в том, что по умолчанию post у формы посылает на сервер данные в запросе браузера. А функция .preventDefault() отменяет действие формы по умолчанию. Уменя тож была такая проблема. В хроме и опере форам отправлялась, а в FF отправлялась, а потом перекидывала на 404 на сайте.

[Павел]

Дмитрий: не, тут я не помогу)