Почему некорректно работает ajax?

Question

[Alexander]

простая форма

<form id="form">
            <div class="col-md-6 col-xs-12">
            <input type="text" required="" placeholder="Ведите свое имя" name="name"/>
            </div>
            <div class="col-md-6 col-xs-12">
            <input type="text"required="" placeholder="Ведите свои данные" name="mail"/>
            </div>
            <div class="col-md-12">
            <textarea name="text" id="" cols="30" rows="10"required="" placeholder="Ведите свое сообщение"></textarea>
            </div>
           <button>Отправить</button>
            <i class="fa fa-spinner fa-pulse fa-2x fa-fw" style="color:#ff6100"></i>
            <i class="fa fa-check fa-2x" style="color: #00FF0E"></i>
        </form>

в самом низу сайта js код

$('#form').submit(function(){
//            alert($(this).serialize());
        $.ajax({
//        cache:false,
        type: "POST",
        url : "mail.php",
        data: $(this).serialize()
        }).done(function(){
            alert('success');
        })
        });

mail.php

<?php

$recepient = "[e-mail]";
$sitename = "УЧЕБНЫЙ АДАПТИВНЫЙ САЙТ №1";

$name = trim($_POST["name"]);
$phone = trim($_POST["mail"]);
$text = trim($_POST["text"]);

$pagetitle = "Новая заявка с сайта \"$sitename\"";
$message = "Имя: $name \nТелефон: $phone" . $text;
mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");

Ajax запрос стоит POST, но когда я заполняю поля то у меня идет почему то GET а не POST - test.local/?name=asd&mail=asd&text=asd. Почему не пашет ведь все верно ?

Answer 1

[D']

Надо добавить e.preventDefault() чтоб форма не отправлялась.

$('#form').submit(function(e){
  e.preventDefault();
  $.ajax({
    type: "POST",
    url : "mail.php",
    data: $(this).serialize()
  }).done(function(){
    alert('success');
  })
});

Answer 2

[Ilya Korablev]

<form id="form">
замените на
<form id="form" method="POST">