Отправка формы вручную с использованием JavaScript не отправляет кнопку отправки - PullRequest
Новая
       23

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

6 голосов
/ 20 декабря 2011

У меня есть форма с двумя кнопками отправки.Я хочу отправить форму вручную с использованием 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>

Когда форма отправляется выше с помощью кнопки «Сделать один», публикуемые параметры: 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, то добавленный элемент IS будет опубликован, а два оригиналакнопки отправки не публикуются.Просто для завершения картины, вот код, который добавляет элемент: 

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

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

Спасибо.

Ответы [ 2 ]

4 голосов
/ 20 декабря 2011

В спецификации указано, что первый шаг для отправки формы:

Шаг первый: определение успешных элементов управления

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

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

Однако:

...

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

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

2 голосов
/ 20 декабря 2011

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

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()
}
...