Получите доступ к "сообщению" с помощью JavaScript или проверьте, какая кнопка отправки была использована для отправки формы

Ответ 1

Вместо этого существует ли способ доступа к тем же "сообщениям", которые сервер получает с помощью JavaScript до его отправки?

Не точные данные, нет.

Обычный способ узнать, какая кнопка submit была нажата (к сожалению), чтобы присоединить обработчики click к кнопкам и установить для них переменную (или значение поля hidden), которую вы можете затем проверьте свой обработчик событий submit.

Поскольку вы используете атрибуты обработчика событий DOM0 старого стиля, возможно, поле hidden лучше подходит для того, что вы делаете:

<form method="post">
 <input type="hidden" name="submitclicked" value="">
 <button type="submit" name="command" value="cancel" onclick="submitClick(this);">Cancel Order</button>
 <button type="submit" name="command" value="proceed" onclick="submitClick(this);">Save Order</button>
</form>

... где submitClick выглядит следующим образом:

function submitClick(button) {
    button.form.submitclicked.value = button.value;
}

... но я рекомендую вместо этого использовать обработчики событий DOM2 или, по крайней мере, прикреплять обработчики DOM0 в блоках кода, так как вы можете избежать создания глобальных функций, обмениваться данными без создания глобальных переменных и т.д.

Чтобы быть ясным, вам не нужно указывать атрибут onclick для каждого элемента, единственная причина, по которой я это делал, заключается в том, что вы использовали обработчики DOM0.

Лучший способ справиться с этим - с бурлящим событием. Поскольку событие click пузырится до формы из его элементов управления потомками, включая кнопки отправки, вы можете подключить событие к форме, а затем посмотреть, произошло ли это на кнопке отправки, и если да, то какая кнопка value есть.

Например, здесь, с обработчиком DOM0, динамически добавляется в форму, которая будет предупреждать, что нажата кнопка отправки:

var form = document.getElementById("theForm");
form.onclick = function(e) {
  // Get the event
  e = e || window.event;

  // Did it originate in an input[type=submit]?
  if (e.target.tagName === "INPUT" &&
      e.target.type === "submit") {
    // Yes
    alert(e.target.value);
  }
};

Живой пример | Источник

Или используя DOM2-обработчики в любом современном браузере (не IE8 или ранее, но было бы легко добавить attachEvent для тех, что делает то же самое addEventListener делает [и предшествует его]):

document.getElementById("theForm").addEventListener("click", function(e) {
  // Did it originate in an input[type=submit]?
  if (e.target.tagName === "INPUT" &&
      e.target.type === "submit") {
    // Yes
    alert(e.target.value);
  }
}, false);

Живой пример | Источник

Или используя библиотеку, чтобы сделать ее проще (здесь это jQuery, но большинство из них имеют эту функцию, которая называется делегированием событий):

$("#theForm").delegate("input[type=submit]", "click", function() {
  alert(this.value);
  return false;
});

Живой пример | Источник (я использую delegate там, потому что мне нравится ясность, с недавними версиями jQuery, вы можете использовать гиперперегруженный on, но это менее понятно. Если вы решите, обратите внимание, что порядок аргументов отличается.)

Дело в том, что это не сложно, сложно или особенно громоздко.

Повторите свой окончательный вопрос о вашем редактировании:

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

Наверное, нет, нет. Важно понимать, что многие из этих вещей только что эволюционировали. Значение кнопки отправки, отправленное с формой, является HTML-вещью, видимо, при создании модуля форм DOM HTML, никому не приходило в голову сказать: "Эй, мы должны иметь свойство в форме, которая существует только во время формы которое сообщает вам, что подало форму". Вероятно, это должно было произойти с кем-то, но, видимо, этого не произошло.

Ответ 2

Другим решением является использование переключателя вместо кнопки отправки (вам придется проектировать радио, чтобы выглядеть как кнопка).

После отправки значения поля должно быть выбрано значение, которое было нажато. Вы можете выбрать выбранную опцию, используя jQuery $("[name=command]:selected]") или $("#theForm").serialize()

<form method="post" onsubmit="return ajaxSubmit(this);" id="theForm">
 <input type="radio" name="command" value="cancel" id="cancel" onClick="document.getElementById('theForm').submit();">
 <label for="cancel">Cancel Order</label>

 <input type="radio" name="command" value="proceed" id="proceed" onClick="document.getElementById('theForm').submit();">
 <label for="proceed">Save Order</label>
</form>

Ответ 3

Я думаю, вы можете это сделать, удалив другую кнопку, та, которая не была нажата. После этого вы можете запустить jQuery serialize() или получить доступ к значению кнопки, оставленной любым другим способом.

Код:

<form method="post">
 <button type="submit" id=cancel name="command" value="cancel" onclick="document.getElementByid('submit').remove();submitClick(this);">Cancel Order</button>
 <button type="submit" id=submit name="command" value="proceed" onclick="document.getElementByid('cancel').remove();submitClick(this);">Save Order</button>
</form>

Ответ 4

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

Просто сделайте так, чтобы обработчики кликов инициировали отправку формы при передаче достаточной контекстной информации в микс. Подождите, обработчики кликов обычно сообщают вам об источнике клика уже (там есть ваша контекстная информация), особенно если вы используете некоторую инфраструктуру jQuery-ish.

Итак, вместо:

<form onsubmit="doSubmit()" ...>
<input type="submit" onclick="updateSourceTo('cancel');" ... />
<input type="submit" onclick="updateSourceTo('submit');" ... />

Использование:

<form ...>
<input type="button" onclick="doSubmit('cancel');" ... />
<input type="button" onclick="doSubmit('submit');" ... />

Или, если вы обнаружите источник, посмотрев на цель события клика:

<form ...>
<input type="button" onclick="handleSubmitButtonClick();" ... />
<input type="button" onclick="handleSubmitButtonClick();" ... />

Для подробных подробностей handleSubmitButtonClick я должен упомянуть form.submit() и такие вещи, как jQuery event.target.

Я признаю, что соблюдение парадигмы submit-onsubmit способствует определенному пуризму для формирования обработки, но IMO вы уже вступаете в непуристские земли с использованием двух кнопок отправки.