form dentro un form

[sergi_climent]

Hola,
desde q estoy usando Ajax ahora me encontrado con un pequeño problema o una pequeña duda.
A ver, por temas de diseño me ha quedado un form dentro un form,
Es decir, al diseñar un pantalla de entrada de averias, tengo una parte donde se tienen q introducir los usuarios q han participado en esa averia, lo q he echo es meter esa informacion en un div para no tener q refrescar la pagina si insertan los usuarios, el problema es q si quiero meter un nuevo usuario necesito un formulario pasa insertarlo, y ese formulario queda dentro del otro de la pagina principal, y al darle al submit me coje el primer form y no el q yo quisiera... como puedo solucionar esto?
la opcion facil seria rediseñar la pantalla... pero... a ver si me podeis ofrecer alguna solcuion.
para haceros una idea os posteare un cacho del codigo a ver q puedo hacer...

Código HTML:

<form id="miform" name="miform" action="averia/act_ins.php" method="POST" onSubmit="enviaaveria(this.form);return false">
. 
. 
.
<td>		
<table width="100%" class="cuadre">
<tr><td class="titolverd" align="center">Empresa / Operario</td></tr>
<tr><td>
<div id="divoperari">
<table>
<tr><td>&nbsp;</td></tr>
<tr><td align="center"><a href="#averia/nou_operari.php?id_averia=<?=$numaveria; ?>" onClick="myajax.Link(this.href, 'divoperari')">Insertar Operario</a></td>
</tr>
</table>
</div>
</td>					
</tr>
</table>
</td>
.
.
.
<td>
<input type="Button" value="Ref. Averia" onClick="referenciaaveria();">
<input type="Submit" name="grabar" value="Grabar">
</td>
.
.
.
</form> 

en el div ese es donde se carga la nueva pagina para insertar usuarios o bien para mostrar los q ya hay insertados...

a ver si me podeis echar una mano... o alguna idea...

saludos y gracias

[ikhuerta]

Lo que deberías hacer es rediseñar la página :P

Otra forma sería cargar los nuevos contenidos como inputs de formulario pero sin etiquetas de formulario. Luego en vez de hacer un submit podrías ir cogiendo sus valores por id:

valor1=document.getElementById("input1").value;
...

y concatenar para hacer el envio como get envez de como post.

URL=URL+"?input1="+valor1+"&input2="+valor2+...

se me ha entendido???

[sergi_climent]

hola! antetodo gracias por la respuesta...
en cuanto a rediseñar la pagina... la cosa esta xunga xo bueno si no hay mas solucion.
y en cuanto a pasarlo por get, me parece q es la unica opcion viable q me keda... xq no hay mas opciones no?

PD: lo q quiero yo se ha entendido no? una especie de subform para ir añadiendo usuarios a esa averia sin tener q refrescar la pagina!


saludos y gracias

[ikhuerta]

Ahhh pense que eran dos envíos distintos.

Entonce no envíes por get sino ves modificando el action del form...

cuando se envie el subformulario llama tb a una funcion javascript pero que haga algo com oesto:

form.action+="&usuarioX="+nuevo usuario...

Entiendes por donde voy?

[sergi_climent]

si q te entiendo pero no se si vamos por el mismo camino.
la pagina quedaria de la siguiente manera:

Código HTML:

<form id="miform" name="miform" action="averia/act_ins.php" method="POST" onSubmit="enviaaveria(this.form);return false">
. 
. 
.
<td>		
<table width="100%" class="cuadre">
<tr><td class="titolverd" align="center">Empresa / Operario</td></tr>
<tr><td>
<div id="divoperari">
<table>
<tr><td>&nbsp;</td></tr>
<tr><td align="center"><a href="#averia/nou_operari.php?id_averia=<?=$numaveria; ?>" onClick="myajax.Link(this.href, 'divoperari')">Insertar Operario</a></td>
</tr>
</table>
</div>
</td>					
</tr>
</table>
</td>
.
.
.
<td>
<input type="Button" value="Ref. Averia" onClick="referenciaaveria();">
<input type="Submit" name="grabar" value="Grabar">
</td>
.
.
.
</form> 

en esta zona del texto cargo el formulario, lo hago refrescando solo ese div.
asi puedo ir insertando operarios sin tener q refrescar a pagina de averias.

Código HTML:

<div id="divoperari">
<table>
<tr><td>&nbsp;</td></tr>
<tr><td align="center"><a href="#averia/nou_operari.php?id_averia=<?=$numaveria; ?>" onClick="myajax.Link(this.href, 'divoperari')">Insertar Operario</a></td>
</tr>
</table>
</div> 

aqui os pongo el formulario:

Código HTML:

<form id="foperaris" name="foperaris" action="averia/operaris_averia.php" method="POST" onSubmit="operarisaveria(this.form);return false">
<table>
<tr>
	<td>
	<select id="empresa" name="empresa" class="combo" onChange=" myajax.Link('averia/consultes.php?id=operari&id_empresa=' + this.value, 'idoperari')">
	<option value="0">Escoje un empresa...</option>
	<?
	//Select per Tipus de Maquina
	$busqueda="SELECT id_empresa,empresa FROM empreses ORDER BY empresa";
	$sql = mysql_query($busqueda) or die(mysql_error());
	// imprimir la select
	while($reg=mysql_fetch_row($sql))
	{
		// Pasem a HTML accents y ñ per la seva correcta visualitzacio
		$reg[1]=htmlentities($reg[1]);
		// Imprimir les opcions del select				
		echo "<option value='".$reg[0]."'>".$reg[1]."</option>";
	}
	?>
	</select>
	</td>
	<td>
	<div id="idoperari">
	<select id="operari" name="operari" class="combo">
	</select>
	</div>
	</td>
	<td><input id="hores" name="hores" value="0" size="5"></td>
</tr>
<tr><td colspan="3">&nbsp;</td></tr>
<tr>
<td colspan="3" align="center">
<input type="Submit" name="grabar" value="Grabar">
</td>
</tr>
</table>
</form> 

y lo q quiero esta claro no? en una misma averia pueden intervenir varios usuarios, entonces la intencion es hacer como una especie de subform para ir insertando los operarios desa averia y q se vayan viendo conforme los vayamos añadiendo sin tener q refrescar.

me explico mejor???

saludos y muchas gracias

[alblan]

Hola Sergi,

podrías separar los forms y colocar el de usuarios mediante css con el position: absolute y darle unas coordenadas fijas.

No lo he probado así que no sé si funciona esta opción.

Albert Lanchas
http://www.albertlanchas.com

[sergi_climent]

esa otra opcion mas... tendre q probarlo y te cuento! a ver q tal sale... aunke eso de posicionar siempre queda = o segun la pantalla del usuario/resolucion se desplaza y no keda bien?

[ikhuerta]

1) La verdad es que no entiendo muy bien el funcionamiento de tus formularios...

parece que uno de los dos no contenga nada y el que cargas con javascript lo contenga todo...

Lo siento pero me lio... que hace exactamente la función javascript que llama a ajax???


2) En cuanto a posicionamiento absoluto te explico un pequeño truco.

Cuando tu posicionas en absoluto con "position:absolute; top:10px; left:10px"
toma las medidas de referencia desde la página con lo que afectará la resolucion del navegador.

Sin embargo puedes hacer que no tome las de la página sino las de su propio contenedor indicandole a este que esté posicionado aunque sea de forma relativa. "position:relative"

te lo explico mejor con un ejemplo....




<div id="contenedor">
<div id="el_absoluto">HOLA!!!</div>
</div>

Si el css es este las medidas las tomará desde el contenedor y no desde la pagina.

css:

#contenedor{position:relative;}
#el_absoluto{position:absolute; top:100px; left:0px;}

también comentarte que nadie te obliga a que realmente el_absoluto quede dentro del contenedor... es decir, lo tomará como referencia para saber donde estan top:0px y left:0px pero tu puedes poner:

top:-200px
left:0px;

si quieres que el absoluto quede 200px por encima de su contenedor.


También recordarte que ademas de top y left puedes usar bottom y right

[sergi_climent]

Iniciado por ikhuerta

1) La verdad es que no entiendo muy bien el funcionamiento de tus formularios...

parece que uno de los dos no contenga nada y el que cargas con javascript lo contenga todo...

Lo siento pero me lio... que hace exactamente la función javascript que llama a ajax???

aqui te dejo el codigo para q veas q el form general contien un monton de cosas.

Código HTML:

<form id="miform" name="miform" action="averia/act_ins.php" method="POST" onSubmit="enviaaveria(this.form);return false">
<input align="left" size="20" type="hidden" name="id_averia" value="<?=$numaveria; ?>">
<table width="90%" align="center">
<tr><td class="titolverd" align="center" colspan="2">NUEVA AVERIA</td></tr>
<tr>
<td width="50%" valign="top">
<table width="82%" align="center" cellspacing="2" cellpadding="0" border="0" class="cuadre" >
<tr>
<td>
	<table width="100%" class="liniasota" border="0">
		<tr>
		<td class="lletra" align="right">Ref. Averia&nbsp;</td>
		<td align="left">&nbsp;<input align="left" size="20" type="text"name="ref_averia" value=""></td>
		<td class="lletra" align="right">Fecha Aviso&nbsp;</td>
		<td align="left">&nbsp;<input name="data_avis" size="10" value="">
<img align="absmiddle" src="img/calendari.gif" onClick="displayDatePicker('data_avis');" width="34" height="22" border="0" alt="">
</td><td class="lletra" align="right">Localidad&nbsp;</td>
		<td align="left">&nbsp;
		<select id="id_localitat" name="id_localitat" class="combo" onChange=" myajax.Link('averia/consultes.php?id=seccio&idlocalitat=' + this.value, 'seccio')">
		<option value="0">Selecciona Localidad...</option>
		<?
		//Select per Tipus de Maquina
		$busqueda="SELECT id_localitat,localitat FROM localitats 
				   ORDER BY id_localitat";
		$sql = mysql_query($busqueda) or die(mysql_error());
		// imprimir la select
		while($reg=mysql_fetch_row($sql))
		{
			// Pasem a HTML accents y ñ per la seva correcta visualitzacio
			$reg[1]=htmlentities($reg[1]);
			// Imprimir les opcions del select				
			echo "<option value='".$reg[0]."'>".$reg[1]."</option>";
		}
		?>			
		</select>
		</td>
		</tr>
	</table>
</td>
</tr>
<tr>
<td>
	<table width="100%" class="liniasota">
	<tr>	
	<td width="10%" class="lletra">Maquina</td>
	<td align="left">
	<div id="maquina">
	<select id="id_maquina" name="id_maquina" class="combollarg" onFocus="myajax.Link('averia/consultes.php?id=id_maquina', 'maquina')">
		<option id="valor_defecto" value="0">Selecciona Maquina...</option>
	</select>
	</div>

	</td>
	<td width="10%" class="lletra">&nbsp;Seccion</td>
	<td align="left">
	<div id="seccio">
	<select id="id_seccio" name="id_seccio" class="combo">
		<option id="valor_defecto" value="0">Selecciona Seccion...</option>
	</select>
	</div>
	</td>
	</tr>
	</table>
</td>
</tr>
<tr>		
<td>
	<table width="100%">
		<tr>
			<td class="lletra">&nbsp;Descripcion</td>
			<td class="lletra">&nbsp;Material</td>
			<td class="lletra">&nbsp;Observaciones</td>			
		</tr>
		<tr>
			<td><textarea id="descripcio" name="descripcio" rows="2" cols="27"></textarea></td>
			<td><textarea id="material" name="material" rows="2" cols="27"></textarea></td>
			<td><textarea id="observacions" name="observacions" rows="2" cols="27"></textarea></td>			
		</tr>
	</table>
</td>					
</tr>
<tr>
<td>
<table>
	<tr>
	<td valign="top">
		<table>
		<tr>
		<td>
		<table width="100%" class="cuadre">		
			<tr>
				<td  class="lletra">&nbsp;I.Reparacion</td>
				<td width="30%" align="left"><input name="inici_reparacio" size="10"></td>
				<td><img align="absmiddle" src="img/calendari.gif" onClick="displayDatePicker('inici_reparacio');" width="34" height="22" border="0" alt="">
</td>	
			</tr>
			<tr>				
				<td class="lletra">&nbsp;F.Reparacion</td>
				<td align="left"><input name="final_reparacio" value="" size="10"></td>
				<td><img align="absmiddle" src="img/calendari.gif" onClick="displayDatePicker('final_reparacio');" width="34" height="22" border="0" alt="">
</td>					
			</tr>
			<tr>
				<td width="50%" class="lletra">&nbsp;Dies Parada</td>
				<td align="left"><input align="left" type="text" name="dies_parada" size="10"></td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td width="50%" class="lletra">&nbsp;H.Parada</td>
				<td align="left"><input align="left" type="text" name="hores_parada" size="10"></td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td width="50%" class="lletra">&nbsp;H.Reparacio</td>
				<td align="left"><input align="left" type="text" name="hores_reparacio" size="10"></td>	
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td width="59%" class="lletra">&nbsp;Preu</td>
				<td align="left"><input align="left" type="text" name="preu" size="10"></td>
				<td>&nbsp;</td>
			</tr>
		</table>
		</td>
		</tr>
		<tr>
		<td>
			<table width="100%" class="cuadre">
			<tr><td class="titolverd" align="center">Prioridad</td></tr>
			<tr>
			<td align="center">
				<table align="center">
				<tr><td><input type="Radio" name="prioritat" value="1"> Alta</td></tr>
				<tr><td><input type="Radio" name="prioritat" value="2"> Media</td></tr>
				<tr><td><input type="Radio" name="prioritat" value="3"> Conocida</td></tr>
				</table>
			</td>
			</tr>
			</table>
		</td>
		</tr>
		</table>
	</td>
	<td valign="top">
		<table>
		<tr>
		<td>
			<table class="cuadre">
			<tr><td class="titolverd" align="center" colspan="8">Enviado a Reparar</td></tr>
			<tr><td colspan="8">&nbsp;</td></tr>
			<tr>
				<td class="lletra">&nbsp;Enviado a Reparar</td>
				<td><input type="checkbox" name="enviat_reparar" value="1"></td>
				<td class="lletra">&nbsp;F.Envio</td>
				<td><input name="data_envio" value="" size="10"></td>
				<td><img align="absmiddle" src="img/calendari.gif" onClick="displayDatePicker('data_envio');" width="34" height="22" border="0" alt="">
</td>
				<td class="lletra">&nbsp;F.Retorno</td>
				<td><input name="data_retorn" value="" size="10"></td>
				<td><img align="absmiddle" src="img/calendari.gif" onClick="displayDatePicker('data_retorn');" width="34" height="22" border="0" alt="">
</td>
			</tr>
			<tr>
			<td colspan="6">
				<table>
				<tr>
				<td class="lletra">&nbsp;Empresa</td>
				<td><select name="id_empresa_envio" class="combo"></select></td>	
				<td class="lletra">&nbsp;Precio</td>
				<td><input type="text" name="preuenvio"></td>
				</tr>
				</table>
			</td>
			</tr>
			</table>
		</td>
		</tr>
		<tr>
		<td>		
			<table width="100%" class="cuadre">
			<tr><td class="titolverd" align="center">Empresa / Operario</td></tr>
			<tr><td>
			<div id="divoperari">
				<table>
				<tr><td>&nbsp;</td></tr>
				<tr><td align="center"><a href="#averia/nou_operari.php?id_averia=<?=$numaveria; ?>" onClick="myajax.Link(this.href, 'divoperari')">Insertar Operario</a></td>
				</tr>
				</table>
			</div>
			</td>					
			</tr>
			</table>
		</td>
		</tr>
		</table>
	</td>
	</tr>
	</table>
</td>
</tr>
<tr>
<td>
<table align="center">
<tr>
	<td>
		<input type="Button" value="Ref. Averia" onClick="referenciaaveria();">
		<input type="Submit" name="grabar" value="Grabar">
	</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form> 

onClick="myajax.Link(this.href, 'divoperari')" --> esta funcion llama a la pagina y la carga en el div correspondiente... y mis funciones javascript... basicamente son para validar campos q no esten vacios.

no se como explicarme mejor... lo q quiero es un formulario d entrada de averias donde pueda insertar a mas de un operario por averia.
los nombres d los operarios ya se han entrado a la base de datos, cuando se entran las empresas a las q pertenecen, entonces se selecciona la empresa se selecciona el operario de la base de datos y luego se introducen las horas de trabajo... esto de momento se guarda a un tabla temporal hasta q me valide la pagina de averia entera. un vez validada la pagina entera (es decir el form grande q cubre toda la pagina) copiare lo q haya a la tabla temporal a la buena y asi sabre q operarios han trabajado en esa averia... pero claro al poner un subform para introducir operarios pues me pasa eso q me keda un form enorme con un mini form dentro.

no ser como explicarme mejor... queda clara la idea?

pd: si copias el codigo veras el diseño de la pagina y veras donde se tiene q introducir los trabajdores y kizas asi os hagais un idea d lo q quiero...

muchas gracias por vuestras respuestas y a ver si me kito este dencima.

Saludos y gracias

[ikhuerta]

ok... creo que por fin (despues de visitar este ultimo post tuyo como 5 veces) entendi porque estas usando dos forms...

Pues la solución va a ser lo que te comentaba antes. Pasar del form y trabajar solo por ID.


El formulario cargado con ajax:
- Elimina la etiqueta form y sustituye el submit por un boton que llame a una funcion js.
- Quita todos los names a los inputs y selects (asi te aseguras que no se mezclan con el form original). Luego tendrás que emular todo el proceso de formulario con una funcion javascript.

Funcion javascrip

Código:

proceso_subformulario()
{
empresa=document.getElementById("empresa").value;
operari=document.getElementById("operari).value;
hores=documennt.getElementById("hores).value;

// Me salto las comprobaciones de si ha sido rellenados los campos o no, vale?

//ahora creamos la capa oculta que guardará los contenidos (solo si no existia ya)... 
if (!(document.getElementById('mi_capa_oculta')))
{
Temp=document.createElement("div");
document.body.appendChild(Temp);
Temp.style.display=none;
Temp.id='mi_capa_oculta';
}else
Temp=document.getElementById('mi_capa_oculta');

Temp.innerHTML=empresa + "///" + operari + "///" + hores;

/// Para terminar nos cargamos el subformulario y lo dejamos como estaba antes:

document.getElementById("divoperari").innerHTML="<table>				<tr><td>&nbsp;</td></tr><tr><td align='center'><a href=\"#averia/nou_operari.php?id_averia=<?=$numaveria; ?>\" onClick=\"myajax.Link(this.href, 'divoperari')\">Insertar Operario</a></td></tr></table>";

}

Luego para rescatar ese contenido al final solo tendrás que hacer:

Código:

R=document.getElementById("mi_capa_oculta").innerHTML;
R=R.split("///");
empresa=R[0];
operari=R[1];
hores=R[2];

si lo que te preocupa es guardar varios siempre puedes separar ademas de con "///" con "/////" para emular las filas de la tabla... luego dos splits para volver a ordenar...