Форма 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, который имеет такое поведение.

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

Ответы

Ответ 1

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

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

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

Ответ 2

<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>

jsfiddle для того же

Ответ 3

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

Это решение автоматически помещает имя кнопки отправки в скрытое поле действия. Как 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?");
 }

Ответ 4

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

<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>

Ответ 5

Первое предложение:

Создайте переменную 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();
    }
}

Ответ 6

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

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

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

</script>

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

~ Spanky

Ответ 7

Почему бы не пропустить входы и затем добавить обработчики 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
}

Ответ 8

Я использую 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;
}