Как с помощью jQuery отправить форму?

Question

[Ramzessr]

Есть следующая форма:

<form id="add" action="/add" method="POST">
<input type="text" name="firstname">
<input type="text" name="lastname">
<input type="email" name="email">
</form>

Ввиду своеобразного оформления кода ВНЕ формы есть ссылка:
<a href="#" class="add">Добавить</a>

Как по нажатию на ссылку отправить данные формы с помощью jQuery? Заранее спасибо.

Answer 1

[Евгений Самойленко]

Гуглите ajax отправка формы

Примерный код:

function send_form(form_id) {
    var form = $('#'+form_id);
    var msg   = form.serialize();
    $.ajax({
        type: 'POST',
        url: '../handlers/hSentEmailCall.php', // Обработчик собственно
        data: msg,
        success: function(data) {
            // запустится при успешном выполнении запроса и в data будет ответ скрипта
        },
        error:  function(){
            alert('Ошибка!');
        }
    });

}

Запускать при помощи onclick:

<a href="#" class="add" onclick='send_form('add')'>Добавить</a>

Answer 2

[exmmo]

Добавить кнопку submit (скрытую)

<form id="add" action="/add" method="POST">
  <input type="text" name="firstname">
  <input type="text" name="lastname">
  <input type="email" name="email">
  <input type="submit" id="sendButton" style="display: none;" /> 
</form>

Инициировать её нажатие:

$(".add").click(function(){
  $("#sendButton").click();
});

Comments

[Ramzessr]

Ваш вариант мне подошел, но как сделать чтобы после нажатия не происходило действия перехода на /add ?

Answer 3

[cha-cha]

$(".add").click(function(){
  $("#add").submit();
});

Comments

[Ramzessr]

Ваш вариант мне подошел, но как сделать чтобы после нажатия не происходило действия перехода на /add ?

[Евгений Самойленко]

@Ramzessr убрать из action

Answer 4

[Виталий Киренков]

$(".add").click(function(e){
  e.preventDefault();
  $("#add").submit();
});

Comments

[Ramzessr]

Так не отправляются данные формы, проверял

Answer 5

[Ramzessr]

Забыл указать, что мне не требовался переход на форму обработчика. Решил таким образом:

$('.add').click(function () {
    var msg = $('#add').serialize();
    $.ajax({
        type: 'POST',
        url: '/add',
        data: msg
    });
});

Comments

[Евгений Самойленко]

Тогда можно мой ответ пометить как решение, в вашем случае.

Answer 6

[Александр Таратин]

malsup.com/jquery/form