2015-02-21 3 views
1

У меня есть форму, которая может быть отправлена ​​двумя кнопками. Я хочу, чтобы одна кнопка просто сохраняла содержимое формы, а другая - для сохранения содержимого, а затем очищала его. Я использую ajax для отправки формы. В настоящее время у меня есть две кнопки с одинаковым именем, каждая из которых содержит другое значение. Вот мои HTML кнопка,Выбор способа отправки формы через ajax

//Saves the form 
<button type="submit" name="action" value="save_form" 
     class="btn btn-success">Save</button> 
//Saves the form and clears it 
<button type="submit" name="action" value="new_form" 
     class="btn btn-warning">New Form</button> 

Я использую Ajax для отправки формы и это код, я использую, чтобы получить значение кнопки действия, отправившей форму,

'action' : $('button[name=action]').val() 

Все но проблема заключается в том, что при отправке формы с помощью кнопки new_form приведенный выше код jQuery по-прежнему устанавливает значение кнопки отправки как save_card вместо new card.

Я переключил порядок отображения кнопок в форме, а приведенный выше код jQuery принимает значение любой кнопки, которая отображается первой, которая называется action.

Почему это делается? Как я могу определить, какая кнопка подала форму?

Jquery, который отправляет форму с помощью Ajax

$(document).on('submit', '#edit_form', function(event) { 
    // stop the form from submitting the normal way and refreshing the page 
    event.preventDefault(); 

    // get the form data 
    var formData = { 
     'did' : $('input[name=did]').val(), 
     'front' : $('textarea[name=front]').val(), 
     'back' : $('textarea[name=back]').val(), 
     'cid' : $('input[name=cid]').val(), 
     'action' : $('button[name=action]').val() 
    }; 
    // process the form 
    $.ajax({ 
     type  : 'POST', 
     url   : '../API/api.php', 
     data  : formData, 
     success: function(data) { 
         //do something 
        } 
    }); 

}); 
+0

опубликовать JavaScript также. –

+0

@FrebinFrancis Добавлено javascript –

ответ

2

Если вы звоните 'action' : $('button[name=action]').val() внутри события нажатия кнопки используйте

'action' : $(this).val(). 

$(this) будет относиться к элементу, который кликнули , и $('button[name=action]') вернет всю кнопку с именем = действие, и у вас будет действие с двумя кнопками с именем, чтобы возвращаемое первое встреченное.

Update

Попробуйте что-нибудь, как показано ниже:

$('button[name=action]').click(function(event) { 
    // stop the form from submitting the normal way and refreshing the page 

    // get the form data 
    var formData = { 
     'did' : $('input[name=did]').val(), 
     'front' : $('textarea[name=front]').val(), 
     'back' : $('textarea[name=back]').val(), 
     'cid' : $('input[name=cid]').val(), 
     'action' : $(this).val() 
    }; 
    // process the form 
    $.ajax({ 
     type  : 'POST', 
     url   : '../API/api.php', 
     data  : formData, 
     success: function(data) { 
         //do something 
        } 
    }); 

}); 
+0

Я добавил полный код для отправки моей формы. Я не уверен, будет ли этот метод работать для моего кода. Пожалуйста, дайте мне знать, если это сработает. –

+0

В начале моего кода должен быть этот '$ (document) .on ('submit', '#edit_form', function (event)', используя '$ (document) .on', потому что форма, которую я представляю, создается динамически и без '$ (документа). в том случае, если форма, созданная динамически, будет удалена. –