Ручная отправка формы с использованием JavaScript не отправляет кнопку отправки

Question

У меня есть форма, в которой есть две кнопки отправки. Я хочу отправить форму вручную с помощью JavaScript и использовать кнопку ввода, чтобы отправить форму, размещенную вместе с другими элементами формы, как это было бы, если форма была отправлена ​​автоматически. На эту тему довольно много болтовни, но я не могу найти ответ.

<form method="post" action="echoToScreenAndLog.jsp" id="form1"> 
    <input id="field1" name="field1"/> 
    <input type="text" size="20" id="field2" name="field2"/> 

    <input type="submit" value="Do One" name="sub1_name" id="sub1_id"/> 
    <input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/> 
</form> 

Когда форма представлена ​​выше, с использованием "Do One" кнопки размещены параметры field1="xxx", field2="yyy", sub1_name="Do One".

Но я хочу, чтобы отправить форму вручную ...

<form method="post" action="echoToScreenAndLog.jsp" id="form1"> 
    <input id="field1" name="field1"/> 
    <input type="text" size="20" id="field2" name="field2"/> 

    <input type="submit" value="Do One" name="sub1_name" id="sub1_id"/> 
    <input type="submit" value="Do Two" name="sub2_name" id="sub2_id"/> 
</form> 
<script type="text/javascript"> 
    var btn = document.getElementById('sub1_id'); 
    btn.onclick=function() { 
     return mySubmit(document.getElementById('form1'), ...); 
    } 
</script> 

но делать вручную представление формы в функции mySubmit не отправляет параметр sub1_name. Я могу это понять - я обошел подачу, поэтому форма не представляется с помощью кнопок, поэтому нет смысла публиковать параметр, представляющий кнопку, используемую для отправки формы.

Когда я смотрю на элементы формы в обработчике onclick, я вижу обе кнопки. Я тоже не слишком удивлен этим, они являются элементами в форме, но я не понимаю, что если я добавлю элемент внутри своего обработчика onclick, то элемент, который я добавляю, отправлен, и две оригинальные кнопки отправки не публикуются. Просто для полноты картины, вот код, который добавляет элемент:

<script type="text/javascript"> 
    var btn = document.getElementById('sub1_id'); 
    btn.onclick=function() { 
     var f = document.getElementById('form1'); 
     var s = document.createElement("input"); 
     s.type="hidden"; s.name="xsubmit_name"; s.value="Bob"; s.id="xsubmit_id";    
     f.appendChild(s); 

     // s gets posted 
     return mySubmit(f, ...); 
    } 
</script> 

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

спасибо.

Answer 1

specification говорит, что первый шаг для отправки формы является:

Шаг один: Определение успешного указательных

"Успешных управлений" определяется как:

A успешный контроль «действителен» для подачи. Каждое успешное управление имеет свое управляющее имя в паре с его текущим значением как часть представленного набора данных формы. Успешный контроль должен быть определен внутри элемента FORM и должен иметь имя управления.

Однако:

...

• Если форма содержит больше одной кнопки отправки, только активированная кнопка отправки успешно.

Поскольку ни одна из кнопок отправки не активирована, ни одна из них не отправляется. Скрытые элементы ввода, с другой стороны, действительны и будут представлены только вместе. Обратите внимание, что вы добавляете скрытые элементы до, вызывая mySubmit(), поэтому во время выполнения вышеуказанных шагов (т. Е. Во время отправки) скрытый элемент является еще одной успешной управляющей частью формы и, таким образом, отправляется.

Answer 2

может использовать

var btn = document.getElementById('sub1_id'); 
btn.onsubmit=function() { 
    return false; 
} 

btn.onclick=function() { 
    var f = document.getElementById('form1'); 
    var s = document.createElement("input"); 
    s.type="hidden"; s.name="xsubmit_name"; s.value="Bob"; s.id="xsubmit_id";    
    f.appendChild(s); 

    f.submit() 
}