1

Estoy en el desarrollo de un formulario y quiero saber como hago para ir a una u otra pagina, según la opción elegida en un radio button, hasta el momento tengo el siguiente formulario con dos radio button:

.sh_k .sh_sl {
    background-color: #edf7f8;
    color: #282828;
    font-size: 14px;
    margin-bottom: 20px;
    padding: 20px;
}

.sh_k .sh_sn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.sh_k .sh_st {
    padding: 0 20px;
    width: 60%;
}

.sh_k .sh_sz {
    width: 100%;
}

.sh_u9 {
    width: 100%!important;
}

.sh_cq {
    font-size: 16px!important;
    margin-bottom: 10px;
}

.bpv_cq {
    display: inline-block;
    font-family: Lettera Text Std;
    margin: 0;
    padding: 0;
}

h5.bpv_cq {
    font-size: 14px;
    font-weight: 700;
}

.sh_vm {
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.bpv_cq.bpv_bpx {
    color: #282828;
}

.sh_qj:last-child {
    margin-right: 0;
}

.sh_qj {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.sh_vb {
    width: 50%!important;
}

.sh_un {
    margin-top: 20px!important;
    width: 31%;
}

.b3n_ag9 .b3n_lq {
    border: 2px solid #0c3970;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin: 0 10px 0 0;
    position: relative;
    transition: border-color .2s ease;
    vertical-align: middle;
    width: 20px;
}

.b3n_ag9 label {
    cursor: pointer;
}

.b3n_ag9 span {
    color: #3b3f3b;
    letter-spacing: 1px;
    vertical-align: middle;
}

.b3n_ag9 input {
    appearance: none;
}

.b3n_ag9 .b3n_lq.b3n_lk:before {
    opacity: 1;
    transform: scale(1);
}
.b3n_ag9 .b3n_lq:before {
    background-color: #63666A;
    border-radius: 50%;
    color: #63666A;
    content: "";
    display: block;
    height: 12px;
    opacity: 0;
    position: absolute;
    right: 2px;
    top: 2px;
    transform: scale(0);
    transition: opacity .2s ease,transform .2s ease;
    width: 12px;
}

.b3n_ag9 .b3n_lq.b3n_lk, .b3n_ag9 .b3n_lq:hover {
    border-color: #63666A;
}

.b3n_ag9 input:checked:after {
    content: ' ';
    width: 12px;
    height: 12px;
    border-radius: 50px;
    position: absolute;
    background: blue;
  top: 2px;
    left: 2px;
    font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<section class="content">
 <div class="box">
<div class="box-body">
<form class="sh_k" id="form">
              <div class="sh_sn">
                  <div class="sh_u9">
                      <h5 class="sh_cq bpv_cq bpv_bpx">
                        <span class="bpv_bpz">
                            Seleccione una opción
                        </span>
                      </h5>
                  </div>
                  <div class="sh_qj sh_vm sh_vb">
                      <div class="sh_un b3n_ag9">
                        <label for="dnaelaboracion">
                            <div id="elaboracion-radio" class="b3n_lq">                                    
                               <input name="dna" id="dnaelaboracion" type="radio" value="elaboracion"> 
                            </div>
                            <span>Elaboración</span>                                      
                        </label>
                      </div>
                      <div class="sh_un b3n_ag9">
                        <label for="dnarevision">
                            <div id="revision-radio" class="b3n_lq">
                                <input name="dna" id="dnarevision" type="radio" value="revision"> 
                            </div>
                            <span>Revision</span>
                      </label>
                      </div>
                  </div>
              </div> 
              <div class="sh_p0 sh_wl">
                  <button id="submit" type="submit" class="lu_g5 lu_l2">Siguiente</button>
              </div>         
          </form>
              </div>  
                 </div>  

 </section>
  </div>  
  
  </body>
  
  </html>

Lo quiero lograr es lo siguiente:

Si selecciono Elaboracion, que vaya a elaboracion.html, si selecciono Revision que vaya a revision.html después de presionar el botón siguiente.

Espero que alguien pueda darme una orientación para completar este formulario.

3
  • Que usarás ?? PHP, javascript ??? Que has intentado para obtener dichos datos ?
    – Excorpion
    Commented el 23 jul. 2021 a las 20:01
  • En un futuro tendré que usar PHP para gestionar el backend del formulario, actualmente uso javascript para algunas cosas
    – John Doe
    Commented el 23 jul. 2021 a las 20:04
  • Puede que esto te ayude: stackoverflow.com/questions/15043117/…
    – Edgar Gc
    Commented el 23 jul. 2021 a las 21:06

4 respuestas 4

1

Asigna el evento change a los campos tipo radio, ahí tomas el valor para crear la URL y asignarla como acción del formulario. Adicionalmente, te recomiendo que el botón este deshabilitado hasta que se haya seleccionado una opción.

// Escuchar cambio en los input radio
$('#form input[type="radio"]').on('change', function() {
    // $(this) es el radio que disparó el evento
    // Se toma el valor para crear la URL
    let url = $(this).val() + '.html';
    // Asignar URL al atributo action del formulario
    $('#form').attr('action', url);
    // Habilitar botón
    $('#submit').attr('disabled', false);
});

// Esto es solo para comprobar el funcionamiento
$('#form').on('submit', function(e) {
    e.preventDefault();
    console.log($(this).attr('action'));
});
.sh_k .sh_sl {
    background-color: #edf7f8;
    color: #282828;
    font-size: 14px;
    margin-bottom: 20px;
    padding: 20px;
}

.sh_k .sh_sn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.sh_k .sh_st {
    padding: 0 20px;
    width: 60%;
}

.sh_k .sh_sz {
    width: 100%;
}

.sh_u9 {
    width: 100%!important;
}

.sh_cq {
    font-size: 16px!important;
    margin-bottom: 10px;
}

.bpv_cq {
    display: inline-block;
    font-family: Lettera Text Std;
    margin: 0;
    padding: 0;
}

h5.bpv_cq {
    font-size: 14px;
    font-weight: 700;
}

.sh_vm {
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.bpv_cq.bpv_bpx {
    color: #282828;
}

.sh_qj:last-child {
    margin-right: 0;
}

.sh_qj {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.sh_vb {
    width: 50%!important;
}

.sh_un {
    margin-top: 20px!important;
    width: 31%;
}

.b3n_ag9 .b3n_lq {
    border: 2px solid #0c3970;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin: 0 10px 0 0;
    position: relative;
    transition: border-color .2s ease;
    vertical-align: middle;
    width: 20px;
}

.b3n_ag9 label {
    cursor: pointer;
}

.b3n_ag9 span {
    color: #3b3f3b;
    letter-spacing: 1px;
    vertical-align: middle;
}

.b3n_ag9 input {
    appearance: none;
}

.b3n_ag9 .b3n_lq.b3n_lk:before {
    opacity: 1;
    transform: scale(1);
}
.b3n_ag9 .b3n_lq:before {
    background-color: #63666A;
    border-radius: 50%;
    color: #63666A;
    content: "";
    display: block;
    height: 12px;
    opacity: 0;
    position: absolute;
    right: 2px;
    top: 2px;
    transform: scale(0);
    transition: opacity .2s ease,transform .2s ease;
    width: 12px;
}

.b3n_ag9 .b3n_lq.b3n_lk, .b3n_ag9 .b3n_lq:hover {
    border-color: #63666A;
}

.b3n_ag9 input:checked:after {
    content: ' ';
    width: 12px;
    height: 12px;
    border-radius: 50px;
    position: absolute;
    background: blue;
  top: 2px;
    left: 2px;
    font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<section class="content">
 <div class="box">
<div class="box-body">
<form class="sh_k" id="form">
              <div class="sh_sn">
                  <div class="sh_u9">
                      <h5 class="sh_cq bpv_cq bpv_bpx">
                        <span class="bpv_bpz">
                            Seleccione una opción
                        </span>
                      </h5>
                  </div>
                  <div class="sh_qj sh_vm sh_vb">
                      <div class="sh_un b3n_ag9">
                        <label for="dnaelaboracion">
                            <div id="elaboracion-radio" class="b3n_lq">                                    
                               <input name="dna" id="dnaelaboracion" type="radio" value="elaboracion"> 
                            </div>
                            <span>Elaboración</span>                                      
                        </label>
                      </div>
                      <div class="sh_un b3n_ag9">
                        <label for="dnarevision">
                            <div id="revision-radio" class="b3n_lq">
                                <input name="dna" id="dnarevision" type="radio" value="revision"> 
                            </div>
                            <span>Revision</span>
                      </label>
                      </div>
                  </div>
              </div> 
              <div class="sh_p0 sh_wl">
                  <button id="submit" type="submit" class="lu_g5 lu_l2" disabled>Siguiente</button>
              </div>         
          </form>
              </div>  
                 </div>  

 </section>
  </div>  
  
  </body>
  
  </html>

Desconozco tu proyecto, pero creo que sería mejor usar solo un par de enlaces o botones para ir directamente a la página que corresponda, entendiendo que, en cuanto a la experiencia del usuario, un solo clic es más sencillo que dos.

5
  • Tu respuesta parece funcionar, me queda duda en donde se le especifica la url a la que quiere ir dependiendo del valor que seleccione en el radio button ?
    – John Doe
    Commented el 23 jul. 2021 a las 21:17
  • @JohnDoe, cada radio tiene un valor y es el que se usa para armar la URL de destino, por ejemplo, al seleccionar <input name="dna" id="dnaelaboracion" type="radio" value="elaboracion"> la URL va a ser elaboracion.html
    – Triby
    Commented el 23 jul. 2021 a las 22:22
  • Entiendo, y en caso de que no sea una pagina en especifico si no la ruta de una pagina en mi proyecto, como la puedo agregar ?
    – John Doe
    Commented el 23 jul. 2021 a las 22:26
  • @JohnDoe, no tengo idea, porque desconozco tu proyecto. Aunque podría ser <input name="nombre-radio" type="radio" value="ruta/pagina"> y, en Javascript, eliminar la parte donde se agrega la extensión .html
    – Triby
    Commented el 23 jul. 2021 a las 23:13
  • Excelente respuesta, clara y concisa
    – John Doe
    Commented el 26 jul. 2021 a las 15:56
1

El tag form hace un request POST que debe ser recibido por un servidor. No se puede hacer lo que buscás sin un backend en PHP, Java, Node u otro, salvo que manipules el form y sus elementos con javascript, pero eso es otra cosa.

10
  • Puedes aportar un ejemplo basado en mi pregunta para darle validez a tu respuesta ?
    – John Doe
    Commented el 23 jul. 2021 a las 20:09
  • Si. Tenés que leer el valor del radio-button y usando window.location cambiás de página a otro html (que debe estar en un servidor). Otra cosa más simple es agregar a tu página dos divs, cada cual con el contenido de un html, y los ocultás (display: hidden) o mostrás (display:block|inline-block|flex según tu necesidad) según el valor del radio button. Commented el 23 jul. 2021 a las 20:13
  • Puedes aportar un ejemplo en base a tu comentario pero también basado en mi pregunta para darle validez a tu respuesta ?
    – John Doe
    Commented el 23 jul. 2021 a las 20:14
  • "Puedes aportar un ejemplo basado en mi pregunta para darle validez a tu respuesta ?" Mi respuesta es válida sin ejemplo. Y no, prefiero enseñar a pescar antes que dar pescado. Commented el 23 jul. 2021 a las 20:14
  • Encaralo y te lo corrijo si querés, o cunsultame, pero lo tenés que hacer vos, así se aprende :) Commented el 23 jul. 2021 a las 20:17
0

Veo que estás utilizando Bootstrap, entonces, para hacer uso de esa increible librería te puedo proporcionar un ejemplo de lo que se llama "Navs and Tabs".

Nota: El siguiente ejemplo es puramente extraído de la documentación oficial.

<h1>Seleccione una opción</h1>
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Revisi&oacuten</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Elaboracion</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Empleo</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>

Es muy útil. Podés seguir consultando en:

Docs

EDIT 1:

Esto te puede ayudar a que se pueda mostrar los distintos sectores de la página sin necesidad de recargar o de anular el comportamiento de un formulario como el método preventDefault() de JS.

1
  • Esta respuesta puede funcionar pero en mi caso no, porque implicaría reestructurar todo el formulario, además lo que busco es que se seleccione el radio button y después de dar click en el botón siguiente que se encuentra en la parte inferior se redireccione a la pagina indicada.
    – John Doe
    Commented el 23 jul. 2021 a las 20:29
0

Puedes poner un EventListener en el boton, de forma que cuando el usuario de clic en el boton se ejecute alguna funcion o bloque de codigo que realice determinada accion, si consideras que tus radio buttons ya tienen en el "value" el nombre del archivo html al que quieres redirigir, puedes en este bloque de codigo o funcion cambiar la URL, cabe destacar que la opcion utilizada aqui es window.location.href pero puede cambiar segun tu preferencia o uso (por ejemplo si estas utilizando algun router en el front-end)

<html>
 <!DOCTYPE html>
 <!-- Latest compiled and minified CSS -->
 <link
   rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
   integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
   crossorigin="anonymous"
 />

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
 <!-- Optional theme -->
 <link
   rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
   integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
   crossorigin="anonymous"
 />

 <!-- Latest compiled and minified JavaScript -->
 <script
   src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
   integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
   crossorigin="anonymous"
 ></script>

 <body class="hold-transition skin-blue sidebar-mini">
   <div class="wrapper">
     <section class="content">
       <div class="box">
         <div class="box-body">
           <form class="sh_k" id="form">
             <div class="sh_sn">
               <div class="sh_u9">
                 <h5 class="sh_cq bpv_cq bpv_bpx">
                   <span class="bpv_bpz"> Seleccione una opción </span>
                 </h5>
               </div>
               <div class="sh_qj sh_vm sh_vb">
                 <div class="sh_un b3n_ag9">
                   <label for="dnaelaboracion">
                     <div id="elaboracion-radio" class="b3n_lq">
                       <input
                         name="dna"
                         id="dnaelaboracion"
                         class="radio__url"
                         type="radio"
                         value="elaboracion"
                       />
                     </div>
                     <span>Elaboración</span>
                   </label>
                 </div>
                 <div class="sh_un b3n_ag9">
                   <label for="dnarevision">
                     <div id="revision-radio" class="b3n_lq">
                       <input
                         name="dna"
                         class="radio__url"
                         id="dnarevision"
                         type="radio"
                         value="revision"
                       />
                     </div>
                     <span>Revision</span>
                   </label>
                 </div>
               </div>
             </div>
             <div class="sh_p0 sh_wl">
               <button id="submit" type="button" class="lu_g5 lu_l2">
                 Siguiente
               </button>
             </div>
           </form>
         </div>
       </div>
     </section>
   </div>
 </body>

 <!-- Codigo nuevo -->
 <script>
   // Creamos un EventListener sobre el boton, cuando el usuario de clic en el boton ejecutaremos el bloque de codigo debajo
   document.getElementById("submit").addEventListener("click", function () {
     //Obtenemos los radios como una HTMLCollection
     let radios = document.getElementsByName("dna");
     //Con ayuda de un ciclo for iteramos sobre la HTMLCollection
     for (var i = 0, length = radios.length; i < length; i++) {
       //Verificamos cada uno de los elementos de la HTMLCollection, si el radio esta seleccionado entonces entramos en la sentencia de control
       if (radios[i].checked) {
         //Modificamos la url basado en el valor del radio, concatenamos este valor con la terminacion .html
         window.location.href = `${radios[i].value}.html`;

         break;
       }
     }
   });
 </script>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.