Ocultar Boton Submit en un ComboBox

[Camarex]

Que tal, hace tiempo encontre un script para combobox dependiente, y me gusto mucho, asi que le agregue el boton de submit, pero lo oculte para no darle continuar sin escoger las opciones. Luego, al ir escogiendo las diferentes opciones se va mostrando u ocultando segun sea el caso. Hasta ahi todo bien, el problema es que al dar click en la primera opcion de cada lista de opciones, (-Categoria- y -SubCategoria-) se habilita el boton.
Trate de corregir eso, pero la verdad no le encontre como, ya que se muy poquito o casi nada de javascript.

Ojala algun experto en JavaScript me pueda echar la mano, la verdad ya estoy bien desesperado con esto. De antemano Muchas Gracias.

Aqui el codigo JavaScript.

Código Javascript:

// Primer combo box
    data_1 = new Option("1", "1");
    data_2 = new Option("2", "2");
 
// Segundo combo box
    data_1_1 = new Option("11", "11");
    data_1_2 = new Option("12", "12");
    data_2_1 = new Option("21", "21");
    data_2_2 = new Option("22", "22");
    data_2_3 = new Option("23", "23");
    data_2_4 = new Option("24", "24");
    data_2_5 = new Option("25", "25");
 
// Tercer combo box
    data_1_1_1 = new Option("111", "111");
    data_1_1_2 = new Option("112", "112");
    data_1_1_3 = new Option("113", "113");
    data_1_2_1 = new Option("121", "121");
    data_1_2_2 = new Option("122", "122");
    data_1_2_3 = new Option("123", "123");
    data_1_2_4 = new Option("124", "124");
    data_2_1_1 = new Option("211", "211");
    data_2_1_2 = new Option("212", "212");
    data_2_2_1 = new Option("221", "221");
    data_2_2_2 = new Option("222", "222");
    data_2_3_1 = new Option("231", "231");
    data_2_3_2 = new Option("232", "232");
 
// Cuarto combo box
    data_1_1_1_1 = new Option("1111","1111")
    data_2_2_1_1 = new Option("2211","2211")
    data_2_2_1_2 = new Option("2212","2212")
 
// Otros Parametros
    displaywhenempty=""
    valuewhenempty=-1
 
    displaywhennotempty="-SubCategoria-"
    valuewhennotempty=0
 
 
function change(currentbox) {
    numb = currentbox.id.split("_");
    currentbox = numb[1];
    i=parseInt(currentbox)+1
 
// Vacio todos los combo boxes siguiendo la actual.
 
    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null))
        {
         son = document.getElementById("combo_"+i);
         
         /* 
         Se borran todas las opciones menos la primera (no esta permitido)
         Esto es, cuando se selecciona una categoria del combo anterior, las que
         ya se habian desplegado en el siguiente, se borran.
         */
         for (m=son.options.length-1;m>0;m--)
             son.options[m]=null;
             // Reseteo la primera opcion
             son.options[0]=new Option(displaywhenempty,valuewhenempty)
             i=i+1
        }
 
// Se crea un String con el nombre base ("stringa"), ejemplo: "data_1_0"
// al que se agregara _0,_1,_2,_3 etc para obtener el nombre del combo box que se va a llenar.
 
    stringa='data'
    i=0
    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
           eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
           f1.continuar.style.display="block"; //Muestro el Boton cuando ya no hay mas combobox a mostrar.
           if (i==currentbox) break;
           i=i+1
    }
    
// llenando el combo hijo ("son") Si es que existe.
 
    following=parseInt(currentbox)+1
    if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
       (document.getElementById("combo_"+following)!=null))
    {
       son = document.getElementById("combo_"+following);
       stringa=stringa+"_"
       i=0
       while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) 
        {
                /* Si no hay opciones, Vacio la primera opcion del combo hijo ("son")
                De lo contrario, pongo "-SubCategoria-"
                */
                 if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
                        {
                         if (eval("typeof("+stringa+"1)=='undefined'"))
                            {
                            eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
                            
                                f1.continuar.style.display="block"; //Muestro el Boton cuando no hay mas subcategorias aunque haya otro combobox.
                            }
                         else
                            {
                            eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
                                     f1.continuar.style.display="none"; //Oculto el Boton
                                     f1.combo1.disabled=false
                                     f1.combo1.style.display="block"
                            }
                        }
              else
                    eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
                    i=i+1       
       }
       i=1
       combostatus=''
       cstatus=stringa.split("_")
       while (cstatus[i]!=null)
        {
          combostatus=combostatus+cstatus[i]
          i=i+1
        }
       return combostatus;
    }
}
 

Aca el codigo Html.

Código HTML:

<html>
<head><title>combobox</title>
<script language="javascript" src="combobox.js"></script>
</head>
<body>
	<form name="f1" method="post" action="resultado.php">
	<select name="combo0" id="combo_0" onChange="change(this);" size="3">
		<option value="0">-Categoria-</option>
		<option value="1">1</option>
		<option value="2">2</option>
	</select>
	<br /><br />
	<select name="combo1" id="combo_1" onChange="change(this)" size="6">
		<option value="value1"> </option>
	</select>
	<br /><br />
	<select name="combo2" id="combo_2" onChange="change(this);" size="5">
		<option value="value1"> </option>
	</select>
	<br /><br />
	<select name="combo3" id="combo_3" onChange="change(this);" size="6">
		<option value="value1"> </option>
	</select>
	<br />
	<input id="continuar" type="submit" value="Continuar" style="display:none">
	</form>
</body>
</html> 

[laratik]

y que tal si agregas:

Código Javascript:

if (eval("typeof("+stringa+"1)=='undefined'") && i!=0)
 

en la condición de mostrar y ocultar el botón.

[Camarex]

Que tal laratik, intente como me dijiste, pero no sucede nada, todo funciona igual. Alguna otra sugerencia?

Edito: Con este cambio que sugieres, el boton de continuar no aparece , sino hasta que se elige una opcion del ultimo combobox.

[laratik]

Bien camarex, se me ocurrió otra idea, inhabilitar directamente el boton cuando indexof es 0, coloca esto al final del codigo:

Código Javascript:

/*Resto del codigo*/
if(document.getElementById("combo_"+currentbox).selectedIndex == 0) {
        document.getElementById("continuar").style.display = "none";
    }
 
   return combostatus;
  }
}
</script>
 

Solo como consejo, no entiendo la sobre explotación de la función eval(), me parece completamente innecesaria y desaconcejable.

[Camarex]

Muchisimas Gracias laratik, ya funciona asi como me dijiste. Mil gracias, de verdad.

Lo unico que no hizo fue ocultar el boton al llegar al ultimo combobox y dar click en -SubCategoria- , asi que lo que hice fue poner nuevamente el codigo que me diste antes del ultimo }

y funciono perfecto. al final quedo asi.

Código Javascript:

if(document.getElementById("combo_"+currentbox).selectedIndex == 0) {
        document.getElementById("continuar").style.display = "none";
    }
       return combostatus;
 
    }
    if(document.getElementById("combo_"+currentbox).selectedIndex == 0) {
            document.getElementById("continuar").style.display = "none";
        }
}
 

Sobre la función eval() , necesitare investigar un poquito mas, ya que el script asi me lo encontre googleando.

Ahora bien, tu cual crees que hubiera sido la mejor solucion:

1. Esconder el boton, como me ayudaste a hacerle, o

2. Inhabilitar la primer opcion de cada uno de los combobox, o de plano que no aparezca en la lista.

[laratik]

si preguntas que prefiero yo... prefiero esto:

Código HTML:

<select name="combo0" id="combo_0" onChange="change(this);" size="3">
        <optgroup label="-categoria-">
        <option value="1">1</option>
        <option value="2">2</option>
        </optgroup>
    </select>
 

claro que para manejarlo de esa forma habría que modificar demasiado tu javascript, por lo tanto utiliza el método que quieres implementar ocultando el botón.

[Camarex]

Ok, gracias por los comentarios laratik, hasta pronto.