Foros del Web » Programando para Internet » Javascript »

Interrumpir funcion al llegar al maximo contador

 Estas en el tema de Interrumpir funcion al llegar al maximo contador en el foro de Javascript en Foros del Web. Hola a todos, soy nuevo en el manejo de este lenguaje, estoy haciendo un formulario con php y javascript. Resulta que es un formulario dinamico ...
  #1 (permalink)  
Antiguo 14/09/2012, 00:35
 
Fecha de Ingreso: agosto-2012
Ubicación: Aragua
Mensajes: 25
Antigüedad: 11 años, 8 meses
Puntos: 0
Pregunta Interrumpir funcion al llegar al maximo contador
Hola a todos, soy nuevo en el manejo de este lenguaje, estoy haciendo un formulario con php y javascript.

Resulta que es un formulario dinamico donde se pueden agregar filas con un boton, el formulario tiene un contador, lo que quiero hacer es que cuando ya se halla agregado la fila numero 12, al pisar el boton adicionar fila aparezca un alert e interrumpa la funcion, y al mismo tiempo que el contador deje de sumar mas filas quedando en 12.

He probado con esto:
Código: 
<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");
//LIMITADO A 8 MÁXIMO
if(tabla.getElementsByTagName("tr").length>=12) {
    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","produc" + cont.value);
sel.setAttribute("ID","sel");
opcioncur = document.createElement("OPTION");
opcioncur.innerHTML = 'Zapato';
opcioncur.value = 'Zapato';
sel.appendChild(opcioncur);



celda1.appendChild(sel);

var celda2 = document.createElement("TD");
var sel = document.createElement("SELECT");
sel.setAttribute("size","1");
sel.setAttribute("name","color" + 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 sel = document.createElement("SELECT");
sel.setAttribute("size","1");
sel.setAttribute("name","talla" + cont.value);
opcioncur = document.createElement("OPTION");
opcioncur.innerHTML = '36';
opcioncur.value = '36';
sel.appendChild(opcioncur);

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

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

opcion3 = document.createElement("OPTION");
opcion3.innerHTML = "39";
opcion3.value = "39";
sel.appendChild(opcion3); 
celda3.appendChild(sel);

opcion4 = document.createElement("OPTION");
opcion4.innerHTML = "40";
opcion4.value = "40";
sel.appendChild(opcion4); 
celda3.appendChild(sel);

var celda4 = document.createElement("TD");
var valorb = document.createElement("INPUT");
celda4.align = ("center");
valorb.setAttribute("type","text");
valorb.setAttribute("border","none");
valorb.setAttribute("size","2");
valorb.setAttribute("maxlength","2");
valorb.setAttribute("name","canti" + cont.value);
valorb.className=("listo");
valorb.value = "1"; 
celda4.appendChild(valorb); 

var celda5 = document.createElement("TD");
var valorc = document.createElement("INPUT");
celda5.align = ("center");
valorc.setAttribute("type","text");
valorc.setAttribute("border","none");
valorc.setAttribute("size","5");
valorc.setAttribute("maxlength","2");
valorc.setAttribute("name","pre" + cont.value);
valorc.className=("listo");
valorc.value = "100 Bs"; 
celda5.appendChild(valorc);  

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.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);  


}

</script>
Me va bien, el problema es el siguiente: cuando intento agregar la fila numero 13 me lanza el alert diciendo que ya no es posible y no agrega la fila, bien, pero el contador no se detiene y cuenta una fila mas, osea se situa en 13 :s . Espero que me puedan ayudar no hallo que hacer. Gracias
  #2 (permalink)  
Antiguo 14/09/2012, 00:52
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 1 mes
Puntos: 574
Respuesta: Interrumpir funcion al llegar al maximo contador
Código Javascript: 
Ver original
  1. function adicionarFila(){
  2.     //LIMITADO A 12 MÁXIMO
  3.     if(tabla.getElementsByTagName("tr").length>=12) {
  4.         alert('YA NO ES POSIBLE AGREGAR MAS FILAS')
  5.         return false;
  6.     }else{
  7.         var cont = document.getElementById("cont");
  8.         var filas = document.getElementById("filas");
  9.         cont.setAttribute("value", parseInt(cont.value,0)+1);
  10.         var tabla = document.getElementById("contenido").tBodies[0];
  11.         var fila = document.createElement("TR");
  12.         fila.setAttribute("align","left");
  13.  
  14.         var celda1 = document.createElement("TD");
  15.         var sel = document.createElement("SELECT");
  16.         sel.setAttribute("size","1");
  17.         sel.setAttribute("name","produc" + cont.value);
  18.         sel.setAttribute("ID","sel");
  19.         opcioncur = document.createElement("OPTION");
  20.         opcioncur.innerHTML = 'Zapato';
  21.         opcioncur.value = 'Zapato';
  22.         sel.appendChild(opcioncur);
  23.  
  24.     celda1.appendChild(sel);
  25.     
  26.     var celda2 = document.createElement("TD");
  27.     var sel = document.createElement("SELECT");
  28.     sel.setAttribute("size","1");
  29.     sel.setAttribute("name","color" + cont.value);
  30.     opcioncur = document.createElement("OPTION");
  31.     opcioncur.innerHTML = 'Verde';
  32.     opcioncur.value = 'verde';
  33.     sel.appendChild(opcioncur);
  34.     
  35.     opcion1 = document.createElement("OPTION");
  36.     opcion1.innerHTML = "Rojo";
  37.     opcion1.value = "rojo";
  38.     sel.appendChild(opcion1); 
  39.  
  40.     opcion2 = document.createElement("OPTION");
  41.     opcion2.innerHTML = "Fucsia";
  42.     opcion2.value = "fucsia";
  43.     sel.appendChild(opcion2); 
  44.  
  45.     opcion3 = document.createElement("OPTION");
  46.     opcion3.innerHTML = "Naranja";
  47.     opcion3.value = "naranja";
  48.     sel.appendChild(opcion3); 
  49.     celda2.appendChild(sel);
  50.     
  51.     opcion4 = document.createElement("OPTION");
  52.     opcion4.innerHTML = "Blanco";
  53.     opcion4.value = "blanco";
  54.     sel.appendChild(opcion4); 
  55.     celda2.appendChild(sel);
  56.     
  57.     opcion5 = document.createElement("OPTION");
  58.     opcion5.innerHTML = "Negro";
  59.     opcion5.value = "negro";
  60.     sel.appendChild(opcion5); 
  61.     celda2.appendChild(sel);
  62.     
  63.     opcion6 = document.createElement("OPTION");
  64.     opcion6.innerHTML = "Amarillo";
  65.     opcion6.value = "amarillo";
  66.     sel.appendChild(opcion6); 
  67.     celda2.appendChild(sel);
  68.  
  69.     var celda3 = document.createElement("TD");
  70.     var sel = document.createElement("SELECT");
  71.     sel.setAttribute("size","1");
  72.     sel.setAttribute("name","talla" + cont.value);
  73.     opcioncur = document.createElement("OPTION");
  74.     opcioncur.innerHTML = '36';
  75.     opcioncur.value = '36';
  76.     sel.appendChild(opcioncur);
  77.     
  78.     opcion1 = document.createElement("OPTION");
  79.     opcion1.innerHTML = "37";
  80.     opcion1.value = "37";
  81.     sel.appendChild(opcion1); 
  82.     
  83.     opcion2 = document.createElement("OPTION");
  84.     opcion2.innerHTML = "38";
  85.     opcion2.value = "38";
  86.     sel.appendChild(opcion2); 
  87.     
  88.     opcion3 = document.createElement("OPTION");
  89.     opcion3.innerHTML = "39";
  90.     opcion3.value = "39";
  91.     sel.appendChild(opcion3); 
  92.     celda3.appendChild(sel);
  93.     
  94.     opcion4 = document.createElement("OPTION");
  95.     opcion4.innerHTML = "40";
  96.     opcion4.value = "40";
  97.     sel.appendChild(opcion4); 
  98.     celda3.appendChild(sel);
  99.  
  100.     var celda4 = document.createElement("TD");
  101.     var valorb = document.createElement("INPUT");
  102.     celda4.align = ("center");
  103.     valorb.setAttribute("type","text");
  104.     valorb.setAttribute("border","none");
  105.     valorb.setAttribute("size","2");
  106.     valorb.setAttribute("maxlength","2");
  107.     valorb.setAttribute("name","canti" + cont.value);
  108.     valorb.className=("listo");
  109.     valorb.value = "1"; 
  110.     celda4.appendChild(valorb); 
  111.     
  112.     var celda5 = document.createElement("TD");
  113.     var valorc = document.createElement("INPUT");
  114.     celda5.align = ("center");
  115.     valorc.setAttribute("type","text");
  116.     valorc.setAttribute("border","none");
  117.     valorc.setAttribute("size","5");
  118.     valorc.setAttribute("maxlength","2");
  119.     valorc.setAttribute("name","pre" + cont.value);
  120.     valorc.className=("listo");
  121.     valorc.value = "100 Bs"; 
  122.     celda5.appendChild(valorc);  
  123.     
  124.     var celda6 = document.createElement('TD');
  125.     var boton = document.createElement('INPUT');
  126.     celda6.align=("left") 
  127.     boton.setAttribute('type','button');
  128.     boton.setAttribute('value','borrar');
  129.     boton.onclick=function(){borrarFila(this);add(-1);add2(-100)}
  130.     boton.className=("boton")
  131.     celda6.appendChild(boton);
  132.     
  133.     
  134.     fila.appendChild(celda1);
  135.     fila.appendChild(celda2);
  136.     fila.appendChild(celda3);
  137.     fila.appendChild(celda4);
  138.     fila.appendChild(celda5);
  139.     fila.appendChild(celda6);
  140.     
  141.     tabla.appendChild(fila);
  142.     
  143.     }
  144. }

Solo he modificado la función adicionarFila(). (Ojo con el doble cierre al final }})
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.
  #3 (permalink)  
Antiguo 14/09/2012, 10:39
 
Fecha de Ingreso: agosto-2012
Ubicación: Aragua
Mensajes: 25
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Interrumpir funcion al llegar al maximo contador
Gracias por tu respuesta, pero ahora cuando le doy click a adicionar fila no funciona, nisiquiera crea la primera fila :S

CODIGO:
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(){
        //LIMITADO A 12 MÁXIMO
        if(tabla.getElementsByTagName("tr").length>=12) {
            alert('YA NO ES POSIBLE AGREGAR MAS FILAS')
            return false;
        }else{
            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","produc" + cont.value);
            sel.setAttribute("ID","sel");
            opcioncur = document.createElement("OPTION");
            opcioncur.innerHTML = 'Zapato';
            opcioncur.value = 'Zapato';
            sel.appendChild(opcioncur);
     
        celda1.appendChild(sel);
       
        var celda2 = document.createElement("TD");
        var sel = document.createElement("SELECT");
        sel.setAttribute("size","1");
        sel.setAttribute("name","color" + 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 sel = document.createElement("SELECT");
        sel.setAttribute("size","1");
        sel.setAttribute("name","talla" + cont.value);
        opcioncur = document.createElement("OPTION");
        opcioncur.innerHTML = '36';
        opcioncur.value = '36';
        sel.appendChild(opcioncur);
       
        opcion1 = document.createElement("OPTION");
        opcion1.innerHTML = "37";
        opcion1.value = "37";
        sel.appendChild(opcion1);
       
        opcion2 = document.createElement("OPTION");
        opcion2.innerHTML = "38";
        opcion2.value = "38";
        sel.appendChild(opcion2);
       
        opcion3 = document.createElement("OPTION");
        opcion3.innerHTML = "39";
        opcion3.value = "39";
        sel.appendChild(opcion3);
        celda3.appendChild(sel);
       
        opcion4 = document.createElement("OPTION");
        opcion4.innerHTML = "40";
        opcion4.value = "40";
        sel.appendChild(opcion4);
        celda3.appendChild(sel);
     
        var celda4 = document.createElement("TD");
        var valorb = document.createElement("INPUT");
        celda4.align = ("center");
        valorb.setAttribute("type","text");
        valorb.setAttribute("border","none");
        valorb.setAttribute("size","2");
        valorb.setAttribute("maxlength","2");
        valorb.setAttribute("name","canti" + cont.value);
        valorb.className=("listo");
        valorb.value = "1";
        celda4.appendChild(valorb);
       
        var celda5 = document.createElement("TD");
        var valorc = document.createElement("INPUT");
        celda5.align = ("center");
        valorc.setAttribute("type","text");
        valorc.setAttribute("border","none");
        valorc.setAttribute("size","5");
        valorc.setAttribute("maxlength","2");
        valorc.setAttribute("name","pre" + cont.value);
        valorc.className=("listo");
        valorc.value = "100 Bs";
        celda5.appendChild(valorc);  
       
        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.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);  


}

</script>
  #4 (permalink)  
Antiguo 15/09/2012, 06:52
Colaborador
  
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 1 mes
Puntos: 574
Respuesta: Interrumpir funcion al llegar al maximo contador
Analiza el cambio que he hecho y corrige el posible error que haya cometido, se trata de que el condicional que te lanza el aviso de que se ha llegado al limite ademas de ello NO permita la ejecución del resto de la función. Es decir si se cumple la condición (haber llegado al limite) lanzo el aviso sino ejecuto la función...

IF (...condicion...){
se cumple AVISO
}else{
no se cumple agrego la linea
}

Es decir antes que nada miro si se ha llegao al limite si es asi simplemente digo que no se puede agregar nada, si no es asi agrego la linea....

Para ver donde esta el error agrea una linea tipo alert("Hola"); en la primera linea de la función si recibes el saludo sabras que hasta ahi la cosa funciona.... ve desplazando esa linea por el cuerpo de la función hasta encontrar donde no se ejecuta ... el error estara justo antes de ese punto... (Tecnica de debug....patatera)
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.
Última edición por quimfv; 15/09/2012 a las 06:58

Etiquetas: contador, dinamico, formulario, interrumpir, alerta
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 07:00.