Manualmente enviando un formulario usando JavaScript no envía el botón de enviar

Question

Tengo un formulario que tiene dos botones para enviar. Deseo enviar el formulario manualmente usando JavaScript y tener el botón de entrada utilizado para enviar el formulario publicado junto con los otros elementos del formulario, como lo sería si el formulario se enviara automáticamente. Hay bastante charla sobre este tema, pero no puedo encontrar una respuesta.

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

Cuando se envía el formulario anterior utilizando el botón "Haga una", los parámetros son enviados field1="xxx", field2="yyy", sub1_name="Do One".

Pero quiero para enviar el formulario de forma manual ...

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

pero haciendo un manual de presentación de la forma en la función mySubmit no publicar el parámetro sub1_name. Puedo entender eso. Pasé por alto el envío, por lo que el formulario no se envía con los botones y, por lo tanto, no tiene sentido publicar un parámetro que represente el botón utilizado para enviar el formulario.

Cuando miro los elementos del formulario en el controlador onclick, puedo ver ambos botones. No estoy demasiado sorprendido por eso tampoco, son elementos en el formulario, pero lo que no entiendo es que si agrego un elemento dentro de mi controlador onclick, entonces el elemento que agrego se publicará y los dos botones de envío originales no están publicados. Sólo para completar el cuadro, aquí está el código que añade el elemento:

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

Agregar el elemento de entrada podría funcionar para mí, pero estoy confundido cómo el navegador sabe para publicar mi elemento añadido y no los dos de entrada original elementos.

Gracias.

Answer 1

El specification dice que el primer paso para la presentación forma es:

paso: identificar los controles de éxito

"controles de éxito" se definen como:

A el control exitoso es "válido" para la presentación. Cada control exitoso tiene su nombre de control emparejado con su valor actual como parte del conjunto de datos del formulario enviado. Un control exitoso debe definirse dentro de un elemento FORM y debe tener un nombre de control.

Sin embargo:

...

• Si un formulario contiene más de un botón de enviar, sólo el botón activado presentar es exitosa.

Dado que ninguno de los botones se activan presentar, ninguno se envían. Los elementos de entrada ocultos, por otro lado, son válidos y solo se enviarán junto. Tenga en cuenta que agrega los elementos ocultos antes de llamando al mySubmit(), por lo que en el momento en que se ejecutan los pasos anteriores (es decir, durante el envío), el elemento oculto es solo otra parte de control exitosa del formulario y enviado.

Answer 2

puede usar

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