1

estoy haciendo un formulario el cual involucra la elección de género y el ingreso de notas, lo que quiero es, una vez habiendo seleccionado el genero y colocando las notas, al hacerle click en submit este formulario me redireccione a dos páginas distintas dependiendo del género que se eligió (femenino o masculino) antes. Mi código en html es el siguiente:

<div class="container-fluid">
  <form id="form" data-parsley-validate novalidate>
    <div class="row">
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
        <div class="card">
          <h5 class="card-header title-estado">Datos Específicos</h5>
            <div class="bd-example">
              <div id="gender" class="form-group row">
                <label class="col-5 col-lg-5 col-form-label text-left label-style">Género:</label>
                <div class="col-7 col-lg-7">
                  <div>
                    <label class="custom-control custom-radio">
                      <input id="radio1" type="radio" required=""  name="button" class="custom-control-input">
                      <span class="custom-control-label">Femenino</span>
                    </label>
                    <label class="custom-control custom-radio">
                      <input id="radio2" type="radio" required=""  name="button" class="custom-control-input">
                      <span class="custom-control-label">Masculino</span>
                    </label>
                 </div>
              </div>
           </div>
           <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
             <div class="card">
               <h5 class="card-header title-estado">Notas</h5>
               <div class="bd-example">
                 <div class="form-group row">
                   <label for="inputText0" class="col-5 col-lg-5 col-form-label text-left label-style">Matematica:</label>
                   <div class="col-7 col-lg-7">
                     <input id="inputText0" type="number" required="" class="form-control" placeholder="Numbers" min="0" max="20">
                   </div>
                 </div>
                 <div class="form-group row">
                   <label for="inputText1" class="col-5 col-lg-5 col-form-label text-left label-style">Geografia:</label>
                   <div class="col-7 col-lg-7">
                     <input id="inputText1" type="number" required="" class="form-control" placeholder="Numbers" min="0" max="20">
                   </div>
                 </div>
                 <div class="form-group row">
                   <label for="inputText2" class="col-5 col-lg-5 col-form-label text-left label-style">Historia:</label>
                   <div class="col-7 col-lg-7">
                     <input id="inputText2" type="number" required="" class="form-control" placeholder="Numbers" min="0" max="20">
                   </div>
                 </div>
                 <div class="card-body border-top">
                   <button class="btn btn-primary btn-block btn-style" id="btnFormSubmit" type="submit" onclick="recibir(event)">Enviar</button>
                 </div>
               </div>
             </div>
           </div>
         </form>
      </div>

Soy nueva en javascript. A la hora de someter el formulario arroja el promedio de notas, pero me falta que redireccione a una pagina que es para alumnas y otra para alumnos. Mi codigo javascript es:

function recibir(event)
    {
        var list = []
        var matematica_id = document.getElementById('inputText0').value;
        var geografia_id = document.getElementById('inputText1').value;
        var historia_id = document.getElementById('inputText2').value;
        list.push(parseInt(matematica_id));
        list.push(parseInt(geografia_id));
        list.push(parseInt(historia_id));

        var suma = 0;
        var cantidad = 0;

        for(var i=0;i<list.length;i++){
            suma = suma + list[i];
            cantidad += 1

        }
        promedio = suma/cantidad;
        localStorage.setItem('promedio',promedio);

Las páginas a las quiero me que redireccione son para alumnas: "alumnas.html" y alumnos: "alumnos.html"

Gracias por adelanto

2
  • ¿Podrías añadir la función redirect(), la que llamas en el action del formulario?
    – zeross
    el 20 sep. 2019 a las 16:33
  • Ya intente colocar el redirect() pero no funcionó.
    – Sie. Theos
    el 20 sep. 2019 a las 16:42

2 respuestas 2

2

Recuerda usar el event.preventDefault para prevenir que el evento del form se dispare, y así metas tu evento para redirigirte a la pagina que quieras, solo necesitas validar el radio button que este seleccionado para decidir a donde dirigirte:

function recibir(event)
    {
    	event.preventDefault();
        var list = []
        var matematica_id = document.getElementById('inputText0').value;
        var geografia_id = document.getElementById('inputText1').value;
        var historia_id = document.getElementById('inputText2').value;
        list.push(parseInt(matematica_id));
        list.push(parseInt(geografia_id));
        list.push(parseInt(historia_id));

        var suma = 0;
        var cantidad = 0;

        for(var i=0;i<list.length;i++){
            suma = suma + list[i];
            cantidad += 1

        }
        promedio = suma/cantidad;
        localStorage.setItem('promedio',promedio);
        
        if(document.getElementById('radio1').checked == true) { 
        	location.replace("alumnas.html")
        } else if(document.getElementById('radio2').checked == true) { 
        	location.replace("alumnos.html")
        }
   }
<div class="container-fluid">
  <form id="form" data-parsley-validate novalidate >
    <div class="row">
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
        <div class="card">
          <h5 class="card-header title-estado">Datos Específicos</h5>
            <div class="bd-example">
              <div id="gender" class="form-group row">
                <label class="col-5 col-lg-5 col-form-label text-left label-style">Género:</label>
                <div class="col-7 col-lg-7">
                  <div>
                    <label class="custom-control custom-radio">
                      <input id="radio1" type="radio" required=""  name="button" class="custom-control-input">
                      <span class="custom-control-label">Femenino</span>
                    </label>
                    <label class="custom-control custom-radio">
                      <input id="radio2" type="radio" required=""  name="button" class="custom-control-input">
                      <span class="custom-control-label">Masculino</span>
                    </label>
                 </div>
              </div>
           </div>
           <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
             <div class="card">
               <h5 class="card-header title-estado">Notas</h5>
               <div class="bd-example">
                 <div class="form-group row">
                   <label for="inputText0" class="col-5 col-lg-5 col-form-label text-left label-style">Matematica:</label>
                   <div class="col-7 col-lg-7">
                     <input id="inputText0" type="number" required="" class="form-control" placeholder="Numbers" min="0" max="20">
                   </div>
                 </div>
                 <div class="form-group row">
                   <label for="inputText1" class="col-5 col-lg-5 col-form-label text-left label-style">Geografia:</label>
                   <div class="col-7 col-lg-7">
                     <input id="inputText1" type="number" required="" class="form-control" placeholder="Numbers" min="0" max="20">
                   </div>
                 </div>
                 <div class="form-group row">
                   <label for="inputText2" class="col-5 col-lg-5 col-form-label text-left label-style">Historia:</label>
                   <div class="col-7 col-lg-7">
                     <input id="inputText2" type="number" required="" class="form-control" placeholder="Numbers" min="0" max="20">
                   </div>
                 </div>
                 <div class="card-body border-top">
                   <button class="btn btn-primary btn-block btn-style" id="btnFormSubmit" type="submit" onclick="recibir(event)">Enviar</button>
                 </div>
               </div>
             </div>
           </div>
         </form>
      </div>

3
  • También intenté tu codigo, pero nada solo en el http sale button=on, es decir cuando hago click en el boton envar del formulario( /home/..../index.html) me lleva a la misma página index.html y no de alumno.html o alumna.html.
    – Sie. Theos
    el 20 sep. 2019 a las 19:49
  • Prueba utilizando window.location.href = "alumnas.html"; el 20 sep. 2019 a las 21:40
  • Al final puse el event.preventDefault() antes de el corchete de la función y corria excelente. Muchas gracias por la sugerencia.
    – Sie. Theos
    el 20 sep. 2019 a las 23:05
0

Mi primera tentacion a sido usar jquery, pero supongo que solo quieres usuar javascrip.

Esta es mi propuesta, seguro que puede mejorarse, agradezco comentarios.

Basicamente, cambio el action del form cuando se produce un onchange en los radiobuton.

function change(dir) {
    document.getElementById("forid").action = dir;
}
function mostrar() {
  console.log(document.getElementById("forid").action);

}
<form id="forid" action="##">
    <input type="radio" name="g" onchange="change('https://www.w3schools.com')" value="male"> Male<br>
    <input type="radio" name="g" onchange="change('https://duckduckgo.com/')" value="female"> Female<br>
    <input type="radio" name="g" onchange="change('https://yandex.com')" value="other"> Other
    <input type="submit">
</form>
<div id="mosta"  onclick="mostrar()">Pincha para mostrar action de form</div>

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.