Я пытаюсь найти значение кнопки отправки, которая вызвала форму для отправки
$("form").submit(function() {
});
Я мог бы запустить событие $( "input [type = submit]" ). click() для каждой кнопки и установить некоторую переменную, но это кажется менее элегантным, чем некоторые, как вытащить кнопку из формы при отправке.
Я реализовал это, и я полагаю, что это будет сделано.
$(document).ready(function() {
$("form").submit(function() {
var val = $("input[type=submit][clicked=true]").val()
// DO WORK
});
и это событие кнопки отправки, которое устанавливает его
$("form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
Спасибо за ответы, но это не ужасно неэлегантно...
Я использовал document.activeElement как набросок в этом ответе: Как получить сфокусированный элемент с помощью jQuery?
$form.on('submit', function() {
var $btn = $(document.activeElement);
if (
/* there is an activeElement at all */
$btn.length &&
/* it a child of the form */
$form.has($btn) &&
/* it really a submit element */
$btn.is('button[type="submit"], input[type="submit"], input[type="image"]') &&
/* it has a "name" attribute */
$btn.is('[name]')
) {
console.log("Seems, that this element was clicked:", $btn);
/* access $btn.attr("name") and $btn.val() for data */
}
});
Я использую тот факт, что кнопка всегда является сфокусированным элементом после нажатия на нее. Это не будет работать, если вы выполните blur() сразу после клика.
@Doin обнаружил еще один недостаток. Если пользователь отправляет форму через enter в текстовое поле, document.activeElement не установлен. Вам нужно будет следить за этим самостоятельно, обрабатывая события keypress в input[type="text"] и тому подобное.
Обновление 2017-01: Для моей библиотеки Hyperform Я решил не использовать activeElement, но для улавливать все события, которые приводят к подаче формы. Код для этого находится на Github.
Если вам посчастливилось использовать Hyperform, вы получите доступ к кнопке, которая вызвала отправку:
$(form).on('submit', function(event) {
var button = event.submittedVia;
});
Я создал тестовую форму и использовал Firebug таким образом, чтобы получить значение;
$('form').submit(function(event){
alert(event.originalEvent.explicitOriginalTarget.value);
});
К сожалению, только Firefox поддерживает это событие.
Здесь подход, который кажется более чистым для моих целей.
Во-первых, для любых и всех форм:
$('form').click(function(event) {
$(this).data('clicked',$(event.target))
});
Когда это событие клика запускается для формы, оно просто записывает исходную цель (доступную в объекте события) для доступа позже. Это довольно широкий штрих, поскольку он срабатывает для любого щелчка в любом месте формы. Комментарии оптимизаций приветствуются, но я подозреваю, что это никогда не вызовет заметных проблем.
Затем в $('form'). submit() вы можете узнать, что было последним нажато, с чем-то вроде
if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();
В соответствии с эта ссылка объект Event содержит поле Event.target, которое:
Возвращает строку, представляющую объект, инициировавший событие.
Я только что создал страницу, проверяющую, что это за значение, и кажется, что это представление относится к самой форме, а не к нажатой кнопке. Другими словами, Javascript не предоставляет возможности для определения нажатой кнопки.
Что касается решения Dave Anderson , было бы неплохо проверить, что в нескольких браузерах перед его использованием. Возможно, что он может работать нормально, но я не могу сказать в любом случае.
Один чистый подход - использовать событие click для каждой кнопки формы. Ниже приведена форма html с кнопками сохранения, отмены и удаления:
<form name="formname" action="/location/form_action" method="POST">
<input name="note_id" value="some value"/>
<input class="savenote" type="submit" value="Save"/>
<input class="cancelnote" type="submit" value="Cancel"/>
<input class="deletenote" type="submit" value="Delete" />
</form>
Ниже приведен jquery. Я посылаю соответствующее "действие" на ту же серверную функцию, в зависимости от того, какая кнопка была нажата ( "сохранить" или "удалить" ). Если щелкнуть "cancel", я просто перезагружаю страницу.
$('.savenote').click(function(){
var options = {
data: {'action':'save'}
};
$(this).parent().ajaxSubmit(options);
});
$('.deletenote').click(function(){
var options = {
data: {'action':'delete'}
};
$(this).parent().ajaxSubmit(options);
});
$('.cancelnote').click(function(){
window.location.reload(true);
return false;
});
Я искал и нашел несколько способов получить кнопку отправки name + value, отправленную на сервер с помощью jQuery + AJAX. Мне они очень не нравились...
Один из лучших был представлен здесь охотником:
Но я написал еще один.
Я хочу поделиться, потому что это хорошо, и, по мере необходимости, он работает также с формами, загружаемыми через ajax (после document.ready):
$(document).on('click', 'form input[type=submit]', function(){
$('<input type="hidden" />').appendTo($(this).parents('form').first()).attr('name', $(this).attr('name')).attr('value', $(this).attr('value'));
});
Simple! Когда нажата кнопка отправки, в форму добавляется скрытое поле, используя те же кнопки name и value кнопки отправки.
РЕДАКТИРОВАТЬ: Следующая версия легче читать. Кроме того, он берет на себя удаление ранее добавленных скрытых полей (в случае отправки одной и той же формы дважды, что вполне возможно при использовании AJAX).
Улучшенный код:
$(document).on('click', 'form input[type=submit]', function(){
var name = $(this).attr('name');
if (typeof name == 'undefined') return;
var value = $(this).attr('value');
var $form = $(this).parents('form').first();
var $input = $('<input type="hidden" class="temp-hidden" />').attr('name', name).attr('value', value);
$form.find('input.temp-hidden').remove();
$form.append($input);
});
Я попробовал некоторые из приведенных примеров, но они не работали для наших целей.
Вот сценарий, чтобы показать: http://jsfiddle.net/7a8qhofo/1/
Я столкнулся с подобной проблемой, и именно так мы решили проблему в наших формах.
$(document).ready(function(){
// Set a variable, we will fill later.
var value = null;
// On submit click, set the value
$('input[type="submit"]').click(function(){
value = $(this).val();
});
// On data-type submit click, set the value
$('input[type="submit"][data-type]').click(function(){
value = $(this).data('type');
});
// Use the set value in the submit function
$('form').submit(function (event){
event.preventDefault();
alert(value);
// do whatever you need to with the content
});
});
(событие)
function submForm(form,event){
var submitButton;
if(typeof event.explicitOriginalTarget != 'undefined'){ //
submitButton = event.explicitOriginalTarget;
}else if(typeof document.activeElement.value != 'undefined'){ // IE
submitButton = document.activeElement;
};
alert(submitButton.name+' = '+submitButton.value)
}
<form action="" method="post" onSubmit="submForm(this, event); return false;">
вы можете попробовать таким образом: "event.originalEvent.x" и "event.originalEvent.y":
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>test</title>
</head>
<body>
<form id="is_a_form">
<input id="is_a_input_1" type="submit"><br />
<input id="is_a_input_2" type="submit"><br />
<input id="is_a_input_3" type="submit"><br />
<input id="is_a_input_4" type="submit"><br />
<input id="is_a_input_5" type="submit"><br />
</form>
</body>
</html>
<script>
$(function(){
$.fn.extend({
inPosition: function(x, y) {
return this.each(function() {
try{
var offset = $(this).offset();
if ( (x >= offset.left) &&
(x <= (offset.left+$(this).width())) &&
(y >= offset.top) &&
(y <= (offset.top+$(this).height())) )
{
$(this).css("background-color", "red");
}
else
{
$(this).css("background-color", "#d4d0c8");
}
}
catch(ex)
{
}
});
}
});
$("form").submit(function(ev) {
$("input[type='submit']").inPosition(ev.originalEvent.x ,ev.originalEvent.y);
return false;
});
});
</script>
jQuery, похоже, не предоставляет данные о событии отправки. Похоже, предложенный вами метод - лучший выбор.
Просто другое решение, так как никто другой не отвечал моим требованиям. Преимущество состоит в том, что обнаружены щелчок и нажатие (ввод и пробел).
// Detects the Events
var $form = $('form');
$form.on('click keypress', 'button[type="submit"]', function (ev) {
// Get the key (enter, space or mouse) which was pressed.
if (ev.which === 13 || ev.which === 32 || ev.type === 'click') {
// Get the clicked button
var caller = ev.currentTarget;
// Input Validation
if (!($form.valid())) {
return;
}
// Do whatever you want, e.g. ajax...
ev.preventDefault();
$.ajax({
// ...
})
}
}
Это сработало лучше для меня.
С более конкретным обработчиком событий и JQuery, ваш объект события - нажатие кнопки. Вы также можете получить делегирующую форму из этого события, если это необходимо.
$('form').on('click', 'button', function (e) {
e.preventDefault();
var
$button = $(e.target),
$form = $(e.delegateTarget);
var buttonValue = $button.val();
});
В этом документе есть все, что вам нужно для начала. JQuery Док.
Я пишу эту функцию, которая помогает мне
var PupulateFormData= function (elem) {
var arr = {};
$(elem).find("input[name],select[name],button[name]:focus,input[type='submit']:focus").each(function () {
arr[$(this).attr("name")] = $(this).val();
});
return arr;
};
а затем использовать
var data= PupulateFormData($("form"));