Condicion en boton radio

alfadaemon · #1 (**permalink**) 23/02/2013, 16:31

Hola a todos los maquinas del forosdelweb.
Estoy aprendiendo javascript y tengo un problema.
Os comento.
Tengo un formulario con 3 input tipo radio y al lado de este input tipo radio hay un input tipo text para rellenar dependiendo del radio marcadado.
Os pongo aqui el formulario:

Código HTML:

<html>
<head><title>Formulario Prueba</title></head>
<body>
<form name="form_prueba" action="datos.php" method="Post">
<fieldset>
<legend>¿CÓMO DESEA RECIBIR EL PRESUPUESTO?</legend>
<div>
<table>
<tr>
<td class="td-class3">
<input name="f_envio" type="radio" value="CORREO" class="texto" id="id1"/> Por correo ordinario. <strong>Dirección</strong>
</td>
</tr>
<tr>
<td>
<input name="e_direccion" type="text" class="texto" id="e_direccion" size="25" maxlength="25" />
</td>
</tr>
<tr>
<td class="td-class3">
<input name="f_envio" type="radio" value="EMAIL" class="texto" checked id="id2" /> Por correo electrónico. <strong>Email</strong>
</td>
</tr>
<tr>
<td>
<input name="e_email" type="text" class="texto" id="e_email" size="25" maxlength="25" />
</td>
<tr>
<td class="td-class3">
<input name="f_envio" type="radio" value="DESPACHO" class="texto"> Solicitando cita en el despacho de la administración.
</td>
</tr>
</table>
</div>
</fieldset>
<div>
<input type="submit" id="enviar" class="fade" name="enviar" value="Enviar" />
</div>
</form>
</body>
</html>

Lo que quiero es que antes de enviar el formulario, éste, se valide si el dato del input tipo text fue rellenado pero dependiendo del radio marcado.
Ej:. Si marco el radio email "Que quiero recibir el presupuesto por email", que me lleve al input tipo text para rellenarlo con el email y si se me olvida rellenarlo al enviar el formulario que aparezca un mensaje "DEBES RELLENAR EL CAMPO EMAIL".
Alguien me puede ayudar con este reto?
Gracias de antemano.

emprear · #2 (**permalink**) 23/02/2013, 17:08

Fijate de intentar algo y luego lo evaluamos

SAludos

alfadaemon · #3 (**permalink**) 23/02/2013, 20:42

Cita:

Iniciado por emprear

Fijate de intentar algo y luego lo evaluamos

SAludos

OK.
Mira puse un código para que al hacer click en el input tipo radio me llevase al input tipo text correspondiente y que los demas inputs tipo text se deshabilatasen.
El siguiente código lo puse en el HEAD.

Código HTML:

<script>
	function habilita(){
		if(document.form_prueba.e_direccion.disabled == true) {
				document.form_prueba.e_direccion.disabled = false;
				document.form_prueba.e_email.disabled = true;
		     } 
		}
		function habilita2(){
		if(document.form_prueba.e_email.disabled == true) {
				document.form_prueba.e_direccion.disabled = true;
				document.form_prueba.e_email.disabled = false;
		     } 
		}

</script>

Y en el BODY puse eso.

Código HTML:

<input name="f_envio" type="radio" value="CORREO" class="texto" onClick="habilita()" /> Por correo ordinario. <strong>Dirección</strong>
<input name="e_direccion" type="text" class="texto" id="uno" size="25" maxlength="25" disabled />

<input name="f_envio" type="radio" value="EMAIL" class="texto" checked  onClick="habilita2()" /> Por correo electrónico. <strong>Email</strong>

Pero ahora me falta hacer la validación:
Que si el input tipo radio (POR EJEMPLO: EMAIL) está checkeado y el input tipo text (EMAIL) está vacio que se ponga en rojo el input tipo text o que me muestre un mensaje o algo asi.
Alguien me puede ayudar?

emprear · #4 (**permalink**) 23/02/2013, 22:28

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script>
    function habilita(){
    document.form_prueba.e_direccion.disabled = false;
    document.form_prueba.e_email.disabled = true;
    }
    function habilita2(){
    document.form_prueba.e_direccion.disabled = true;
    document.form_prueba.e_email.disabled = false;
    }
 
function validar(){
var radios = document.getElementsByName('f_envio');
    for (var i=0; i < document.form_prueba.f_envio.length; i++){
        if (document.form_prueba.f_envio[i].checked){
        var rad_val = document.form_prueba.f_envio[i].value;
            if(rad_val == "CORREO"){
                if(document.form_prueba.e_direccion.value == ""){
                alert('Debes completar el campo correo');
                return false;
                }
            }
            if(rad_val == "EMAIL"){
                if(document.form_prueba.e_email.value == ""){
                alert('Debes completar el campo email');
                return false;
                }
            }
        }
    }
}
 
</script> 
</head>
<body>
<form name="form_prueba" onsubmit="return validar();">
<input name="f_envio" type="radio" value="CORREO" class="texto" onClick="habilita()" /> Por correo ordinario. <strong>Dirección</strong>
<input name="e_direccion" type="text" class="texto" id="e_direccion" size="25" maxlength="25" disabled />
<input name="f_envio" type="radio" value="EMAIL" class="texto"  onClick="habilita2()" /> Por correo electrónico. <strong>Email</strong> 
<input name="e_email" type="text" class="texto" id="e_email" size="25" maxlength="25" disabled />
<input type="submit" />
</form>
</body>
</html>

Observaciones, en tu código sobran los condicionales y el checked
Te falta un input text para email
Ahora tendrías que averiguar como hacerle un trim a los campos de texto y desde ya, cualquier validación que hagas solo con javascript sin hacerla también en el server, es completamente ineficaz

Saludos