Tengo un inconveniente, necesito generar dinamicamente varios campos y poder manejarlos, pero no ecuentro la solucion.
Paso a explicar el problema.
Tengo 4 formularios, por dar un ejemplo.
form1.php
form2.php
form3.php
form4.php
Lo que tengo que hacer es ir recolectando informacion y en base a esa informacion generar el furmulario siguiente. Por ej, en el primero tengo que ingresar la cantidad de modulos. En el segundo elijo que tipo de modulos es, puede ser texto o lista.
Si es texto lo tengo solucionado, pero si es lista en el formulario numero 3 tengo que generar con javascript campos dinamicamente para agregar items a la lista. En el paso 4 grabo todo.
El codigo seria el siguiente, posteo a partir del form3 que creo que con eso basta.
Código:
<div id="colRight">
<h2>2.1. Nuevo Newsletter</h2>
<div id="modulo">
<h3>Paso 3 . Crear contenidos</h3>
<form action="news_step4.php" method="post" onreset="redireccionar();">
<?php
for($i = 1; $i <= $_SESSION['modulos']; $i++) {
if($_SESSION["modulo$i"] == "Lista") {
?>
<table>
<tr>
<th><label for="modulo<? echo $i?>">Módulo <?php echo $i?></label></th>
<td>Tipo: <?php echo $_SESSION["modulo$i"]?></td>
</tr>
<tr>
<th><label for="titModulo<? echo $i?>">Título Modulo</label></th>
<td><input class="small" type="text" name="titModulo<? echo $i?>" id="titModulo<? echo $i?>" value="<?echo v("titModulo$i")?>"></td>
</tr>
<table >
<tbody id ="mitabla<?php echo $i?>">
<tr>
<td colspan="2"><h4>Item</h4></td>
</tr>
<tr>
<th><label for="titLista<? echo $n?>">Título lista</label></th>
<td><input class="small" type="text" name="titLista<? echo $i?>" id="titLista<? echo $i?>" value="<?echo v("titLista$i")?>"></td>
</tr>
<tr>
<th><label for="detalle<? echo $n?>">Detalle</label></th>
<td><input class="small" type="text" name="detalle<? echo $i?>" id="detalle<? echo $i?>" value="<?echo v("detalle$i")?>"></td>
</tr>
<tr>
<th><label for="importe<? echo $n?>">
<input class="none" type="checkbox" name="si<? echo $i?>" id="si<? echo $i?>" />
Incluir importe</label></th>
<td><input class="small" name="importe<? echo $i?>" type="text" id="importe<? echo $i?>" value="<?echo v("importe$i")?>" size="4" maxlength="10"></td>
</tr>
</tbody>
</table>
</table>
<p><a href="javascript:agregarItem('mitabla<?php echo $i?>',<?php echo $i?>);">[+] Agregar nuevo item</a></p>
<?php
} else {
?>
<table>
<tr>
<th><label for="<?php echo $_POST["modulo$i"]?>">Módulo <?php echo $i?></label></th>
<td>Tipo: Texto</td>
</tr>
<tr>
<th><label for="titModulo<? echo $i?>">Título Modulo</label></th>
<td><input class="small" type="text" name="titModulo<? echo $i?>" id="titModulo<? echo $i?>" value="<?=v("titModulo$i")?>"></td>
</tr>
<tr>
<th><label for="contenido<? echo $i?>">Contenido</label></th>
<td><textarea name="contenido<? echo $i?>" id="contenido<? echo $i?>"></textarea></td>
</tr>
</table>
<?php
}
}
?>
<input class="button" type="submit" name="submit" value="Siguiente"><input class="button" type="reset" name="reset" value="Cancelar">
</form>
</div>
</div>
JS que genera los campos dinamicos.
Código:
function agregarItem(tbody, m) {
var navegador = navigator.appName;
var tabla = document.getElementById(tbody);
var tr = document.createElement("tr");
var td = document.createElement("td");
var h4 = document.createElement("h4");
var txt = document.createTextNode("Item");
td.setAttribute('colspan','2');
h4.appendChild(txt);
td.appendChild(h4);
tr.appendChild(td);
tabla.appendChild(tr);
var tr2 = document.createElement("tr");
var th2 = document.createElement("th");
var td2 = document.createElement("td");
var label = document.createElement("label");
var txt2 = document.createTextNode("Titulo Lista");
var input_titulo = document.createElement("input");
input_titulo.setAttribute('type','text');
input_titulo.setAttribute('name','titLista'+ m + '[' + m + ']');
if(navegador == "Netscape") {
input_titulo.setAttribute('class','small');
} else {
input_titulo.setAttribute('className','small');
}
td2.appendChild(input_titulo);
label.appendChild(txt2);
th2.appendChild(label);
tr2.appendChild(th2);
tr2.appendChild(td2);
tabla.appendChild(tr2);
var tr3 = document.createElement("tr");
var th3 = document.createElement("th");
var td3 = document.createElement("td");
var label3 = document.createElement("label");
var txt3 = document.createTextNode("Detalle");
var input_titulo3 = document.createElement("input");
input_titulo3.setAttribute('type','text');
input_titulo3.setAttribute('name','detalle' + m + '[' + m + ']');
if(navegador == "Netscape") {
input_titulo3.setAttribute('class','small');
} else {
input_titulo3.setAttribute('className','small');
}
td3.appendChild(input_titulo3);
label3.appendChild(txt3);
th3.appendChild(label3);
tr3.appendChild(th3);
tr3.appendChild(td3);
tabla.appendChild(tr3);
var tr4 = document.createElement("tr");
var th4 = document.createElement("th");
var td4 = document.createElement("td");
var label4 = document.createElement("label");
var txt4 = document.createTextNode(" Incluir importe");
var input_titulo4 = document.createElement("input");
var check4 = document.createElement("input");
input_titulo4.setAttribute('type','text');
input_titulo4.setAttribute('name','importe' + m + '[' + m + ']');
if(navegador == "Netscape") {
input_titulo4.setAttribute('class','small');
} else {
input_titulo4.setAttribute('className','small');
}
check4.setAttribute('type','checkbox');
check4.setAttribute('name','si' + m + '[' + m + ']');
if(navegador == "Netscape") {
check4.setAttribute('class','none');
} else {
check4.setAttribute('className','none');
}
td4.appendChild(input_titulo4);
label4.appendChild(txt4);
th4.appendChild(check4);
th4.appendChild(label4);
tr4.appendChild(th4);
tr4.appendChild(td4);
tabla.appendChild(tr4);
}
El problema que tengo es que no se me ocurre una idea de como generar el nombre de los campos. Ya que los tendria que identificar, como por ej. modulo 1 campo 1, modulo 1 campo 2, modulo 2, campo 1, se entiende?