У меня очень простая форма с полем имени и двумя кнопками отправки: "изменить" и "удалить" . Мне нужно сделать некоторую проверку формы в javascript, когда форма отправлена, поэтому мне нужно знать, какая кнопка была нажата. Если пользователь нажимает клавишу ввода, значение "change" является тем, которое делает его сервером. Так что действительно, мне просто нужно знать, была ли нажата кнопка "удалить" или нет.
Могу ли я определить, какая кнопка была нажата? Или мне нужно изменить кнопку "удалить" из кнопки "отправить" на обычную кнопку и поймать ее событие onclick, чтобы отправить форму?
Форма выглядит следующим образом:
<form action="update.php" method="post" onsubmit="return checkForm(this);">
<input type="text" name="tagName" size="30" value="name goes here" />
<input type="hidden" name="tagID" value="1" />
<input type="submit" name="submit" value="Change" />
<input type="submit" name="submit" value="Delete" />
</form>
В функции checkForm() form["submit"] - это список node, а не один элемент, который я могу захватить значением.
Вы также можете использовать событие onclick несколькими способами для решения проблемы.
Например:
<input type="submit" name="submit" value="Delete"
onclick="return TryingToDelete();" />
В функции TryingToDelete() в JavaScript сделайте то, что хотите, затем return false, если вы не хотите, чтобы удаление продолжалось.
Здесь ненавязчивый подход с использованием jQuery...
$(function ()
{
// for each form on the page...
$("form").each(function ()
{
var that = $(this); // define context and reference
/* for each of the submit-inputs - in each of the forms on
the page - assign click and keypress event */
$("input:submit", that).bind("click keypress", function ()
{
// store the id of the submit-input on it enclosing form
that.data("callerid", this.id);
});
});
// assign submit-event to all forms on the page
$("form").submit(function ()
{
/* retrieve the id of the input that was clicked, stored on
it enclosing form */
var callerId = $(this).data("callerid");
// determine appropriate action(s)
if (callerId == "delete") // do stuff...
if (callerId == "change") // do stuff...
/* note: you can return false to prevent the default behavior
of the form--that is; stop the page from submitting */
});
});
Примечание. этот код использует свойство id для ссылок на элементы, поэтому вам нужно обновить разметку. Если вы хотите, чтобы я обновил код в своем ответе, чтобы использовать атрибут name для определения соответствующих действий, дайте мне знать.
<html>
<script type="text/javascript">
var submit;
function checkForm(form)
{
alert(submit.value);
return false;
}
function Clicked(button)
{
submit= button ;
}
</script>
<body>
<form method="post" onsubmit="return checkForm(this);">
<input type="text" name="tagName" size="30" value="name goes here" />
<input type="hidden" name="tagID" value="1" />
<input onclick="Clicked(this);" type="submit" name="submit" value="Change" />
<input onclick="Clicked(this);" type="submit" name="submit" value="Delete" />
</form>
</body>
</html>
Некоторые браузеры (по крайней мере, Firefox, Opera и IE) поддерживают это:
<script type="text/javascript">
function checkForm(form, event) {
// Firefox || Opera || IE || unsupported
var target = event.explicitOriginalTarget || event.relatedTarget ||
document.activeElement || {};
alert(target.type + ' ' + target.value);
return false;
}
</script>
<form action="update.php" method="post" onsubmit="return checkForm(this, event);">
<input type="text" name="tagName" size="30" value="name goes here" />
<input type="hidden" name="tagID" value="1" />
<input type="submit" name="submit" value="Change" />
<input type="submit" name="submit" value="Delete" />
</form>
Для встроенного кросс-браузерного решения вам придется добавлять обработчики onclick к самим кнопкам.
Дайте каждой из кнопок уникальный идентификатор, например
<input type="submit" id="submitButton" name="submit" value="Change" />
<input type="submit" id="deleteButton" name="submit" value="Delete" />
Я не уверен, как это сделать в необработанном javascript, но в jquery вы можете сделать
$('#submitButton').click(function() {
//do something
});
$('#deleteButton').click(function() {
//do something
});
Это говорит о том, что если нажать кнопку SubmitButton, сделайте все, что внутри. если щелкнуть deleteButton, сделайте все, что внутри него
В jQuery вы можете использовать $.data() для хранения данных в области видимости - в этом случае нет необходимости в глобальных переменных. Сначала вы нажимаете кнопку "Отправить", затем (в зависимости от действия) вы назначаете данные для формирования. Я не предотвращаю действие по умолчанию в событии клика, поэтому форма отправляется сразу после завершения события клика.
HTML:
<form action="update.php" method="post"">
<input type="text" name="tagName" size="30" value="name goes here" />
<input type="hidden" name="tagID" value="1" />
<input type="submit" name="submit" value="Change" />
<input type="submit" name="submit" value="Delete" />
</form>
JavaScript:
(function ($) {
"use strict";
$(document).ready(function () {
// click on submit button with action "Change"
$('input[value="Change"]').on("click", function () {
var $form = $(this).parents('form');
$form.data("action", "Change");
});
// click on submit button with action "Delete"
$('input[value="Delete"]').on("click", function () {
var $form = $(this).parents('form');
$form.data("action", "Delete");
});
// on form submit
$('form').on("submit", function () {
var $self = $(this);
// retrieve action type from form
// If there is none assigned, go for the default one
var action = $self.data("action") || "deafult";
// remove data so next time you won't trigger wrong action
$self.removeData("action");
// do sth depending on action type
if (action === "change") {
}
});
});
})(jQuery);
Сейчас у вас такая же проблема, как и обычный ввод текста. У вас одно и то же имя на двух разных элементах. Измените имена на "Изменить" и "Удалить", а затем определите, был ли один из них нажат, применив обработчик событий для обоих отправлений и предоставив разные методы. Я предполагаю, что вы используете чистый JavaScript, но если вы хотите, чтобы это было быстро, взгляните на jQuery.
То, что вам нужно, так же просто, как на w3schools
Поскольку вы не указали использование каких-либо фреймворков, это самый чистый способ сделать это с помощью прямого Javascript. С помощью этого кода то, что вы делаете, передает сам объект кнопки в функцию go(). Затем у вас есть доступ ко всем свойствам кнопок. Вам не нужно ничего делать с помощью setTimeout (0) или любых других пухлых функций.
<script type="text/javascript">
function go(button) {
if (button.id = 'submit1')
//do something
else if (button.id = 'submit2')
//do something else
}
</script>
<form action="update.php" method="post">
<input type="text" name="tagName" size="30" value="name goes here" />
<input type="hidden" name="tagID" value="1" />
<input id="submit1" type="submit" name="submit" value="Change" onclick="go(this);"/>
<input id="submit2" type="submit" name="submit" value="Delete" onclick="go(this);"/>
</form>
Событие click любом месте формы будет перехвачено обработчиком click формы (при условии, что элемент, по которому щелкнули, позволяет ему распространяться). Он будет обработан до submit формы.
Поэтому можно проверить, был ли целевой объект клика input (или button) тегом типа submit, и сохранить его значение (скажем, в атрибуте data-button в форме) для обработки в обработчике submit формы.
Сами кнопки отправки не требуют никаких обработчиков событий.
Мне нужно было сделать это, чтобы изменить action формы и target атрибуты, в зависимости от того, какая кнопка отправки нажата.
// TO CAPTURE THE BUTTON CLICKED
function get_button(){
var oElement=event.target;
var oForm=oElement.form;
// IF SUBMIT INPUT BUTTON (CHANGE 'INPUT' TO 'BUTTON' IF USING THAT TAG)
if((oElement.tagName=='INPUT')&&(oElement.type=='submit')){
// SAVE THE ACTION
oForm.setAttribute('data-button',oElement.value);
}
}
// TO DO THE SUBMIT PROCESSING
function submit_form(){
var oForm=event.target;
// RETRIEVE THE BUTTON CLICKED, IF ONE WAS USED
var sAction='';
if(oForm.hasAttribute('data-button')){
// SAVE THE BUTTON, THEN DELETE THE ATTRIBUTE (SO NOT USED ON ANOTHER SUBMIT)
sAction=oForm.getAttribute('data-button');
oForm.removeAttribute('data-button');
}
// PROCESS BY THE BUTTON USED
switch(sAction){
case'Change':
// WHATEVER
alert('Change');
break;
case'Delete':
// WHATEVER
alert('Delete');
break;
default:
// WHATEVER FOR ENTER PRESSED
alert('submit: By other means');
break;
}
} <form action="update.php" method="post" onsubmit="submit_form();" onclick="get_button();">
<input type="text" name="tagName" size="30" value="name goes here" />
<input type="hidden" name="tagID" value="1" />
<input type="submit" name="submit" value="Change" />
<input type="submit" name="submit" value="Delete" />
</form>
<p id="result"></p>Назовите кнопку удаления что-то еще. Возможно, назовите один SubmitChange и назовите другой SubmitDelete.
Я сам справлялся с этой проблемой. Нет встроенного способа определить, какая кнопка представляет форму, но это функция, которая может появиться в будущем.
Обходной путь, который я использую в процессе производства, - это хранить кнопку где-то для одного цикла событий при щелчке. JavaScript может выглядеть примерно так:
function grabSubmitter(input){
input.form.submitter = input;
setTimeout(function(){
input.form.submitter = null;
}, 0);
}
... и вы установите onclick для каждой кнопки:
<input type="submit" name="name" value="value" onclick="grabSubmitter(this)">
click срабатывает перед submit, поэтому в вашем событии отправки, если у вас есть форма заявки, нажата кнопка.
Я использую jQuery, поэтому я использую $.fn.data() вместо expando для хранения отправителя. У меня есть крошечный плагин для временного задания данных для элемента, который выглядит так:
$.fn.briefData = function(key, value){
var $el = this;
$el.data(key, value);
setTimeout(function(){
$el.removeData(key);
}, 0);
};
и я прикрепляю его к кнопкам следующим образом:
$(':button, :submit').live('click', function () {
var $form = $(this.form);
if ($form.length) {
$form.briefData('submitter', this);
}
});