Как отправить ajax форму при клике на тег a?

Question

[IgorRastarov]

Всем привет.
У меня есть форма

<form class="form-inline" method="post" action="" id="form">
                    <div class="form-group">
                        <input type="text" class="form-control callTwo js-mask-phone" id="emailTwo" name="phone" placeholder="Номер телефона">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control callTwo" id="pwdTwo" name="name" placeholder="Ваше имя">
                    </div>
                    <div class="form-group newSeletc">
                        <select class="selectpicker" multiple title="Удобное время для звонка">
                            <option>с 9 до 12</option>
                            <option>с 12 до 18</option>
                        </select>
                    </div>
                </form>
 <a href="#" class="btn btn-danger callMe">ПЕРЕЗВОНИТЬ МНЕ</a>

Мне нужно, чтобы при клике на ПЕРЕЗВОНИТЬ МНЕ - отправлялось письмо

$(".btn btn-danger callMe").on("click", function() { //устанавливаем событие отправки для формы с id=form
            var form_data = $(this).serialize(); //собераем все данные из формы
            $.ajax({
            type: "POST", //Метод отправки
            url: "send.php", //путь до php фаила отправителя
            data: form_data,
            success: function() {
                   //код в этом блоке выполняется при успешной отправке сообщения
                   alert("Ваше сообщение отпрвлено!");
				}
         });
    });

Ничего не происходит

Answer 1

[Алексей Скляров]

У вас не происходит, потому что вы пытаетесь получить все данные не из формы, а из кнопки $(this).serialize();
Вместо this у вас берется кнопка. Либо пишите: $('#form').serialize();

Либо вешайте всю вашу функцию на onsubmit формы, тогда и this можно нормально использовать.

UPD: я использую такой вариант

<form class="form-inline" method="post" action="" id="form" onsubmit="send(this);return false;">
                    <div class="form-group">
                        <input type="text" class="form-control callTwo js-mask-phone" id="emailTwo" name="phone" placeholder="Номер телефона">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control callTwo" id="pwdTwo" name="name" placeholder="Ваше имя">
                    </div>
                    <div class="form-group newSeletc">
                        <select class="selectpicker" multiple title="Удобное время для звонка">
                            <option>с 9 до 12</option>
                            <option>с 12 до 18</option>
                        </select>
                    </div>
 <button type="submit" class="btn btn-danger callMe">ПЕРЕЗВОНИТЬ МНЕ</button>
                </form>

function send(form) {
            var form_data = $(form).serialize(); //собераем все данные из формы
            $.ajax({
            type: "POST", //Метод отправки
            url: "send.php", //путь до php фаила отправителя
            data: form_data,
            success: function() {
                   //код в этом блоке выполняется при успешной отправке сообщения
                   alert("Ваше сообщение отпрвлено!");
        }
         });
}

Comments

[IgorRastarov]

У меня на одной страницы 3 формы. Одни с button другие c a
Изначально код был такой

$("#form").on("submit", function() { //устанавливаем событие отправки для формы с id=form
            var form_data = $('#form').serialize(); //собераем все данные из формы
            $.ajax({
            type: "POST", //Метод отправки
            url: "send.php", //путь до php фаила отправителя
            data: form_data,
            success: function() {
                   //код в этом блоке выполняется при успешной отправке сообщения
                   alert("Ваше сообщение отпрвлено!");
				}
            });
    });

Но так вообще ни одна форма не отправлялась. Пришлось для тех, что с button делать один обработчик, а для тех, что с a - другой.

[Алексей Скляров]

IgorRastarov: использовать ссылку в форме, в качестве кнопки - это глупость. то же самое, что ездить на авто с колесами из дерева. Используйте либо button, либо input[type="submit"]. Это лучше и валиднее.

Тот код, что я вам привел - он будет работать для каждой формы в отдельности. Вы будете использовать одну функцию при сабмите формы, но в эту функцию всегда будет передаваться объект той формы, с которой вы сейчас работаете. Это удобно и не нужно писать 3 разных обработчика. Если же у вас формы разные, вы просто можете в качестве второго параметра передавать что-либо и исходя из этого параметра происходить какие-то действия.

[IgorRastarov]

Алексей Скляров: я не знаю, почему верстальщик ставит ссылки вместо баттонов(((
Сейчас правит все ссылки на button - поедет верстка

[Алексей Скляров]

IgorRastarov: перепишите стили под button и все, это делается за 2 секунды. Я не могу взять за вас все сделать. Я могу подсказать вам, как правило. Можете сказать верстальщику, что использование ссылок, вместо кнопок в форме это плохо. Ссылка - это ссылка, ее задача перевести тебя на другую страницу, а не отправить форму. Для того и придуманы кнопки.

[IgorRastarov]

Алексей Скляров: хорошо. спасибо.