Foros del Web » Creando para Internet » HTML »

Hacer obligatorio input segun radiobutton

Estas en el tema de Hacer obligatorio input segun radiobutton en el foro de HTML en Foros del Web. Hola amigos, espero y me puedan ayudar a esto: Estoy haciendo un formulario con los campos obligatorios con required, hasta ahi todo bien, pero lo ...
  #1 (permalink)  
Antiguo 03/12/2014, 12:55
 
Fecha de Ingreso: febrero-2011
Mensajes: 195
Antigüedad: 13 años, 9 meses
Puntos: 1
Hacer obligatorio input segun radiobutton

Hola amigos, espero y me puedan ayudar a esto:

Estoy haciendo un formulario con los campos obligatorios con required, hasta ahi todo bien, pero lo que necesito es lo siguiente.

En el formulario tener dos radiobuttons (radio1 y radio2), y 6 campos de texto (campo1, campo2, campo3, campo4, campo5 y campo6), el campo de radiobutton debe de ser obligatorio, y dependiendo de la opcion del radiobutton los campos deben de ser obligatorios. ejemplo:

Si elijo la opcion de radio1 los campos 1,2 y 3 deben de ser obligatorios, en cambio si elijo la opcion de radio2 los campos 4,5 y 6 seran los obligatorios.

Alguien me puede ayudar con este codigo??
  #2 (permalink)  
Antiguo 04/12/2014, 02:03
Avatar de garciasanchezdani  
Fecha de Ingreso: noviembre-2011
Mensajes: 429
Antigüedad: 13 años
Puntos: 51
Respuesta: Hacer obligatorio input segun radiobutton

Hola @andoencombi , utiliza javascript para ello.
Por ejemplo, supongamos que los checkboxs tienen los ids checkbox1 y checkbox2, respectivamente. Podrías hacer algo como:

Código HTML:
Ver original
  1. <input type="text" id="input1"><br>
  2. <input type="text" id="input2" ><br>
  3. <input type="text" id="input3" ><br>
  4. <input type="text" id="input4" ><br>
  5. <input type="text" id="input5" ><br>
  6. <input type="text" id="input6" ><br>
  7. <input type="radio" name="gender" id="checkbox1" value="Uno" />
  8. <br><input type="radio" name="gender" id="checkbox2" value="Dos" />

Código Javascript:
Ver original
  1. $( "#checkbox1" ).on( "click", function(){
  2.    
  3.    
  4.     document.getElementById("input1").required = true;
  5.     document.getElementById("input2").required = true;
  6.     document.getElementById("input3").required = true;
  7.     document.getElementById("input4").required = false;
  8.     document.getElementById("input5").required = false;
  9.     document.getElementById("input6").required = false;
  10. });
  11.  
  12. $( "#checkbox2" ).on( "click", function(){
  13.  
  14.     document.getElementById("input1").required = false;
  15.     document.getElementById("input2").required = false;
  16.     document.getElementById("input3").required = false;
  17.     document.getElementById("input4").required = true;
  18.     document.getElementById("input5").required = true;
  19.     document.getElementById("input6").required = true;
  20. });

Saludos ;)
__________________
Diseño Web Jaén

Etiquetas: html5
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 05:00.