Разделите две кнопки отправки в форме с помощью javascript

Question

Как узнать, какая кнопка отправки нажата в javascript?

function submitForm(){ 
    //if find open popup 
    //else if add continue in the same window 

} 

<form action="/findNames" onsubmit="return submitForm()"> 
    <input type="submit" value="Add" onclick="submitForm(this)"/> 
    <input type="submit" value="Find" onclick="submitForm(this)"/> 
</form> 

---

, что я пытался:

Я пытался сделать это с OnClick вместо этого как следует, но когда «Найти» нажимается кнопка открывает всплывающее окно и представляет родительское окно также. Как я могу остановить его от отправки родительского окна?

function submitForm(submit){ 
    if(submit.value=="Find"){ 
     find();//opens a popup window 
    }else if(submit.value == "Add"){ 
     //stay in the same window 
    } 
} 

function find(){ 
    var width = 1010; 
    var height = 400;   
    var params = 'width='+width+', height='+height;  
    popupWin = window.open('find.do','windowname5', params); 
    popupWin.focus(); 
} 

<form action="/findNames"> 
    <input type="submit" value="Add" onclick="submitForm(this)"/> 
    <input type="submit" value="Find" onclick="submitForm(this)"/> 
</form> 

Answer 1

Вы находитесь на правильном пути, но ваша форма отправляется всегда, потому что вы не отменяете события (или, на языке DOM Level 2+, вы не «предотвращаете действие по умолчанию для события»).

function submitForm (button) 
{ 
    if (button.value == "Find") 
    { 
    /* open popup */ 
    find(); 
    } 
    else if (button.value == "Add") 
    { 
    /* stay in the same window */ 
    } 

    return false; 
} 

<form action="/findNames"> 
    <input type="submit" value="Add" onclick="return submitForm(this)"/> 
    <input type="submit" value="Find" onclick="return submitForm(this)"/> 
</form> 

(Вы никогда не должны называть переменную submit формы, связанные, потому что если вы не будете осторожны, что отменяет submit метода, form объекта.)

Возвращаемое значение false, когда возвращается обработчику событий, предотвращает действие по умолчанию для события click. Это означает, что пользовательский агент работает так, как будто кнопка отправки никогда не активировалась в первую очередь, и форма не отправляется.

Еще один подход к решению этого вопроса - сохранить значение, идентифицирующее нажатую кнопку отправки в переменной или свойстве, и проверить это значение в прослушивателе событий submit. Это работает, потому что click событие input (кнопка отправки) по определению происходит до submit случае form: (. Это просто пример Постарайтесь свести к минимуму количество глобальных переменных.)

var submitName; 

function submitForm (form) 
{ 
    if (submitName == "Find") 
    { 
    /* open popup */ 
    find(); 
    } 
    else if (submitName == "Add") 
    { 
    /* stay in the same window */ 
    } 

    return false; 
} 

function setSubmit (button) 
{ 
    submitName = button.value; 
} 

<form action="/findNames" onsubmit="return submitForm(this)"> 
    <input type="submit" value="Add" onclick="setSubmit(this)"/> 
    <input type="submit" value="Find" onclick="setSubmit(this)"/> 
</form> 

Опять же, возвращаемое значение false, при возврате в обработчик события submit, предотвращает отправку формы. Возможно, вы захотите вернуть true, если вы явно хотите, чтобы форма была отправлена ​​после обработки события submit. Например, вы можете проверить форму и если проверка прошла успешно, отобразите ответ сервера в другом фрейме с помощью атрибута target.

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

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

Смотрите также: DOM Client Object Cross-Reference: DOM Events

Самое главное здесь в том, что, несмотря на все стороны клиента улучшений, которые вы делаете, форма остается доступной, я. е. что он по-прежнему работает с клавиатурой даже без клиентских скриптов. Ваш скрипт на стороне сервера (здесь: /findNames) может работать как резервный, а клиентский скрипт может избежать ненужных обращений, улучшая работу пользователя и уменьшая нагрузку на сеть и сервер.

Answer 2

input из type="submit" всегда будет представлять форму. Используйте inputtype="button" вместо этого, чтобы создать кнопку, которая не отправляется.

Answer 3

Ваш код должен быть реорганизован для надлежащего подключения слушателей событий.

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

function preventSubmission(e) { 
    if (e.preventDefault) e.preventDefault(); 
    return false; 
} 

function find(){ 
    var width = 1010; 
    var height = 400;   
    var params = 'width='+width+', height='+height;  
    popupWin = window.open('find.do','windowname5', params); 
    popupWin.focus(); 
} 

Затем ссылки тайника в соответствующих элементах формы:

var form = document.getElementById('my-form'), 
    findButton = document.getElementById('find'); 

И, наконец, добавьте слушателей к DOM событий:

if (form.addEventListener) { 
    form.addEventListener("submit", preventSubmission); 
    findButton.addEventListener("click", find); 
} else { 
    form.attachEvent("submit", preventSubmission); 
    findButton.attachEvent("click", find); 
} 

Вот полный рабочий демо: http://jsfiddle.net/CQAHv/2/

Answer 4

Проверьте это:

Javascript:

var clicked; 
var buttons = document.getElementsByTagName("input"); 

for(var i = 0; i < buttons.length;i++) 
{ 
    var elem = buttons[i]; 
    if(elem.type=="submit") 
    { 
     elem.addEventListener("click", function(){ clicked=this.value;}, false); 
    } 
} 


window.onsubmit = function(e) 
{ 
    alert(clicked); 
    return false; 
} 

Markup:

<form action="/findNames"> 
    <input type="submit" value="Add" /> 
    <input type="submit" value="Find" /> 
</form> 

Вы будете иметь значение то, что кнопка была нажата.

jsFiddle: http://jsfiddle.net/hescano/v9Sz2/

Примечание: Для тестирования у меня есть return false внутри onsubmit события. Первый пример jsFiddle имеет свой собственный window.onload, поэтому вы можете добавить все, что находится внутри window.onsubmit, внутри window.onload, вот так http://jsfiddle.net/hescano/v9Sz2/1/ (протестировано в Chrome, Firefox).