¿Incrustar un HTML <form> dentro de un <form> más grande?

Quiero tener un formulario HTML incrustado en otra forma de este modo:¿Incrustar un HTML <form> dentro de un <form> más grande?

<form id="form1"> 
    <input name="val1"/> 
    <form id="form2"> 
    <input name="val2"/> 
    <input type="button" name="Submit Form 2 ONLY"> 
    </form> 
<input type="button" name="Submit Form 1 data including form 2"> 
</form>

necesito presentar la totalidad de Form1, pero cuando envío formulario2 sólo quiero presentar los datos en formulario2 (no todo en form1.) ¿Funcionará esto?

Fuente

2009-11-18 MikeN

¿Por qué necesita esto? ¿Qué tiene de malo tener dos formas separadas? –

Si proporciona más detalles sobre lo que está intentando hacer, estoy seguro de que yo y otros con gusto le sugerimos soluciones alternativas. –

¿Duplicado de http://stackoverflow.com/q/555928/684229? – TMS

Lo que ha descrito no funcionará.

Una solución alternativa sería crear dos formularios que no estén anidados. Utilizaría entradas ocultas para su formulario principal original que duplica las entradas de su formulario anidado original. Luego use la manipulación Javascript/DOM para enlazar el evento submit en su formulario "principal", copiando los valores del formulario "anidado" en las entradas ocultas en el formulario "principal" antes de permitir que el formulario se envíe.

Su forma de estructura sería algo como esto (diseño ignorando HTML):

<form id="form1"> 
    <input name="val1"/> 
    <input name="val2" type="hidden" /> 
    <input type="button" name="Submit Form 1 data including form 2" 
     onsubmit="return copyFromForm2Function()"> 
</form> 
<form id="form2"> 
    <input name="val2"/> 
    <input type="button" name="Submit Form 2 ONLY"> 
</form>

Fuente

2009-11-18 20:57:30 Randolpho

No puede haber formularios anidados (source) por lo que esto no funcionará.

Cada formulario debe incluirse dentro de un elemento FORM. Puede haber varias formas en un solo documento, pero el elemento FORM no pueden anidarse

Fuente

2009-11-18 20:53:58

No es válido y en mi experiencia producir resultados arbitrarios.

Puede solucionar esto usando las funciones DOM de Javascript, sacando form2 de form1, poniéndolo en el cuerpo, enviándolo y volviendo a ponerlo en form1.

Editar: Esto tampoco será 100% correcto, ya que todavía tiene formularios anidados. Como algunas de las respuestas señalan, debes tener dos formularios separados. Todavía puede hacer esto usando la magia DOM pero con algunos giros más -. Vea la respuesta de Randolpho.

Fuente

2009-11-18 20:54:46

Creo que puede haber problemas con la interfaz de usuario para esto. Sería muy confuso para un usuario si solo se enviara/guardara una parte de (lo que parece ser) un solo formulario.

En lugar de formularios de anidamiento, que, como se dijo, no son válidos, creo que debe tener en cuenta quizás la implementación de algunas llamadas AJAX para actualizar el subconjunto de datos.

Fuente

2009-11-18 20:56:40

Una posible solución: En lugar de tener la forma anidada, agregar un evento de clic al botón formulario2 que llamar a un método de JS que podría obtener sus elementos específicos (entrada val2 en este caso) desde form1 y utilizando AJAX o simplemente xmlHTTPRequests() para realizar los métodos POST deseados.

Fuente

2009-11-18 20:59:25 Freddy

Como han dicho otras personas, no puede anidar elementos de formulario. La forma en que manejaría algo como esto sería usar una sola forma y luego agrupar los elementos con conjuntos de campo. A continuación, puede agregar eventos a los botones de envío con javascript y habilitar/deshabilitar los campos de entrada que se deben enviar.

Con jQuery, MooTools o cualquier otro marco esto sería muy simple. Sin embargo, se romperá si el cliente deshabilita los scripts.

Una solución MooTools podría tener este aspecto:

$('submit2').addEvent('click', function (e) { 
    e.stop(); 
    $$('#fieldset1 input').set('disabled', 'disabled'); 
    $('form').submit(); 
    $$('#fieldset2 input').set('disabled', ''); 
}

Ah, y confiar en que tenga una buena razón para hacer esto, porque a mí me suena sospechosamente como mala usabilidad :-)

Fuente

2010-05-05 14:25:42 AHM

-2

Aquí es la respuesta definitiva de trabajo. No necesité crear un DIV padre adicional y ponerle el nombre id = "place_here". Nombrar una celda de tabla id = "place_here" y convertirla en la principal para DIV id = "div_2" fue suficiente. Este es un pequeño y brillante trabajo. Alguien en otro hilo me ayudó con esto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head> 
<title>test/crtp</title> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    position_mdiv()(); 
    $(window).resize(function() { 
     position_mdiv(); 
    }); 
}) 

function position_mdiv(){ 

    var pos = $('#place_here').position(); 
    var width = $('#place_here').outerWidth(); 

    $('#div_2').css({ 
    position: "absolute", 
    top: pos.top +2 + "px", 
    left: (pos.left -300 + width) + "px" 
}); 

} 

</script> 
<body> 

<form id="CTRP_Form"> 
<table border="1"> 
<tr> 
<td> 
<div id="div_1"><input id="fnam" name="fnam" form="CTRP_Form" type="text"><input type=submit></div> 
</td> 
<td id="place_here" style="background:yellow;width:300px;padding:0px;border:solid 2px #CCC"></td> 
</tr> 
</table> 
</form> 


<div id="div_2"><form id="query_Form"><input id="MyQuery" name="MyQuery" form="query_Form" type="text"><input type=submit></form></div> 

</body> 
</html>

Fuente

2013-03-10 17:15:52 JTJohnston

Lo resolví al tener varios botones de envío en el formulario. Los botones hacen referencia a diferentes CGI y trajeron los campos adicionales que necesitaba para manejar el procesamiento condicional en los CGI.

Fragmento de código

<form name="ep" method="put" action="/cgi-bin/edit_plan.pl"> 
    [...] 
    <tr> 
     <td><input type="text" size="20" value="red" name="RN0"></td> 
     <td><input type="text" size="3" value="2" name="RT0"></td> 
     <td><input type="submit" value="Set row 0" name="RUN0"></td> 
    </tr> 
    [...] Add as many rows as needed, increment the 0 in all places Add an ending submit for overall processing instead of row processing: <input type="submit" value="Set ALL" name="SET"> 
</form>

Fuente

2018-01-28 16:54:39

¿Tienes un fragmento que puedes compartir con el OP? – Daniel

El script perl edit_plan.pl que es el destino analiza el nombre del envío para controlar cómo se procesa el put: –

–

¿Incrustar un HTML <form> dentro de un <form> más grande?

Respuesta

Cuestiones relacionadas