Foros del Web » Programando para Internet » Javascript »

Agregar limite de filas a formulario dinamico

 Estas en el tema de Agregar limite de filas a formulario dinamico en el foro de Javascript en Foros del Web. Hola a todos de nuevo, ya casi termino mi formulario dinamico con javascript, pero recientemente surgio otro inconveniente. Quisiera agregar un limite de filas a ...
  #1 (permalink)  
Antiguo 03/09/2012, 22:46
 
Fecha de Ingreso: agosto-2012
Ubicación: Aragua
Mensajes: 25
Antigüedad: 11 años, 7 meses
Puntos: 0
Pregunta Agregar limite de filas a formulario dinamico
Hola a todos de nuevo, ya casi termino mi formulario dinamico con javascript, pero recientemente surgio otro inconveniente.

Quisiera agregar un limite de filas a mi formulario, es decir, que el usuario no pueda agregar mas de 12 filas.

El codigo es el siguiente:
Código HTML:
<html><head>
<title>Agregar fila de campos DINAMICOS</title>

<script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script type="text/javascript">


function adicionarFila(){
var cont = document.getElementById("cont");
var filas = document.getElementById("filas");
cont.setAttribute("value", parseInt(cont.value,0)+1);
var tabla = document.getElementById("contenido").tBodies[0];
var fila = document.createElement("TR");
fila.setAttribute("align","left");


var celda1 = document.createElement("TD");
var sel = document.createElement("SELECT");
sel.setAttribute("size","1");
sel.setAttribute("name","sel" + cont.value);
opcioncur = document.createElement("OPTION");
opcioncur.innerHTML = 'Zapatos';
opcioncur.value = 'Zapato1';
sel.appendChild(opcioncur);



celda1.appendChild(sel);

var celda2 = document.createElement("TD");
var sel = document.createElement("SELECT");
sel.setAttribute("size","1");
sel.setAttribute("name","sel" + cont.value);
opcioncur = document.createElement("OPTION");
opcioncur.innerHTML = 'Verde';
opcioncur.value = 'verde';
sel.appendChild(opcioncur);

opcion1 = document.createElement("OPTION");
opcion1.innerHTML = "Rojo";
opcion1.value = "rojo";
sel.appendChild(opcion1); 

opcion2 = document.createElement("OPTION");
opcion2.innerHTML = "Fucsia";
opcion2.value = "fucsia";
sel.appendChild(opcion2); 

opcion3 = document.createElement("OPTION");
opcion3.innerHTML = "Naranja";
opcion3.value = "naranja";
sel.appendChild(opcion3); 
celda2.appendChild(sel);

opcion4 = document.createElement("OPTION");
opcion4.innerHTML = "Blanco";
opcion4.value = "blanco";
sel.appendChild(opcion4); 
celda2.appendChild(sel);

opcion5 = document.createElement("OPTION");
opcion5.innerHTML = "Negro";
opcion5.value = "negro";
sel.appendChild(opcion5); 
celda2.appendChild(sel);

opcion6 = document.createElement("OPTION");
opcion6.innerHTML = "Amarillo";
opcion6.value = "amarillo";
sel.appendChild(opcion6); 
celda2.appendChild(sel);

var celda3 = document.createElement("TD");
var valorA = document.createElement("INPUT");
valorA.setAttribute("type","text");
valorA.setAttribute("size","2");
valorA.setAttribute("maxlength","2");
valorA.setAttribute("name","valorA" + cont.value);
celda3.appendChild(valorA); 

var celda4 = document.createElement("TD");
celda4.align=("center")
celda4.className=("listo");
celda4.innerHTML = '1'; 

var celda5 = document.createElement("TD");
celda5.align=("center")
celda5.className=("listo");
celda5.innerHTML = '120 Bs'; 

var celda6 = document.createElement('TD');
var boton = document.createElement('INPUT');
celda6.align=("left") 
boton.setAttribute('type','button');
boton.setAttribute('value','borrar');
boton.onclick=function(){borrarFila(this);add(-1);add2(-100)}
boton.className=("boton")
celda6.appendChild(boton);


fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda3);
fila.appendChild(celda4);
fila.appendChild(celda5);
fila.appendChild(celda6);

tabla.appendChild(fila);
}
function borrarFila(button){
var fila = button.parentNode.parentNode;
var tabla = document.getElementById('contenido').getElementsByTagName('tbody')[0];
tabla.removeChild(fila);
}
function add(delta) {

  valor = eval(detalle.casilla.value);

  detalle.casilla.value = eval(valor+delta);  

}
function add2(delta) {

  valor = eval(detalle.total.value);

  detalle.total.value = eval(valor+delta);  

}

</script>
<link href="comprar.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<Form name="detalle" action="procesar.php" method="post">
<input name="cont" type="hidden" id="cont" value="0" >
<input name="filas" type="hidden" id="filas" value="" >
<table id="contenido" width="100%">
  <tr class="cabezado" bgcolor="#000000" align="left">
    <th width="16%" scope="col">Producto</th>
    <th width="15%" scope="col">Color</th>
    <th width="13%" scope="col">Talla</th>
    <th width="16%" scope="col">Cantidad</th>
    <th width="22%" scope="col">Precio</th>
    <th width="18%" scope="col">Campo</th>
  </tr>
  <tr  align="left">
    <th scope="col">
      <select class="menu" name="producto">
        <option value="baya">Zapatos</option>
      </select></th>
    <th scope="col"><label for="color"></label>
      <select class="menu" name="color" id="color">
        <option value="verde">Verde</option>
        <option value="rojo">Rojo</option>
        <option value="fucsia">Fucsia</option>
        <option value="naranja">Naranja</option>
        <option value="blanco">Blanco</option>
        <option value="negro">Negro</option>
        <option value="amarillo">Amarillo</option>
      </select></th>
    <th scope="col"><label for="talla"></label>
      <span id="sprytextfield1">
      <input name="talla2" type="text" id="talla2" size="2" maxlength="2">
      <span class="textfieldRequiredMsg">Se necesita un valor.</span></span></th>
    <th class="listo" align="center" scope="col">1</th>
    <th class="listo" align="center"scope="col">100 Bs</th>
    <th class="listo" align="center" scope="col">*</th>
  </tr>
   <tr  align="left">
    <th scope="col">
      <select class="menu" name="producto">
        <option value="baya">Zapatos</option>
      </select></th>
    <th scope="col"><label for="color"></label>
      <select class="menu" name="color" id="color">
        <option value="verde">Verde</option>
        <option value="rojo">Rojo</option>
        <option value="fucsia">Fucsia</option>
        <option value="naranja">Naranja</option>
        <option value="blanco">Blanco</option>
        <option value="negro">Negro</option>
        <option value="amarillo">Amarillo</option>
      </select></th>
    <th scope="col"><label for="talla"></label>
      <span id="sprytextfield1">
      <input name="talla2" type="text" id="talla2" size="2" maxlength="2">
      <span class="textfieldRequiredMsg">Se necesita un valor.</span></span></th>
    <th class="listo" align="center" scope="col">1</th>
    <th class="listo" align="center"scope="col">100 Bs</th>
    <th class="listo" align="center" scope="col">*</th>
  </tr>
</table>

<input name="nueva_fila" type="button" class="boton" value="Agregar Otro" onClick="adicionarFila();add(1);add2(100)">
<input type="submit" name="Submit" value="Proceder" />

<div class="listo">
  <table align="right" width="35%">
    <tr>
      <th width="30%" bgcolor="#000000" class="cabezado" align="right" scope="row">Cantidad</th>
      <td bgcolor="#000000" width="14%">
      <input name="casilla" type="text" value="3" size="6" readonly></td>
      <td bgcolor="#000000" align="right" class="cabezado" width="25%">Total</td>
      <td bgcolor="#000000" width="27%"><input name="total" type="text" value="300" size="10" readonly></td><td width="4%"></td>
    </tr>
  </table>
  
</div>
</form>
</div>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
</script>
</body>
</html>
Espero que me puedan ayudar con esto. Gracias de ante mano,
  #2 (permalink)  
Antiguo 04/09/2012, 06:48
Avatar de Perr0  
Fecha de Ingreso: mayo-2005
Ubicación: Santiago de Chile, Chile
Mensajes: 676
Antigüedad: 18 años, 10 meses
Puntos: 79
Exclamación Respuesta: Agregar limite de filas a formulario dinamico
en la funcion "adicionarFila", agrega esto, debajo de la linea comentada:


Código Javascript: 
Ver original
  1. if(tabla.getElementsByTagName("tr").length>8) return false;

Código Javascript: 
Ver original
  1. function adicionarFila(){
  2. var cont = document.getElementById("cont");
  3. var filas = document.getElementById("filas");
  4. cont.setAttribute("value", parseInt(cont.value,0)+1);
  5. var tabla = document.getElementById("contenido").tBodies[0];
  6. var fila = document.createElement("TR");
  7. fila.setAttribute("align","left");
  8. //LIMITADO A 8 MÁXIMO
  9. if(tabla.getElementsByTagName("tr").length>8) return false;


salu2
__________________
Numerador Mp3 en Access =)
http://www.mediafire.com/download/r9...pdw/mp3(2).zip
  #3 (permalink)  
Antiguo 04/09/2012, 10:40
 
Fecha de Ingreso: agosto-2012
Ubicación: Aragua
Mensajes: 25
Antigüedad: 11 años, 7 meses
Puntos: 0
Pregunta Respuesta: Agregar limite de filas a formulario dinamico
Muchas gracias por tu respuesta, pero tengo otra duda, como haría para que el contador pare de sumar valores y ademas aparezca un mensaje diciendo que ya no es posible agregar mas filas?.

Script para el contador:
Código: 
}
function add(delta) {

  valor = eval(detalle.casilla.value);

  detalle.casilla.value = eval(valor+delta);  

}
function add2(delta) {

  valor = eval(detalle.total.value);

  detalle.total.value = eval(valor+delta);  

}
  #4 (permalink)  
Antiguo 04/09/2012, 10:48
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 10 meses
Puntos: 220
Respuesta: Agregar limite de filas a formulario dinamico
Cita:
Iniciado por david_andress Ver Mensaje
Muchas gracias por tu respuesta, pero tengo otra duda, como haría para que el contador pare de sumar valores y ademas aparezca un mensaje diciendo que ya no es posible agregar mas filas?.

Script para el contador:
Código: 
}
function add(delta) {

  valor = eval(detalle.casilla.value);

  detalle.casilla.value = eval(valor+delta);  

}
function add2(delta) {

  valor = eval(detalle.total.value);

  detalle.total.value = eval(valor+delta);  

}
Para que el contador no sume entonces haz lo siguiente en estas funciones

if(tabla.getElementsByTagName("tr").length>8) return false;

if(tabla.getElementsByTagName("tr").length>8) return false;

antes de poner

detalle.total.value = eval(valor+delta);


Segundo nunca para nada uses eval consume bastantes recursos y es susceptible a ser manipulado por otros porque no usas parseInt

y para que aparezca el mensaje en la parte de tu adicionarFila

Código Javascript: 
Ver original
  1. if(tabla.getElementsByTagName("tr").length>8) {
  2. alert('YA NO ES POSIBLE AGREGAR MAS FILAS')
  3. return false;
  4. }
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #5 (permalink)  
Antiguo 04/09/2012, 22:03
 
Fecha de Ingreso: agosto-2012
Ubicación: Aragua
Mensajes: 25
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Agregar limite de filas a formulario dinamico
Hola, muchas gracias por la respuesta, el codigo para el alert me funcionó a la perfeccion, pero tengo un problema con el codigo para dejar de contar, no esta funcionando, nose si lo he colocado mal. Disculpa, esque soy nuevo en esto:

Código: 
<html><head>
<title>Agregar fila de campos DINAMICOS</title>

<script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script type="text/javascript">


function adicionarFila(){
var cont = document.getElementById("cont");
var filas = document.getElementById("filas");
cont.setAttribute("value", parseInt(cont.value,0)+1);
var tabla = document.getElementById("contenido").tBodies[0];
var fila = document.createElement("TR");
fila.setAttribute("align","left");
    if(tabla.getElementsByTagName("tr").length>8) {
    alert('YA NO ES POSIBLE AGREGAR MAS FILAS')
    return false;
    }

var celda1 = document.createElement("TD");
var sel = document.createElement("SELECT");
sel.setAttribute("size","1");
sel.setAttribute("name","sel" + cont.value);
opcioncur = document.createElement("OPTION");
opcioncur.innerHTML = 'Zapatos';
opcioncur.value = 'Zapato1';
sel.appendChild(opcioncur);



celda1.appendChild(sel);

var celda2 = document.createElement("TD");
var sel = document.createElement("SELECT");
sel.setAttribute("size","1");
sel.setAttribute("name","sel" + cont.value);
opcioncur = document.createElement("OPTION");
opcioncur.innerHTML = 'Verde';
opcioncur.value = 'verde';
sel.appendChild(opcioncur);

opcion1 = document.createElement("OPTION");
opcion1.innerHTML = "Rojo";
opcion1.value = "rojo";
sel.appendChild(opcion1); 

opcion2 = document.createElement("OPTION");
opcion2.innerHTML = "Fucsia";
opcion2.value = "fucsia";
sel.appendChild(opcion2); 

opcion3 = document.createElement("OPTION");
opcion3.innerHTML = "Naranja";
opcion3.value = "naranja";
sel.appendChild(opcion3); 
celda2.appendChild(sel);

opcion4 = document.createElement("OPTION");
opcion4.innerHTML = "Blanco";
opcion4.value = "blanco";
sel.appendChild(opcion4); 
celda2.appendChild(sel);

opcion5 = document.createElement("OPTION");
opcion5.innerHTML = "Negro";
opcion5.value = "negro";
sel.appendChild(opcion5); 
celda2.appendChild(sel);

opcion6 = document.createElement("OPTION");
opcion6.innerHTML = "Amarillo";
opcion6.value = "amarillo";
sel.appendChild(opcion6); 
celda2.appendChild(sel);

var celda3 = document.createElement("TD");
var valorA = document.createElement("INPUT");
valorA.setAttribute("type","text");
valorA.setAttribute("size","2");
valorA.setAttribute("maxlength","2");
valorA.setAttribute("name","valorA" + cont.value);
celda3.appendChild(valorA); 

var celda4 = document.createElement("TD");
celda4.align=("center")
celda4.className=("listo");
celda4.innerHTML = '1'; 

var celda5 = document.createElement("TD");
celda5.align=("center")
celda5.className=("listo");
celda5.innerHTML = '120 Bs'; 

var celda6 = document.createElement('TD');
var boton = document.createElement('INPUT');
celda6.align=("left") 
boton.setAttribute('type','button');
boton.setAttribute('value','borrar');
boton.onclick=function(){borrarFila(this);add(-1);add2(-100)}
boton.className=("boton")
celda6.appendChild(boton);


fila.appendChild(celda1);
fila.appendChild(celda2);
fila.appendChild(celda3);
fila.appendChild(celda4);
fila.appendChild(celda5);
fila.appendChild(celda6);

tabla.appendChild(fila);
}
function borrarFila(button){
var fila = button.parentNode.parentNode;
var tabla = document.getElementById('contenido').getElementsByTagName('tbody')[0];
tabla.removeChild(fila);
}
function add(delta) {

  valor = eval(detalle.casilla.value);
  if(tabla.getElementsByTagName("tr").length>8) return false;
  detalle.casilla.value = eval(valor+delta);  

}
function add2(delta) {

  valor = eval(detalle.total.value);
  if(tabla.getElementsByTagName("tr").length>8) return false;
  detalle.total.value = eval(valor+delta);  

}

</script>
<link href="comprar.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<Form name="detalle" action="procesar.php" method="post">
<input name="cont" type="hidden" id="cont" value="0" >
<input name="filas" type="hidden" id="filas" value="" >
<table id="contenido" width="100%">
  <tr class="cabezado" bgcolor="#000000" align="left">
    <th width="16%" scope="col">Producto</th>
    <th width="15%" scope="col">Color</th>
    <th width="13%" scope="col">Talla</th>
    <th width="16%" scope="col">Cantidad</th>
    <th width="22%" scope="col">Precio</th>
    <th width="18%" scope="col">Campo</th>
  </tr>
  <tr  align="left">
    <th scope="col">
      <select class="menu" name="producto">
        <option value="baya">Zapatos</option>
      </select></th>
    <th scope="col"><label for="color"></label>
      <select class="menu" name="color" id="color">
        <option value="verde">Verde</option>
        <option value="rojo">Rojo</option>
        <option value="fucsia">Fucsia</option>
        <option value="naranja">Naranja</option>
        <option value="blanco">Blanco</option>
        <option value="negro">Negro</option>
        <option value="amarillo">Amarillo</option>
      </select></th>
    <th scope="col"><label for="talla"></label>
      <span id="sprytextfield1">
      <input name="talla2" type="text" id="talla2" size="2" maxlength="2">
      <span class="textfieldRequiredMsg">Se necesita un valor.</span></span></th>
    <th class="listo" align="center" scope="col">1</th>
    <th class="listo" align="center"scope="col">100 Bs</th>
    <th class="listo" align="center" scope="col">*</th>
  </tr>
   <tr  align="left">
    <th scope="col">
      <select class="menu" name="producto">
        <option value="baya">Zapatos</option>
      </select></th>
    <th scope="col"><label for="color"></label>
      <select class="menu" name="color" id="color">
        <option value="verde">Verde</option>
        <option value="rojo">Rojo</option>
        <option value="fucsia">Fucsia</option>
        <option value="naranja">Naranja</option>
        <option value="blanco">Blanco</option>
        <option value="negro">Negro</option>
        <option value="amarillo">Amarillo</option>
      </select></th>
    <th scope="col"><label for="talla"></label>
      <span id="sprytextfield1">
      <input name="talla2" type="text" id="talla2" size="2" maxlength="2">
      <span class="textfieldRequiredMsg">Se necesita un valor.</span></span></th>
    <th class="listo" align="center" scope="col">1</th>
    <th class="listo" align="center"scope="col">100 Bs</th>
    <th class="listo" align="center" scope="col">*</th>
  </tr>
</table>

<input name="nueva_fila" type="button" class="boton" value="Agregar Otro" onClick="adicionarFila();add(1);add2(100)">
<input type="submit" name="Submit" value="Proceder" />

<div class="listo">
  <table align="right" width="35%">
    <tr>
      <th width="30%" bgcolor="#000000" class="cabezado" align="right" scope="row">Cantidad</th>
      <td bgcolor="#000000" width="14%">
      <input name="casilla" type="text" value="3" size="6" readonly></td>
      <td bgcolor="#000000" align="right" class="cabezado" width="25%">Total</td>
      <td bgcolor="#000000" width="27%"><input name="total" type="text" value="300" size="10" readonly></td><td width="4%"></td>
    </tr>
  </table>
  
</div>
</form>
</div>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
</script>
</body>
</html>
  #6 (permalink)  
Antiguo 04/09/2012, 22:08
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 10 meses
Puntos: 220
Respuesta: Agregar limite de filas a formulario dinamico
es que te falta poner este codigo arriba del if

var tabla = document.getElementById("contenido").tBodies[0];
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #7 (permalink)  
Antiguo 06/09/2012, 23:44
 
Fecha de Ingreso: agosto-2012
Ubicación: Aragua
Mensajes: 25
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Agregar limite de filas a formulario dinamico
Hola, gracias, ahora solo tengo un unico problema, y es que cuando agrego la ultima fila que es la 12 el contador no la cuenta, queda en 11 :(
  #8 (permalink)  
Antiguo 07/09/2012, 01:50
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 10 meses
Puntos: 220
Respuesta: Agregar limite de filas a formulario dinamico
pero es facil solo ponlo >=
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #9 (permalink)  
Antiguo 08/09/2012, 00:44
 
Fecha de Ingreso: agosto-2012
Ubicación: Aragua
Mensajes: 25
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Agregar limite de filas a formulario dinamico
Hola gracias, pero no funciona, ahora deja de contar en 10, que problema con eso :s
  #10 (permalink)  
Antiguo 08/09/2012, 09:35
Avatar de Dradi7  
Fecha de Ingreso: junio-2008
Ubicación: Peru - Lima
Mensajes: 1.518
Antigüedad: 15 años, 10 meses
Puntos: 220
Respuesta: Agregar limite de filas a formulario dinamico
Pero es solo cuestion de logica nada mas solo incrementa el valor que dice 8 y listo por el numero en donde tu deseas que llegue al limite

if(tabla.getElementsByTagName("tr").length>8)
__________________
La clave de todo triunfador es eliminar todas sus excusas y sus limitaciones
  #11 (permalink)  
Antiguo 08/09/2012, 23:45
 
Fecha de Ingreso: agosto-2012
Ubicación: Aragua
Mensajes: 25
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Agregar limite de filas a formulario dinamico
Agradezco la inmensa pasciencia que has tenido conmigo, pero sigo teniendo un problema con el contador, tal vez porque soy muy novato, prometo que al terminar este formulario me dediare a leer el curso completo de js y php.

El codigo javascript para la funcion del contador lo tengo de la siguiente manera:

Funcion para adicionar fila:
Código: 
function adicionarFila(){
var cont = document.getElementById("cont");
var filas = document.getElementById("filas");
cont.setAttribute("value", parseInt(cont.value,0)+1);
var tabla = document.getElementById("contenido").tBodies[0];
var fila = document.createElement("TR");
fila.setAttribute("align","left");
//LIMITADO A 8 MÁXIMO
if(tabla.getElementsByTagName("tr").length>=12) {
    alert('YA NO ES POSIBLE AGREGAR MAS FILAS')
	return false;
    }
Funcion para incrementar contador:
Código: 
}
function add(delta) {
      valor = eval(detalle.canti.value);
	 var tabla = document.getElementById("contenido").tBodies[0];
	if(tabla.getElementsByTagName("tr").length>12) return false;
    detalle.canti.value = eval(valor+delta); 

}
function add2(delta) {

   valor = eval(detalle.total.value);
   var tabla = document.getElementById("contenido").tBodies[0];
   if(tabla.getElementsByTagName("tr").length>12) return false;
   detalle.total.value = eval(valor+delta);  


}
Ahora el problema que tengo es que cuando hago click en adicionar fila cuando ya es la numero 12, el contador se coloca en 12 y me aparece el alert, hasta ahi todo bien, pero si vuelvo a pisar el boton adicionar fila me aparece el alert pero el contador cuenta una fila mas.

Etiquetas: dinamico, fila, formulario, limite
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:39.