Форма onSubmit определить, какая кнопка отправки нажата

У меня есть форма с двумя отправить кнопки и код:Форма onSubmit определить, какая кнопка отправки нажата

HTML:

<input type="submit" name="save" value="Save" /> 
<input type="submit" name="saveAndAdd" value="Save and add another" />

Javascript:

form.onSubmit = function(evnt) { 
    // Do some asyncrhnous stuff, that will later on submit the form 
    return false; 
}

Конечно, два представить кнопки выполняют разные вещи. Есть ли способ узнать в onSubmit, какая кнопка была нажата, так что позже я мог бы отправить, выполнив thatButton.click()?

В идеале я бы не хотел изменять код для кнопок, просто иметь аддон с чистым javascript, который имеет такое поведение.

Я знаю, что FF имеет evnt.explicitOriginalTarget, но я ничего не могу найти для других браузеров.

источник

2010-08-26 McTrafik

Я думаю, что это не дублировать, другой вопрос в контексте Jquery в то время как это не является, увидеть мой ответ ниже. –

Согласен, Javascript! = JQuery. – Jon

Не дубликат. Повторите вопрос. – AKS

Не в самом представлении обработчика событий, нет.

Но то, что вы может do, добавляет обработчики кликов к каждой отправке, которая сообщит обработчику отправки о том, что было нажата.

Вот полный пример (с использованием 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>

источник

2010-08-26 17:13:33

... в качестве альтернативы вы ловите клики, когда они пузырятся, добавляя обработчик onclick к самой форме, которая проверяет, был ли щелчок элементом кнопки отправки; в некоторых случаях это может быть проще. – Doin

@ Doin Пример? – JeromeJ

@JeromeJ: отредактирован этот ответ, чтобы включить пример; надеюсь, экспертная оценка позволит. (Я бы разместил его как свой собственный ответ, но вопрос закрыт). – Doin

Первый Предложение:

Создание переменной 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

возвращение (ложь) позволит предотвратить отправку формы из фактически обрабатывать и вызывать свои пользовательские функции, где вы можете отправить форму позже.

Тогда ваши функции будут работать что-то вроде этого ...

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(); 
    } 
}

источник

2010-08-26 17:01:00 Dutchie432

Сортировка. Затем я должен добавить скрытые поля в каждую из функций отправки, один с именем = «сохранить» значение = «...» и т. Д., И я стараюсь избегать этого. Не поймите меня неправильно, это действительное решение. Я просто ищу что-то более элегантное. – McTrafik

Скрытые поля? Для чего? – Dutchie432

# 2 не будет работать - когда вы использовали обработчики событий на основе DOM, ничего не будет выполнено после оператора 'return'. Поэтому ваши вызовы 'submitFunc()' и 'submitAndAddFunc()' никогда не будут срабатывать. –

Почему не перебрать входы, а затем добавить OnClick обработчиков каждый?

Вы не должны делать это в 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 
}

источник

2010-08-26 17:01:22 palswim

Единственный способ, которым я могу это сделать, - установить какую-то глобальную переменную с нажатой последней кнопкой ввода. Это неплохая идея. – McTrafik

Хорошо. Но, я думаю, я не уверен точно, что вы хотите сделать. – palswim

Я использую 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 должны иногда возвращать истинные

// 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; 
}

источник

2010-08-27 22:04:11 McTrafik

<form onsubmit="alert(this.submited); return false;"> 
    <input onclick="this.form.submited=this.value;" type="submit" value="Yes" /> 
    <input onclick="this.form.submited=this.value;" type="submit" value="No" /> 
</form>

источник

2011-06-23 10:06:09

@McLosysCreative спасибо, обновлено. http://jsfiddle.net/dj3QE/ –

Голые кости, но подтвердил, работая, например:

<script type="text/javascript"> 
var clicked; 
function mysubmit() { 
    alert(clicked); 
} 
</script> 
<form action="" onsubmit="mysubmit();return false"> 
    <input type="submit" onclick="clicked='Save'" value="Save" /> 
    <input type="submit" onclick="clicked='Add'" value="Add" /> 
</form>

источник

2012-04-08 12:52:47 Henrik

Все вышеперечисленные ответы очень хорошо, но я прибрал ее немного.

Это решение автоматически помещает имя кнопки отправки в скрытое поле действия. Как javascript на странице, так и код сервера могут проверить значение скрытого поля действия по мере необходимости.

Решение использует jquery для автоматического применения ко всем кнопкам отправки.

<input type="hidden" name="action" id="action" /> 
<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     //when a submit button is clicked, put its name into the action hidden field 
     $(":submit").click(function() { $("#action").val(this.name); }); 
    }); 
</script> 
<input type="submit" class="bttn" value="<< Back" name="back" /> 
<input type="submit" class="bttn" value="Finish" name="finish" /> 
<input type="submit" class="bttn" value="Save" name="save" /> 
<input type="submit" class="bttn" value="Next >>" name="next" /> 
<input type="submit" class="bttn" value="Delete" name="delete" /> 
<input type="button" class="bttn" name="cancel" value="Cancel" onclick="window.close();" />

Тогда напишите код, подобный этому, в форму отправки отправителя.

if ($("#action").val() == "delete") { 
    return confirm("Are you sure you want to delete the selected item?"); 
}

источник

2012-05-02 19:45:01

Это зависит от того, какое событие клика обрабатывается до отправки формы. Так будет всегда? Для динамически загружаемых форм в модальных диалоговых окнах вам нужно будет использовать делегированный обработчик и его нужно будет привязать так, чтобы он использовал цель события, чтобы выяснить, какая форма содержит элемент с щелчком, и убедиться, что скрытое поле, на которое вы нацеливаетесь, находится внутри эта форма. – Triynko

ОП заявили, что он не хочет изменять код для кнопок. Это наименее навязчивый ответ, который я мог бы придумать, используя другие ответы в качестве руководства. Он не требует дополнительных скрытых полей, позволяет оставить код кнопки неповрежденным (иногда у вас нет доступа к тому, что его генерирует), и дает вам информацию, которую вы искали в любом месте вашего кода ... какая кнопка был использован для отправки формы. Я не оценил, что произойдет, если пользователь использует клавишу Enter для отправки формы, а не щелчка.

<script language="javascript" type="text/javascript"> 

    var initiator = ''; 
    $(document).ready(function() { 
     $(":submit").click(function() { initiator = this.name }); 
    }); 

</script>

Тогда у вас есть доступ к переменной «инициатор» в любом месте, где может потребоваться проверка. Надеюсь это поможет.

~ Spanky

источник

2012-11-02 22:45:13 Spanky

Форма onSubmit определить, какая кнопка отправки нажата

ответ

Смежные вопросы