Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » input text dinamicos y validación

JavaScript - input text dinamicos y validación

Volver
Nuevo Tema
<<>>
 
Vista:

input text dinamicos y validación

Publicado por Rainol (2 intervenciones) el 05/08/2014 18:58:18
Hola , primero que todo disculpen si este tema ya existe, lo busque pero no lo vi.
Tengo la siguiente duda ya de varios días :
Necesito crear varios input text dinámicamente dentro de un formulario que ya posee otros input text y validar si estos están vacíos o no, voy a adjuntar mi código para ver si alguien me puede ayudar, manejo php pero no conozco mucho de javascript.
El script trabaja bien, crea los input text nuevos, pero el problema lo tengo a la hora de realizar la validación. Solamente me valida la primera fila de input dinámicos, si creo otra nueva no la evalúa, ya me pasa a evaluar otro input de los no dinámicos.
Agradezco mucho su ayuda, no soy mucho de utilizar foros, los utilizo ya si no pude por otros medios.


Primero el formulario:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<?
echo "<h2>Nuevo Registro de Producto</h2>";
echo "<b><font color='orange'>Codigo Asignado Automaticamente</font>";
echo "<br><br>
<form method='post' action='index.php?page=procesar.php' enctype='multipart/form-data' name='form1' id='form1' onsubmit='return validarForm(this);'>

<input type='hidden' name='rango' id='Producto' value='Producto'>

<table>



<tr>

<td>

<p><label for='nombre'>Nombre: <font color='yellow'>*</font> </label>

</td>

<td>

<input type='text' name='nombre' id='nombre' style='WIDTH: 400px' onkeypress='return validar_nombre(event)'></p>

</td>

<tr>



<tr>

<td colspan='2'>";
 
?>
<script language="javascript" type="text/javascript"> /* Abrimos etiqueta de código Javascript */
/* Partimos por definir una variable llamada posicionCampo. Esta variable servirá como índices para marcar cuantos campos se han agregado dinámicamente. La inicializamos en 1, ya que la primera llamada ocurrirá cuando no hayan campos agregados */
var posicionCampo=1;
/* Declaramos la función agregarUsuario( ) */
function agregarEstilo()
{
 
	nuevaFila = document.getElementById("tablaEstilo").insertRow(-1);
 
	nuevaFila.id=posicionCampo;
 
		nuevaCelda=nuevaFila.insertCell(-1);
 
	nuevaCelda.innerHTML="<td> <input type='text' name='estilos["+posicionCampo+"]' id='estilos["+posicionCampo+"]'></td>";
	nuevaCelda=nuevaFila.insertCell(-1);
	nuevaCelda.innerHTML="<td> <input type='text' name='tallas["+posicionCampo+"]' id='tallas["+posicionCampo+"]'></td>";
	nuevaCelda=nuevaFila.insertCell(-1);
	nuevaCelda.innerHTML="<td> <input type='text' name='cantidades["+posicionCampo+"]' id='cantidades["+posicionCampo+"]'></td>";
	nuevaCelda=nuevaFila.insertCell(-1);
	nuevaCelda.innerHTML="<td> <input type='file' name='imagen["+posicionCampo+"]' id='imagen["+posicionCampo+"]'></td>";
 
	nuevaCelda=nuevaFila.insertCell(-1);
	nuevaCelda.innerHTML=" <td> <input type='button' value='Eliminar' onclick='eliminarEstilo(this)'> </td> ";
	/* Incrementamos el valor de posicionCampo para que empiece a contar de la fila siguiente */
	posicionCampo++;
 
	document.form1.total_estilos.value = posicionCampo;
}
/* Definimos la función eliminarEstilo, la cual se encargará de quitar la fila completa del formulario. No es necesario hacer modificaciones sobre este código */
function eliminarEstilo(obj)
{
	var oTr = obj;
	while(oTr.nodeName.toLowerCase()!='tr')
	{
		oTr=oTr.parentNode;
	}
	var root = oTr.parentNode;
	root.removeChild(oTr);
}
/* Cerramos el código Javascript */
</script>
 
<center>
<input type="button" onClick="agregarEstilo()" value="A&ntilde;adir Estilo" >
<br><br>
<table id="tablaEstilo" width="100%" border="0">
<tr align="center">
	<td width="20%" align="center">Estilo</td>
	<td width="20%" align="center">Tamaños</td>
	<td width="20%" align="center">Cantidades</td>
	<td width="20%" align="center">Imagen</td>
	<td width="20%" align="center">Eliminar</td>
</tr>
<tr align="center">
	<td><input type="text" name="estilos[]" id="estilos[]"></td>
	<td><input type="text" name="tallas[]" id="tallas[]"></td>
	<td><input type="text" name="cantidades[]" id="cantidades[]"></td>
	<td><input type="file" name="imagen[]" id="imagen[]"></td>
	<td><input type="button" value="Eliminar" onclick="eliminarEstilo(this)"></td>
</tr>
</table>
</center>
 
<?
echo "
</td>

</tr>



<tr>

<td align='center' colspan='2'>

<p><br><br><font color='yellow'>* Datos Obligatorios</font></p>	  

</td>

</tr>



<tr>

<td align='center' colspan='2'>";
?>
<input type="hidden" name="total_estilos" id="total_estilos" value="1">
<input type="button" value='Cancelar' onclick = "location='<?echo "index.php?page=avanzado.php";?>'">
<?
echo "
|  <input type='reset' value='Limpiar' class='button' /> | <input type='submit' name='button' id='button' value='Insertar' class='button'>

</td>

</tr>

	

</table>         



</form>

<br><br><br>";


Segundo el javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script>
 
function validarForm(form1)
{
	nombre = document.form1.nombre.value
	document.form1.nombre.value=nombre
 
	total_estilos = document.form1.total_estilos.value
	document.form1.total_estilos.value=total_estilos
 
	if (confirm('¿Está seguro que desea registrar este nuevo producto?'))
	{
		estilos = document.getElementsByName('estilos[]');
		tallas = document.getElementsByName('tallas[]');
		cantidades = document.getElementsByName('cantidades[]');
 
		/* Solo hace la primera fila */
		for (i=0; i<estilos.length; i++)
		{
			if (estilos[i].value == '')
			{
				alert("¡Existen estilos sin completar!");
				estilos[i].focus();
				return false;
			}
			else if (tallas[i].value == '')
			{
				alert("¡Existen tamaños sin completar!");
				tallas[i].focus();
				return false;
			}
			else if (cantidades[i].value == '')
			{
				alert("¡Existen cantidades sin completar!");
				cantidades[i].focus();
				return false;
			}
		}
 
		if (nombre == "")
		{
			alert("Debe ingresar un Nombre")
			document.form1.nombre.focus()
			return false;
		}
		else
		{
			//el formulario se envia

			return true;
		}
	}
	else
	{
		return false;
	}
}
</script>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

input text dinamicos y validación

Publicado por Rainol (2 intervenciones) el 05/08/2014 23:59:02
Ya solucione el problema!!!
Simplemente es quitar los paréntesis cuadrados del name en el formulario y del script que crea los input dinámicos y dejar todos los name iguales (o sea mismo nombre), el javascript de validación del formulario queda igual, con paréntesis cuadrados y la variable i. Así que solo era quitarlos del name y dejar todos los input dinámicos con el mismo nombre en el formulario, yo creí que debía utilizar una variable que incrementara el name como en el id pero NO.

Ahora sigue php pero ahí no tengo problemas, es javascript que me hace sufrir, voy a tener que llevarme unos cursitos Muchas Gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

input text dinamicos y validación

Publicado por xve (2100 intervenciones) el 06/08/2014 00:04:12
Gracias por comentarlo Rainol!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

input text dinamicos y validación

Publicado por abel (1 intervención) el 17/01/2015 07:21:01
hola cuando vi tu pregunta ya habías encontrado la solución

pero yo tengo un problema similar
resulta q yo ya tengo los inputs creados dinamicamente y los valido de otra forma sin ningún problema
el problema es q cuando hago post y hacer un print_r($_POST); solo me aparecen los inputs q no son dinámicos


a diferencia de tu caso yo si necesito asignarles diferentes name al crearlos dinamicamente porque si coloco el mismo name entonces no puedo recoger el valor diferente de cada uno de ellos sino un solo valor (ya q todos tienen el mismo name)

agradezco de ante mano cualquier sugerencia
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar