validar checkbox y radio

niltza · #1 (**permalink**) 04/02/2008, 19:31

hola imaginese q necesito ayuda sobre lo siguiente: tengo un formulario y necesito hacer q no pase a la siguiente pagina sin haber seleccionado uno de los campos el problema es q tengo checkbox y radio button algo como esto

Código HTML:

 <td class="its_txt"><div align="left">
              <input name="tipo_cirugia[]"type="radio" value="Bypass G&aacute;strico" />
              Bypass G&aacute;strico </div></td>
            <td class="its_txt"><input name="tipo_cirugia[]" type="radio" value="Banda ajustable " />
              Banda ajustable </td>
            </tr>
          <tr>
            <td colspan="2" class="formu_txt_2"><div align="center">Oftalmolog&iacute;a</div></td>
            </tr>
          <tr>
            <td colspan="2" class="its_txt"><p align="left">
                <input name="tipo_cirugia[]" type="checkbox" class="editBox" id="cirugia_ofta" value="WAVEFRONT cirug&iacute;a Refractiva" />
            <a href="javaScript:Popp('esp_health2.htm#ojos','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=400')">WAVEFRONT cirug&iacute;a Refractiva </a> </p></td>

y nose como realizar esta validacion, les agradezco sim e pueden ayudar gracias

niltza · #2 (**permalink**) 05/02/2008, 13:48

por favor alguie caritativo q me pueda ayudar necesito entregar eso estos dias

rol2007 · #3 (**permalink**) 05/02/2008, 13:56

Código PHP:

  if(document.form.tipo_cirugia[0].checked==false && document.form.tipo_cirugia[1].checked==false){
alert("ESCOJE UNA");
return false;}

niltza · #4 (**permalink**) 05/02/2008, 14:00

oye q pena la ignorancia pero me podrias colaborar y ayudarlo a cuadrar bien diciendome donde va el codigo y como lollamo es q no manejo mucho el javascript la verdad estoy empezando

rol2007 · #5 (**permalink**) 05/02/2008, 14:16

Código PHP:

  <html>
<script>
function valida(){
if(document.form.tipo_cirugia[0].checked==false && document.form.tipo_cirugia[1].checked==false){
alert("ESCOJE UNA");
return false;}
}
</script>
<body>
<form name="form" method="post" onsubmit="return valida();">
 <td class="its_txt"><div align="left">
              <input name="tipo_cirugia[]"type="radio" value="Bypass G&aacute;strico" />
              Bypass G&aacute;strico </div></td>
            <td class="its_txt"><input name="tipo_cirugia" type="radio" value="Banda ajustable " />
              Banda ajustable </td>
            </tr>
          <tr>
            <td colspan="2" class="formu_txt_2"><div align="center">Oftalmolog&iacute;a</div></td>
            </tr>
          <tr>
            <td colspan="2" class="its_txt"><p align="left">
                <input name="tipo_cirugia" type="checkbox" class="editBox" id="cirugia_ofta" value="WAVEFRONT cirug&iacute;a Refractiva" />
            <a href="javascript:Popp('esp_health2.htm#ojos','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=400')">WAVEFRONT cirug&iacute;a Refractiva </a> </p></td>
            <input type="submit" name="enviar">
</body>
            </html>

niltza · #6 (**permalink**) 05/02/2008, 14:21

hola acabo de probar tu codigo pero me deja seleccionar los dos radio button, si selecciono el primer radio button me sale el alert q escoje uno con el checkbox no hay problema....

rol2007 · #7 (**permalink**) 05/02/2008, 14:33

<input name="tipo_cirugia[]"type="radio" value="Bypass Gástrico" />

borrale el [ ]

niltza · #8 (**permalink**) 05/02/2008, 14:43

ok ya le quite a los tres campos el [ ] asi ya me arreglo lo del los radio button pero ahora si s elecciono solamente el tercer campo igual me sale el alert

rol2007 · #9 (**permalink**) 05/02/2008, 14:49

no te entiendo bien puesto que nunca pusiste el codigo completo...
es hora de suponer...

supngo que el que falta es el checkbox por validar.... y se supone ke ninguno de los 3 debe estar sin habilatar

if(document.form.tipo_cirugia[0].checked==false && document.form.tipo_cirugia[1].checked==false && document.form.tipo_cirugia[2].checked ==false){

niltza · #10 (**permalink**) 05/02/2008, 14:58

mira aqui pongo el codigo con tu script incluido, la idea esq debe seleccionar alguno de los 3 campos son mas pero es unejemplo solo con tres campos

Código HTML:

<script>
function valida(){
if(document.form.tipo_cirugia[0].checked==false && document.form.tipo_cirugia[1].checked==false){
alert("ESCOJE UNA");
return false;}
}
</script>
<body>
<form name="form" method="post" onsubmit="return valida();">
 <td class="its_txt"><div align="left">
<input name="tipo_cirugia"type="radio" value="Bypass G&aacute;strico" />
 Bypass G&aacute;strico </div></td>
<td class="its_txt"><input name="tipo_cirugia" type="radio" value="Banda ajustable " />
 Banda ajustable </td>
 </tr>
<tr>
  <td colspan="2" class="formu_txt_2"><div align="center">Oftalmolog&iacute;a</div></td>
 </tr>
<tr>
   <td colspan="2" class="its_txt"><p align="left">
<input name="tipo_cirugia" type="checkbox" class="editBox" id="cirugia_ofta" value="WAVEFRONT cirug&iacute;a Refractiva" />
            <a href="javascript:Popp('esp_health2.htm#ojos','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=400')">WAVEFRONT cirug&iacute;a Refractiva </a> </p></td>
            <input type="submit" name="enviar">
</body>

mira ya probe todo este codigo y funciona perfecto lapregunta es si en el codigo javascript tendiraq oner lacantidad decampos q deseo q parezcan es decir si en vez detres son 10

rol2007 · #11 (**permalink**) 05/02/2008, 15:10

ahi usas algo ke recien me paso ami

se supone que tus check box se llaman todos iguales tipo_cirugia entoces utilizas un for
eso si tienes que saber la cantidad total de checkbox que utilizaras
y haces

Código PHP:

      for(i=0;i<document.form.VARIABLE_CANTIDAD_VALORES.value;i++){
 
        if(!document.form.['tipo_cirugia'+i] .checked){
               alert("ESCOJE UNA");
               return false;}
      }

niltza · #12 (**permalink**) 05/02/2008, 15:15

en VARIABLE_CANTIDAD_VALORES iria el numero de cantidad de opciones....................

rol2007 · #13 (**permalink**) 05/02/2008, 15:15

si le pones numero directo seria asi

for(i=0;i<10;i++){

sino

for(i=0;i<document.form.VARIABLE_CANTIDAD_VALORES. value;i++){

siendo VARIABLE_CANTIDAD_VALORES una variable que extraes de algun input

niltza · #14 (**permalink**) 05/02/2008, 15:28

mira ya lo intente con todo completo y no me sale nose q estoy haciendo mal te voy a poner tooodo el codigo y tu me colaboras porfa nose te repito q estoy haciendo mal lo otro es q tengo que pasar los campos q seleccione a la pagina siguiente ya q debo arrastrar los campos seleccionados hasta la ultima pagina por eso habia puesto asi "tipo_cirugia[]" para qcoja toda la palabra sino nome coje sino la primera letra

Código HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>.:COLOMBIA TOURS SOLUTIONS:. Intelligence Tours Solutions.:.</title>
<script language="JavaScript" type="text/JavaScript">
function Popupp(theURL,winName,features) { //v2.0
//window.open(theURL,'car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=410,height=335');
}
function Popp(theURL,winName,features) { //v2.0
//window.open(theURL,winName,features);
}
function validar(form) 
{    form.submit(); 
  
} 
</script>

<script>
function valida(){
for(i=0;i<19;i++){
 
        if(!document.formulario.['tipo_cirugia'+i] .checked){
               alert("ESCOJE UNA");
               return false;}
      }  
}
</script>

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style></head>

<body>
<div align="center">
  <table width="630" border="0">
    <tr>
      <td><form name="formulario" action="esp_its2.php" method="POST" onsubmit="return valida();">
        <table width="608" border="0" align="center">
          <tr>
            <td width="239" rowspan="9">Health Tours </td>
            <td colspan="2"><div align="center"><span class="formu_txt_2">Cirug&iacute;a Bari&aacute;trica </span></div></td>
            </tr>
          <tr>
            <td class="its_txt"><div align="left">
              <input name="tipo_cirugia"type="radio" value="Bypass G&aacute;strico" />
              Bypass G&aacute;strico </div></td>
            <td class="its_txt"><input name="tipo_cirugia" type="radio" value="Banda ajustable " />
              Banda ajustable </td>
            </tr>
          <tr>
            <td colspan="2" class="formu_txt_2"><div align="center">Oftalmolog&iacute;a</div></td>
            </tr>
          <tr>
            <td colspan="2" class="its_txt"><p align="left">
                <input name="tipo_cirugia" type="checkbox" class="editBox" id="cirugia_ofta" value="WAVEFRONT cirug&iacute;a Refractiva" />
            <a href="javaScript:Popp('esp_health2.htm#ojos','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=400')">WAVEFRONT cirug&iacute;a Refractiva </a> </p></td>
            </tr>
          <tr>
            <td height="18" colspan="2" class="formu_txt_2"><p align="center">Odontolog&iacute;a</p></td>
            </tr>
          <tr>
            <td colspan="2" class="its_txt"><p align="left">
                <input name="tipo_cirugia" type="checkbox" class="editBox" id="cirugia_odon" value="Odontolog&iacute;a Est&eacute;tica y Odontolog&iacute;a Rob&oacute;tica" />
              Odontolog&iacute;a Est&eacute;tica y Odontolog&iacute;a Rob&oacute;tica<br />
              <input name="tipo_cirugia" type="checkbox" class="editBox" id="cirugia_odon" value="Blanqueaminto Zoom" />
              <a href="javaScript:Popp('esp_health2.htm#odontologia','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=320')">Blanqueaminto Zoom </a><br />
              <input name="tipo_cirugia" type="checkbox" class="editBox" id="cirugia_odon" value="Dise&ntilde;o de sonrisa" />
              <a href="javaScript:Popp('esp_health2.htm#c_14','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=300')">Dise&ntilde;o de sonrisa</a><br />
              <input name="tipo_cirugia" type="checkbox" class="editBox" id="cirugia_odon" value="Implantes dentales" />
              <a href="javaScript:Popp('esp_health2.htm#c_15','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=600')">Implantes dentales </a></p></td>
            </tr>
          <tr>
            <td colspan="2" class="formu_txt_2"><p align="center">Cirug&iacute;as Pl&aacute;sticas </p></td>
            </tr>
          <tr>
            <td width="164" class="its_txt"><p align="left">
                <input name="tipo_cirugia" type="checkbox" class="editBox" id="cirugia_plast" value="Abdominoplastia" />
                <a href="javaScript:Popp('esp_health2.htm#plastica','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=300')">Abdominoplastia </a><br />
                <input name="tipo_cirugia" type="checkbox" class="editBox" id="cirugia_plast" value="Liposucci&oacute;n" />
                <a href="javaScript:Popp('esp_health2.htm#c_05','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=340')">Liposucci&oacute;n</a> <br />
                <input name="tipo_cirugia" type="checkbox" class="editBox" id="cirugia_plast" value="Gluteoplastia" />
                <a href="javaScript:Popp('esp_health2.htm#c_02','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=270')">Gluteoplastia</a><br />
                <input name="tipo_cirugia" type="checkbox" class="editBox" id="its_m_062" value="Lipoescultura" />
                <a href="javaScript:Popp('esp_health2.htm#c_04','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=600')">Lipoescultura</a> <br />
                <input name="tipo_cirugia" type="checkbox" class="editBox" id="its_m_072" value="Vaginoplastia" />
            <a href="javaScript:Popp('esp_health2.htm#c_12','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=300')">Vaginoplastia</a> </p></td>
            <td width="191" class="its_txt"><div align="left">
              <input name="tipo_cirugia" type="checkbox" class="editBox" id="cirugia_plast" value="Blefaroplastia" />
              <a href="javaScript:Popp('esp_health2.htm#c_03','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=260')">Blefaroplastia (P&aacute;rpados</a>) <br />
              <input name="tipo_cirugia" type="checkbox" class="editBox" id="cirugia_plast" value="Mentoplastia" />
              <a href="javaScript:Popp('esp_health2.htm#c_08','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=260')">Mentoplastia</a><br />
              <input name="tipo_cirugia" type="checkbox" class="editBox" id="cirugia_plast" value="Rinoplastia" />
              <a href="javaScript:Popp('esp_health2.htm#c_10','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=250')">Rinoplastia (Nariz) </a><br />
              <input name="tipo_cirugia" type="checkbox" class="editBox" id="cirugia_plast" value="Otoplastia" />
              <a href="javaScript:Popp('esp_health2.htm#c_09','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=310')">Otoplastia (Orejas) </a><br />
              <input name="tipo_cirugia" type="checkbox" class="editBox" id="cirugia_plast" value="Ritidoplastia" />
              <a href="javaScript:Popp('esp_health2.htm#c_11','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=300')">Ritidoplastia</a></div></td>
            </tr>
          <tr>
            <td colspan="2" class="its_txt">
              <div align="left">
                <input name="tipo_cirugia" type="checkbox" class="editBox" id="its_m_022" value="mamoplastia de aumento " />
                <a href="javaScript:Popp('esp_health2.htm#c_06','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=260')">mamoplastia de aumento </a><br />
                <input name="tipo_cirugia" type="checkbox" class="editBox" id="its_m_032" value="mamoplastia de reduccion" />
              <a href="javaScript:Popp('esp_health2.htm#c_07','car','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1,height=275')">mamoplastia de reduccion</a></div></td>
            </tr>
          <tr>
            <td colspan="3"><hr /></td>
            </tr>
          <tr>
            <td colspan="3"><div align="center"><span class="Estilo8">
              <input name="enviar" type="button" id="enviar" onClick="validar(this.form)" value="Siguiente" />
              <input name="borrar" type="reset" id="borrar" value="Borrar" />
            </span></div></td>
            </tr>
        </table>
            </form>
      </td>
    </tr>
  </table>
</div>
</body>

pelu0 · #15 (**permalink**) 05/02/2008, 15:38

hola, primero yo le cambiaria el nombre al campo tipo radio y le pondria uno distinto al del tipo checkbox

yo valido asi :

<input type=checkbox id=tipo_cirugia name=tipo_cirugia[] value='a'>
<input type=checkbox id=tipo_cirugia name=tipo_cirugia[] value='b'>
.....
....

la validacion seria asi

function valida(){

var contador=0;
var frm=document.formulario;
if(frm.tipo_cirugia.length){
for(var i=0; i<frm.tipo_cirugia.length; i++){
if(frm.tipo_cirugia[i].checked){
contador++;
}
}

}else{ //esto es por si existe solo 1
if(frm.tipo_cirugia.checked){
contador++;
}
}

if(contador<1){
alert('Debe seleccionar al menos un checkbox');
return false;
}
else { ... lo que tenga que hacer

saludos

niltza · #16 (**permalink**) 05/02/2008, 15:43

pero no puedo cambiarle el nombre porq todo es de una misma opcion lo unico es q las dosde arriba sino se pueden seleccionar ambas, por eso no lepuedo cambiar el nombre asi q por eso esq necesito ayuda

niltza · #17 (**permalink**) 06/02/2008, 11:56

porfa alguien q me pueda ayudar ya no se q mas hacer