Foros del Web » Programando para Internet » Javascript »

Validacion de checkbox y boton de borrar

Estas en el tema de Validacion de checkbox y boton de borrar en el foro de Javascript en Foros del Web. Hola a todos tengo el siguiente problema espero me puedan ayudar con ello, tengo un formulario el cual es una encuesta en ella tengo que ...
  #1 (permalink)  
Antiguo 04/07/2011, 11:10
 
Fecha de Ingreso: julio-2010
Mensajes: 19
Antigüedad: 13 años, 9 meses
Puntos: 1
Validacion de checkbox y boton de borrar

Hola a todos tengo el siguiente problema espero me puedan ayudar con ello, tengo un formulario el cual es una encuesta en ella tengo que seleccionar alguna opcion de los radios para que me envie el formulario esta parte ya la tengo resuelta, en dos preguntas si seleccionas una opcion se abre una capa oculta con unas opciones en checkbox esta es la parte que quiero verificar ya que la persona presiona el boton enviar sin que haya seleccionado alguna opcion del checkbox me la envia vacias y eso es lo que quiero evitar que al menos una opcion este marcada, asu vez cuando el se selecciona el boton borrar me borra los campos seleccionados pero si tengo activada alguna de las capas ocultas me las deja visibles y lo que me gustaria hacer es que todo regrese como al principio, les dejo el codigo y las funciones que estoy utilizando así como la instruccion de validar los checkbox que uso gracias por la atencion prestada.

encuesta:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type='text/javascript' src='formexp.js'></script>
<script>
function expandir_formulario(){
if (document.f1.p_1_1.checked){
xDisplay('capaexpansion', 'block')
}else{
xDisplay('capaexpansion', 'none')
}

}
function ocultar_formulario(){
if (document.f1.p_1_0.checked){
xDisplay('capaexpansion', 'none')
}else{
xDisplay('capaexpansion', 'block')
}

}
function expandir_formulario2(){
if (document.f1.p_4_1.checked){
xDisplay('capaexpansion2', 'block')
}else{
xDisplay('capaexpansion2', 'none')
}

}
function ocultar_formulario2(){
if (document.f1.p_4_0.checked){
xDisplay('capaexpansion2', 'none')
}else{
xDisplay('capaexpansion2', 'block')
}

}
var MensajeDeError="Por favor contesta todas las preguntas!"
function validar(f){
marcado=false;
var nombre;
for(a=0;a<f.elements.length;a++){
if(f[a].type=="radio"){
if(nombre!=f[a].name){
nombre=f[a].name;
for(aa=0;f[a+aa].name==f[a].name;aa++){
if(f[a+aa].checked){marcado=true};
}
if(marcado==false){alert(MensajeDeError);return false;}

}
marcado=false;
}

}
}


</script>

<style type="text/css">
#capaexpansion { position:relative;
display:none;
}
#capaexpansion2 { position:relative;
display:none;
}
-->
</style>
</head>

<body>
<form id="f1" name="f1" method="post" action="javascript:alert('Enviado!')" onsubmit="return validar(this)">
<p><span class="texto">1. pregunta1</span><br />
<br />
<label>
<input type="radio" name="p_1" value="SI" id="p_1_0" onclick="ocultar_formulario()" />
<span class="opciones"> SI</span></label>
<span class="opciones"><br />
<label>
<input type="radio" name="p_1" value="NO" id="p_1_1" onclick="expandir_formulario()" />
NO</label>
</span> </p>
<div id="capaexpansion">
<table width="605" border="0" cellpadding="2" cellspacing="2" class="opciones">
<tr>
<td width="44">&nbsp;</td>
<td width="525">si contestas que NO, ¿Porque?</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><p>
<label>
<input type="checkbox" name="no_1" value="SI" id="no_1_0" />
opcion1</label>
<br />
<label>
<input type="checkbox" name="no_1" value="SI" id="no_1_1" />
opcion2</label>
<br />
<label>
<input type="checkbox" name="no_1" value="SI" id="no_1_2" />
opcion3</label>
<br />
<label>
<input type="checkbox" name="no_1" value="SI" id="no_1_3" />
opcion4</label>
<br />
<label>
<input type="checkbox" name="no_1" value="SI" id="no_1_4" />
opcion5</label>
<br />
<label>
<input type="checkbox" name="no_1" value="SI" id="no_1_5" />
opcion6</label>
<br />
<label>
<input type="checkbox" name="no_1" value="SI" id="no_1_6" />
Otro</label>
<label>
<input name="otro_2" type="text" id="otro_2" size="60" />
</label>
<br />
</p></td>
</tr>
</table>
</div>
</p>
<span class="texto">2. pregunta 2</span><span class="texto"></span><br />
<p>
<label>
<input type="radio" name="p_2" value="SI" id="p_2_0" />
<span class="opciones">SI</span></label>
<span class="opciones"><br />
<label>
<input type="radio" name="p_2" value="NO" id="p_2_1" />
NO</label>
</span>
<label></label>
<br />
<br />
<span class="texto">3. pregunta 3</span></p>
<p>
<label>
<input type="radio" name="p_3" value="SI" id="p_3_0" />
<span class="opciones">SI</span></label>
<span class="opciones"><br />
<label>
<input type="radio" name="p_3" value="NO" id="p_3_1" />
NO</label>
<br />
</span><br />
<span class="texto">4. pregunta 4</span><br />
</p>
<p>
<label>
<input type="radio" name="p_4" value="NO" id="p_4_0" onclick="ocultar_formulario2()" />
<span class="opciones">NO</span></label>
<span class="opciones"><br />
<label>
<input type="radio" name="p_4" value="SI" id="p_4_1" onclick="expandir_formulario2()" />
SI</label>
</span> </p>
<div id="capaexpansion2">
<table width="574" border="0" cellpadding="2" cellspacing="2" class="opciones">
<tr>
<td width="69">&nbsp;</td>
<td width="428">Si contestas que SI</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><p>
<label>
<input type="checkbox" name="si_4" value="SI" id="si_4_0" />
opcion1</label>
<br />
<label>
<input type="checkbox" name="si_4" value="SI" id="si_4_1" />
opcion2</label>
<br />
<label>
<input type="checkbox" name="si_4" value="SI" id="si_4_2" />
opcion3</label>
<br />
<label>
<input type="checkbox" name="si_4" value="SI" id="si_4_3" />
opcion4</label>
<br />
<label>
<input type="checkbox" name="si_4" value="SI" id="si_4_4" />
opcion5</label>
<br />
<label>
<input type="checkbox" name="si_4" value="SI" id="si_4_5" />
opcion6</label>
<br />
<label>
<input type="checkbox" name="si_4" value="SI" id="si_4_6" />
opcion7</label>
<br />
</p></td>
</tr>
</table>
</div>
<span class="texto">
</p>
5. pregunta 5</span><br />
<br />
<label>
<input name="p_5" type="text" id="p_5" size="70" />
</label>
<p><span class="texto">6.pregunta 6 </span><br />
</p>
<p>
<label>
<input type="radio" name="p_6" value="SI" id="p_6_0" />
<span class="opciones">SI</span></label>
<span class="opciones"><br />
<label>
<input type="radio" name="p_6" value="NO" id="p_6_1" />
NO</label>
<br />
</span></p>
<p><span class="texto">7. pregunta 7</span></p>
<p>
<label>
<input type="radio" name="p_7" value="SI" id="p_7_0" />
<span class="opciones">SI</span></label>
<span class="opciones"><br />
<label>
<input type="radio" name="p_7" value="NO" id="p_7_1" />
NO</label>
<br />
</span></p>
<table width="600" border="0" align="left" cellpadding="0" cellspacing="10">
<tr>
<td width="464" align="right"><label>
<input name="button" type="submit" class="boton" id="button" value="ENVIAR" />
</label></td>
<td width="136"><label>
<input name="button2" type="reset" class="boton" id="button2" value="BORRAR" />
</label></td>
</tr>
</table>
<p><br />
</p>
</form>
</body>
</html>

validacion de checkbox

<script>
function validar(esto){
valido=false;
for(a=0;a<esto.elements.length;a++){
if(esto[a].type=="checkbox" && esto[a].checked==true){
valido=true;
break
}

}
if(!valido){
alert("Chequee una casilla!");return false
}

}


</script>

Etiquetas: borrar, checkbox, botones
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




La zona horaria es GMT -6. Ahora son las 18:10.