Validación formulario

[_cronos2]

Hola gente, estoy tratando de validar un formulario en JS, después ya pasará por el servidor. La cuestión es que tengo un select con varias opciones, si eliges por ejemplo 4 se crean 4 campos, y así sucesivamente. Pero si por ejemplo elijo 4, introduzco los datos, y después elijo 5, sólo se quedan los datos en el primer campo, y no en los demás. He hecho 1000 pruebas y no sé qué puede ser :S Por eso acudo a vosotros, aquí os dejo el código (es un poco espeso, lo siento ;)):

Código Javascript:

function ID(id){
  return document.getElementById(id);
 }
 var n=1, l=1;
 function addI(v){
   switch(v.value){
    case '+7':
     ID('btn').style.display = 'block';
     break;
    default:
     if(Int(v.value) > n){
      for(j=0; j<Int(v.value)-l; j++){
       ID('inicio').innerHTML+="<input type='text' name='coordx[]' id='cx"+n+"' size='10' class='input' /><br />";
       ID('final').innerHTML+="<input type='text' name='coordy[]' id='cy"+n+"' size='10' class='input' /><br />";
       n++;
      }
     }
     break;
  }
  l = ID('inicio').getElementsByTagName('input').length+1;
 }
 function addC(){
  ID('inicio').innerHTML += "<input type='text' name='coordx[]' id='cx"+n+"' size='10' class='input' /><br />";
  ID('final').innerHTML += "<input type='text' name='coordy[]' id='cy"+n+"' size='10' class='input' /><br />"
  n++;
 }
 

Código HTML:

<ul>
 <li> 
 <select id='colonias' name='colonias' onchange="addI(this);">
   <option value="0" selected="selected">0</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
   <option value="7">7</option>
   <option value="+7">+7</option>
 </select>
 <br /><br />
 </li>
 <li>
  <fieldset style='width:20%;' id='f'>
   <legend>Coordenadas:</legend>
   <br />
   <span class="texto">&nbsp;X:</span>
   <input type='text' id='cx0' name='coordx[]' size='15'/>
   <span id='inicio'></span>
   <br /><br /><br />
   <span class="texto">&nbsp;Y:</span>
   <input type='text' id='cy0' name='coordy[]' size='15' />
   <br />
   <span id='final'></span>
   <br />
  </fieldset>  
 <input type="button" value="Agregar campo" id='btn' onclick="addC();if(ID('inicio').getElementsByTagName('input').length>6) ID('colonias').disabled=true;" />
 </li>
</ul>
 

Gracias y saludos (:

[zerokilled]

eso es normal cuando utilizas innerHTML. con dicha propiedad el navegador vuelve analizar el codigo tal como aprece en el codigo fuente. los datos introducido no son parte del codigo. para evitar eso tienes que usar funciones del DOM para crear y agregar los elementos. yo tu le doy otro enfoque. en lugar de un utilizar un select para indicar la cantidad de campos, simplemente tendria un boton que agrega los campos y al lado de cada campo la opcion de eliminarlo.

[masterojitos]

Creo que en la funcion deberias primero recorrer los elementos que ya hayas creados y almacenar el valor de estos... para luegos asignarlos a los que vuelves a crear.

Espero te sirva la idea...

Suerte

[_cronos2]

Ok, ya probé usando appendChild, pero tenía que definir todas las propiedades del input. Por otro lado, lo del select lo hago porque después el formulario lo enviaré a mi correo con PHP, y entonces era para tener una visión a simple vista de cuantos campos había, pero no es imprescindible.
Saludos (:

[zerokilled]

para ese fin pudieras tener un campo hidden donde la funcion de agregar/eliminar campos escribe la cantidad de campos presentes.

[_cronos2]

Cierto, entonces lo haré como tú dices. Voy a ver cómo empezar porque lo del DOM no lo domino xD
Muchas gracias (:

[zerokilled]

revisa el tema capturar onclick distintos objetos, no va responder especificamente tu problema pero te debe servir de idea al menos para una de las partes que requieres.

[zerokilled]

Iniciado por _cronos2

Cierto, entonces lo haré como tú dices. Voy a ver cómo empezar porque lo del DOM no lo domino xD
Muchas gracias (:

pensandolo bien, seria mas conveniente que manejes ese aspecto desde el lado servidor, a no ser que no lo consideres algo tan importante. me refiero, el valor del campo hidden se puede modificar antes de ser enviado. es cuestion desde el servidor obtengas la longitud de uno de los arrays de coordenadas.

[_cronos2]

Vale, solucioné lo del select y lo hice como tú decías, pero ahora me surge un problema. Cuando hago click en el botón Agregar campo, se crean 2, uno para las coordenadas x y otro para las y. Pero si hago click en Eliminar campo, sólo se elimina el campo que está al lado del botón. Con el código creo que se verá mejor:

Código Javascript:

// Agregar campos
var n=1;
function ID(id){
 return document.getElementById(id);
}
function sAt(elemento, atributo, valor){
 elemento.setAttribute(atributo, valor);
}
function addI(e,f){
 var c=document.createElement(e),i=document.createElement(e),b=document.createElement(e),a=document.createElement(e),l=document.createElement(f),s=document.createElement(f);
 sAt(c,'type','text');
 sAt(i,'type','text');
 sAt(c,'name','coordx[]');
 sAt(i,'name','coordy[]');
 sAt(c,'id','cx'+n);
 sAt(i,'id','cy'+n);
 sAt(c,'size','10');
 sAt(i,'size','10');
 sAt(c,'class','input');
 sAt(i,'class','input');
 sAt(a,'type','button');
 sAt(b,'type','button'); 
 sAt(a,'onclick',"removeI(this,valor(this));");
 sAt(b,'onclick',"removeI(this,valor(this));");
 sAt(a,'value','Eliminar campo');
 sAt(b,'value','Eliminar campo');
 ID('inicio').appendChild(c);
 ID('inicio').appendChild(a);
 ID('inicio').appendChild(l);
 ID('final').appendChild(i);
 ID('final').appendChild(b);
 ID('final').appendChild(s);
 n++;
}
function removeI(c,id){
 c.parentNode.removeChild(c.previousSibling);
 c.parentNode.removeChild(c);
 c.parentNode.removeChild(c.nextSibling);
 ID(id).parentNode.removeChild(ID(id).previousSibling);
 ID(id).parentNode.removeChild(ID(id));
 ID(id).parentNode.removeChild(ID(id).nextSibling);
 n--;
}
function valor(c){
 var s=c.id.substring(1,2);
 var d='c'+(s=='x')?'y':'x'+n;
 return d;
}
 

Código HTML:

<fieldset style='width:20%;' id='f'>
 <legend>Coordenadas:</legend>
 <br />
 <span class="texto">&nbsp;X:</span>
 <input type='text' id='cx0' name='coordx[]' size='15'/>
 <span id='inicio'></span>
 <br /><br /><br />
 <span class="texto">&nbsp;Y:</span>
 <input type='text' id='cy0' name='coordy[]' size='15' />
 <br />
 <span id='final'></span>
 <br />
</fieldset>  
<input type="button" value="Agregar campo" id='btn' onclick="addI();" />
 

He probado usando una función (valor) que devoviera el id del campo, pero no me funciona. También me gustaría saber cómo hacer para que a la función sAt() no tuviera que pasarle el elemento como argumento, sino hacer elemento.sAt(atributo,valor).
Saludos (:

[zerokilled]

opino que te estas complicando mucho. esto es lo que yo haria. en el html, pondria cada par de campos dentro de listas <li> juntamente con el boton de eliminar. luego, cuando el documento termine de cargar, creas un clon de esa lista. en la funcion de agregar, creas un clon del clon. de esta forma no tienes que crear cada elemento y atributo, solo te ocupas de agregar ese segundo clon al listado. para la funcion de remover, es cuestion de subir por los elementos acestrales hasta el contenedor de las listas y eliminar la lista correspondiende. asi no tienes dos botones para cada campo el cual puede resultar en un numero de campos imparejos.

alguna de las funciones que necesitaras: cloneNode(), parentNode, removeChild(), appendChild().

También me gustaría saber cómo hacer para que a la función sAt() no tuviera que pasarle el elemento como argumento, sino hacer elemento.sAt(atributo,valor).

aunque ya te expuse una mejor solucion igual lo mencionare por si te sirve en un futuro. una forma, el cual no se cuan recomendable es porque creo que no funciona en todos los navegadores, consiste en implementar la funcion en los modulos que define el DOM. resulta que el DOM -reitero que puede no funcionar en algunos navegadores- crea una serie de objetos/funciones/wrapper del cual derivan algunas funciones y propiedades de elementos. por ejemplo, document.body representa un objeto HTMLBodyElement en lugar de un simple objeto javascript y el constructor de este objeto lleva el mismo nombre. entonces, desde ese constructor podemos definir funciones y propiedades en el objeto prototype.

Código:

HTMLBodyElement.prototype.toogle=function(){this.style.display=(this.style.display)?'':'none';}
document.body.toogle();

si tienes duda del constructor de un elemento, es cuestion de obtener la referencia del elemento en cuestion -o crearlo- y luego leer la propiedad constructor.

Código:

document.createElement('div').constructor;

otro factor a tener en cuenta es que hay otros constructores genericos, por ejemplo Node representa todo los nodos de un documento, sin importar del tipo. Element representa todos los elementos de un documento html o xml y hereda las caracterisitcas de Node. HTMLElement representa todo los elementos HTML y hereda de Element y a su vez de Node. el punto es que dependiendo del alcance que necesites, algunos constructores genericos serian mas conveniente.

otro modo de lograr esta caracteristica seria hacer lo mismo que hace jquery. la funcion $ devuelve un objeto que contiene funciones para operar con el elemento.

[caricatos]

Hola:

Para añadir campos dinámicamente, siempre clono alguno oculto, puedes ver el código de alguna de mis páginas: Caricaturas de grupos a color en acuarelas

Creo que es el concepto que tiene ZK

Saludos

[_cronos2]

Bueno creo que al final lo solucioné, posteo el código por si a alguien le pudiera servir y por si hay alguna crítica:

Código HTML:

<fieldset>
 <legend>Coordenadas:</legend>
 <br />
 <div id='l'>
  <span class="texto">&nbsp;X:</span>
  <input type='text' id='cx0' name='coordx[]' size='10' />
  <span class="texto">&nbsp;Y:</span>
  <input name="coordy[]" type="text" id="cy0" size="10" />
  <br />
 </div>
</fieldset>  
<input type="button" value="Agregar campo" id='btn' onclick="addI(ID('l'),'input','br');" />
 

Código Javascript:

var n=1;
function ID(id){
 return document.getElementById(id);
}
function sAt(elemento,atributo,valor){
 elemento.setAttribute(atributo,valor);
}
function addI(d,e,f){
 var c=document.createElement(e),i=document.createElement(e),b=document.createElement(e),s=document.createElement(f);
 sAt(c,'type','text');
 sAt(i,'type','text');
 sAt(c,'name','coordx[]');
 sAt(i,'name','coordy[]');
 sAt(c,'id','cx'+n);
 sAt(i,'id','cy'+n);
 sAt(c,'size','10');
 sAt(i,'size','10');
 sAt(c,'class','input');
 sAt(i,'class','inputy');
 sAt(b,'type','button');
 sAt(b,'onclick',"removeI(this);");
 sAt(b,'value','Eliminar campos');
 sAt(b,'class','button');
 d.appendChild(c);
 d.appendChild(i);
 d.appendChild(b);
 d.appendChild(s);
 n++;
}
function removeI(c){
 c.parentNode.removeChild(c.previousSibling.previousSibling);
 c.parentNode.removeChild(c.previousSibling);
 c.parentNode.removeChild(c.nextSibling);
 c.parentNode.removeChild(c);
}
 

Código CSS:

.texto {font:100% "Colonna MT"; color:#FFF;}
.input {margin:1.5% 4% 1.5%;}
.inputy {margin:1.5% 1.75% 1.5%;}
.button {margin:1.5% 1.4% 1.5%; margin-right:0;}
li {list-style-type:none;}
#l {position:relative; width:120%; height:100%;}
fieldset {width:32%; height:auto;}
 

No lo hice con cloneNode() porque no entendí muy bien lo de los hidden, y tampoco entendí lo del DOM de @zerokilled, si me lo pudiérais explicar (:

[zerokilled]

otro ejemplo utilizando cloneNode y el objeto event para determinar que el evento haya ocurrido en el elemento correcto.

Código:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>
<script type='text/javascript'>
self.onload = function(){
var list = document.getElementById("coords"), clone = list.firstChild.cloneNode(true);
document.getElementById('btn').onclick = function(){
list.appendChild(clone.cloneNode(true));
};

list.onclick = function(_evt){
var evt = _evt || event, elem = evt.target || evt.srcElement;
if(/input/i.test(elem.nodeName) && /button/i.test(elem.type))list.removeChild(elem.parentNode);
};
}; //onload;
</script>
<style type='text/css'>
fieldset{
width:24em;
}

li input[type="text"]{
width:6em;
margin-right:2em;
}
</style>
</head>

<body>
<fieldset><legend>Coordenadas:</legend>
<ol id="coords"><li>X: <input type='text' name='coordx[]' /> Y: <input name="coordy[]" type="text" /> <input type="button" value="x" /></li>
</ol></fieldset>  
<input type="button" value="Agregar campo" id='btn' />
</body></html>

critica del codigo... no le veo sentido a la funcion setA. practicamente estas haciendo lo mismo que invocar la funcion setAttribute. pero como te decia, con cloneNode no necesitas asignar los atributos que comparten el mismo valor como name.

@edit: en el ejemplo no aparece el campo hidden que te sugeri antes... pues como te comentaba, es mejor que obtengas la longitud del array desde lenguaje servidor, asi obtienes control de ese dato en lugar de indicarlo desde javascript y correr el riesgo de que introduzcan otra informacion antes de enviarse.

Código PHP:

  $registros = count($_REQUEST['coordx']); 
   

[_cronos2]

Ya pero si uso cloneNode(), ¿cómo valido? Podría hacer getElementsByTagName pero con id creo que es más sencillo. Y lo de sAt() es simplemente para no tener que escribir setAttribute 40 veces, aunque al final acabé copiando y pegando sAt xD Por otro lado, ahora que la parte del JS ya está, me imagino que tendré que ir al foro de PHP, pero me gustaría tener algo de información sobre cómo recoger los valores de coordx[] y coordy[].
Saludos (:

[zerokilled]

puedes usar document.getElementsByName -fijate que no dice ByTagName- indicando como parametro el nombre del campo. este te devuelve una coleccion y lo recorres con un bucle.

[Adler]

Hola

Por fin puedo meter baza. Para recoger los campos usa

$valores = array($_POST["nombrecampo"]); // Matriz con todos los valores de los campos con ese nombre

Pero antes puede probar esto otro. Intenta se una adaptación de ASP

$valores = array($_POST);
print_r($valores);

Suerte

[_cronos2]

Jajajaja, ya me extrañaba que no hubieras posteado
Me imagino que print_r() será como una especie de echo, ¿no? Pero entonces, ¿qué diferencia hay entre uno y otro?
Por cierto, tu firma mola ;)

[Adler]

Hola

print_r es para imprimir los valores de un array, con echo no se puede. De cualquier modo olvida eso último, lo he probado y marca error. Tendrás que hacerlo usando la primera manera. Ten en cuenta que se generará un array bidimensional, por lo tanto creo que no podrás usar la función array_merge() para unir los 3 arrays. Así que la manera mas sencilla sería darle el mismo nombre a todos los campos campos[]. Una vez recogidos todos los campos solamente hay que ordenarlos para que casen y sea sencilla la inserción en bd, es lo que finalmente vas a hacer. El ordenamiento lo haces creando 3 array y llenandolos con la función array_push().
Si no lo entiendes dimelo y intento montarte un ejemplo

Suerte

<offtopic>Es ya cansado ver una y otra vez que intentan enviar formularios con enlaces</offtopic>

[_cronos2]

No, el propósito del formulario es enviarlo como un e-mail. Además, no puedo unirlo todo en un array, porque uno son las coordenadas X (abscisas) e Y (ordenadas). Luego, lo de array_merge() y array_push() no lo entendí, si pudieras explicármelo o darme algún enlace donde lo explique, lo que menos te cueste.
Saludos (:

[Adler]

Hola

Mejor que eso, te he montado un ejemplo

Código HTML:

<html>
<head>
</head>
<body>
<form action="pagina.php" method="post">
<table border="1px">
<tr>
<td>Noticia</td>
<td>Mes</td>
<td>Fecha / Hora</td>
<td>Actualizada (Fecha /Hora)</td>
<tr></tr>
<td><textarea id="txtarea1" name="cam_form[]" tabindex="1"></textarea></td>
<td><input type="text" id="txt1" name="cam_form[]" value="" tabindex="2" /></td>
<td><input type="text" id="txt11" name="cam_form[]" value="" tabindex="3" /></td>
<td><input type="text" id="txt111" name="cam_form[]" value="" tabindex="4" /></td>
<tr></tr>
<td><textarea id="txtarea2" name="cam_form[]" tabindex="5"></textarea></td>
<td><input type="text" id="txt2" name="cam_form[]" value="" tabindex="6" /></td>
<td><input type="text" id="txt22" name="cam_form[]" value="" tabindex="7" /></td>
<td><input type="text" id="txt222" name="cam_form[]" value="" tabindex="8" /></td>
<tr></tr>
<td><textarea id="txtarea3" name="cam_form[]" tabindex="9"></textarea></td>
<td><input type="text" id="txt3" name="cam_form[]" value="" tabindex="10" /></td>
<td><input type="text" id="txt33" name="cam_form[]" value="" tabindex="11" /></td>
<td><input type="text" id="txt333" name="cam_form[]" value="" tabindex="12" /></td>
<tr></tr>
<td><textarea id="txtarea4" name="cam_form[]" tabindex="13"></textarea></td>
<td><input type="text" id="txt4" name="cam_form[]" value="" tabindex="14" /></td>
<td><input type="text" id="txt44" name="cam_form[]" value="" tabindex="15" /></td>
<td><input type="text" id="txt444" name="cam_form[]" value="" tabindex="16" /></td>
<tr></tr>
<td colspan="4">
<input type="submit"  value="Enviar" />
</td>
<tr>
</table>
</form>
</body>
</html>
 

pagina.php

Código PHP:

<?php
$valores = array($_POST["cam_form"]);
 
 
$Arr2 = array();
$Arr3 = array();
$Arr4 = array();
$Arr5 = array();
 
$j = 0;
for($i = 0; $i < sizeof($valores[0]); $i+=4) {
if ($valores[0][$i] != "") { 
array_push($Arr2, $valores[0][$i]);
$j += 1;
}
}
 
 
for($i = 1; $i < sizeof($valores[0]); $i+=4) {
if ($valores[0][$i] != "") { 
array_push($Arr3, $valores[0][$i]);
}
}
 
 
for($i = 2; $i < sizeof($valores[0]); $i+=4) {
if ($valores[0][$i] != "") { 
array_push($Arr4, $valores[0][$i]);
}
}
 
 
for($i = 3; $i < sizeof($valores[0]); $i+=4) {
if ($valores[0][$i] != "") { 
array_push($Arr5, $valores[0][$i]);
}
}
 
 
for($i = 0; $i < $j; $i++) {
echo $Arr2[$i].  ",";
echo $Arr3[$i].  ",";
echo $Arr4[$i].  ",";
echo $Arr2[$i].  "<br />";
}
?>
 

Fíjate que se muestran todos los valores ordenados

Suerte