Форма onSubmit определяет, какая кнопка отправки была нажата [дублировать]
На этот вопрос уже есть ответ здесь:
У меня есть форма с двумя кнопками отправки и кодом:
HTML:
JavaScript:
form.onSubmit = function(evnt) {
// Do some asyncrhnous stuff, that will later on submit the form
return false;
}
Конечно, две кнопки отправки выполняют разные вещи. Есть ли способ узнать в onSubmit , какая кнопка была нажата, чтобы позже я мог отправить, выполнив , чтоButton.click () ?
В идеале я не хотел бы изменять код для кнопок, просто есть чистый аддон JavaScript, который имеет такое поведение.
Я знаю, что Firefox имеет evnt.explicitOriginalTarget , но я не могу найти ничего для других браузеров.
4 ответа
Не в самом обработчике события отправки, нет.
Но то, что вы можете сделать, это добавить обработчики кликов к каждой отправке, которые будут информировать обработчик отправки о том, что было нажато.
Вот полный пример (для краткости используется jQuery)
<html>
<head>
<title>Test Page</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function($) {
var submitActor = null;
var $form = $('#test');
var $submitActors = $form.find('input[type=submit]');
$form.submit(function(event) {
if (null === submitActor) {
// If no actor is explicitly clicked, the browser will
// automatically choose the first in source-order
// so we do the same here
submitActor = $submitActors[0];
}
console.log(submitActor.name);
// alert(submitActor.name);
return false;
});
$submitActors.click(function(event) {
submitActor = this;
});
});
</script>
</head>
<body>
<form id="test">
<input type="text" />
<input type="submit" name="save" value="Save" />
<input type="submit" name="saveAndAdd" value="Save and add another" />
</form>
</body>
</html>
Первое предложение:
Создайте переменную Javascript, которая будет ссылаться на нажатую кнопку. Давайте назовем его buttonIndex
<input type="submit" onclick="buttonIndex=0;" name="save" value="Save" />
<input type="submit" onclick="buttonIndex=1;" name="saveAndAdd" value="Save and add another" />
Теперь вы можете получить доступ к этому значению. 0 означает, что была нажата кнопка сохранения, 1 означает, что была нажата кнопка saveAndAdd.
Второе предложение
Я бы справился с этим, создав две JS-функции, которые обрабатывают каждую из двух кнопок.
Во-первых, убедитесь, что ваша форма имеет действительный идентификатор. Для этого примера я скажу, что идентификатор «myForm»
изменить
<input type="submit" name="save" value="Save" />
<input type="submit" name="saveAndAdd" value="Save and add another" />
на
<input type="submit" onclick="submitFunc();return(false);" name="save" value="Save" />
<input type="submit" onclick="submitAndAddFunc();return(false);" name="saveAndAdd" value="Save and add
return (false) предотвратит фактическую обработку отправки формы и вызовет ваши пользовательские функции, где вы можете отправить формируются позже.
Тогда ваши функции будут работать примерно так...
function submitFunc(){
// Do some asyncrhnous stuff, that will later on submit the form
if (okToSubmit) {
document.getElementById('myForm').submit();
}
}
function submitAndAddFunc(){
// Do some asyncrhnous stuff, that will later on submit the form
if (okToSubmit) {
document.getElementById('myForm').submit();
}
}
Я использую Ext, так что в итоге я сделал это:
var theForm = Ext.get("theform");
var inputButtons = Ext.DomQuery.jsSelect('input[type="submit"]', theForm.dom);
var inputButtonPressed = null;
for (var i = 0; i < inputButtons.length; i++) {
Ext.fly(inputButtons[i]).on('click', function() {
inputButtonPressed = this;
}, inputButtons[i]);
}
а затем, когда пришло время отправить, я сделал
if (inputButtonPressed !== null) inputButtonPressed.click();
else theForm.dom.submit();
Подождите, вы говорите. Это зациклится, если вы не будете осторожны. Итак, onSubmit иногда должен возвращать true
// Notice I'm not using Ext here, because they can't stop the submit
theForm.dom.onsubmit = function () {
if (gottaDoSomething) {
// Do something asynchronous, call the two lines above when done.
gottaDoSomething = false;
return false;
}
return true;
}
Почему бы не перебрать входные данные в цикле, а затем добавить к каждому обработчик кликов?
Вам не обязательно делать это в HTML, но вы можете добавить обработчик для каждой кнопки, например:
button.onclick = function(){ DoStuff(this.value); return false; } // return false; so that form does not submit
Тогда ваша функция сможет «делать что-то» в соответствии с переданным вами значением:
function DoStuff(val) {
if( val === "Val 1" ) {
// Do some stuff
}
// Do other stuff
}