1

Necesito tener 2 o más botones en un FORM y cada uno con una acción diferente, se que esto puedo hacerlo directamente con HTML agregando a los botones un formaction pero necesito hacer esto desde AJAX, tambien estoy conciente de que puedo usar un onclick en cada boton, pero necesito que sea mediante un submit para que html se encargue de hacer todas las validaciones del formulario, ya que hay campos con los atributos required, maxlength, email, number, etc.

Seria algo asi lo que necesito:

$(function(){
  $('form').submit(function(event){
   event.preventDefault();
   /*Codigo Ajax*/
  });
});

<form>
 <input type="text" name="usuario" required/>
 <input type="password" name="password" required/>
 <button formaction="login.php"></button>
 <button formaction="registro.php"></button>
</form>
5
  • Y... ¿Cuál es el problema? Deberías añadir tu código. Si vas a usar AJAX, de todos modos vas a tener que capturar el evento submit y cancelarlo... puedes leer el action en ese momento Commented el 4 may. 2018 a las 13:42
  • y el html con el formulario?, no lo veo como para darle contexto a esto. Commented el 4 may. 2018 a las 13:47
  • @SebastiánLagosYañez No hace falta que coloque el codigo del formulario, puedo poner el formulario que sea, lo que necesito es que html haga las validaciones de todos los campos usando 2 botones tipo SUBMIT (Cada boton debe tener un formaction diferente)
    – StevePHP
    Commented el 4 may. 2018 a las 13:50
  • El /*Codigo Ajax*/ puede ir antes del submit? Lo que digo es, ejecuta ese código y luego hace el submit. Porque si es asi haces un .on click de cada btn y luego el submit del form Commented el 4 may. 2018 a las 14:07
  • Simplemente usa un div y no un form, o selecciona por evento click de los botones dentro del formulario y no este en sí. Al hacer esto, el event target será el botón y podrás identificarlo.
    – gugadev
    Commented el 4 may. 2018 a las 14:08

2 respuestas 2

0

Puedes utilizar document.activeElement para obtener cuál fue el botón que se utilizó y luego obtener el formaction con el método .attr() de jQuery.

$(function(){
  $('form').submit(function(event){
   event.preventDefault();
   var action = $(document.activeElement).attr('formaction');
   
   // imprime "login.php" o "registro.php"
   console.log(action);
   
   /*Codigo Ajax*/
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
 <input type="text" name="usuario" required/>
 <input type="password" name="password" required/>
 <button formaction="login.php">login</button>
 <button formaction="registro.php">registro</button>
</form>

0

Pude resolver este tema gracias al plugin de jquery jqueryvalidation es increiblemente facíl de usar.

El codigo quedó de la siguiente manera:

<script>
  $(function(){
    $('form').submit(function(event){
      event.preventDefault();
    });
  });

  function Registro(){
    /*
       EL PLUGIN HACE LAS VALIDACIONES DEL 
       FORMULARIO Y RETORNA TRUE O FALSE
    */ 

    if( $("form").valid() ){
      /* CODIGO AJAX PARA REGISTRAR USUARIO */
    }
  }

  function Login(){
    /*
       EL PLUGIN HACE LAS VALIDACIONES DEL 
       FORMULARIO Y RETORNA TRUE O FALSE
    */ 

    if( $("form").valid() ){
      /* CODIGO AJAX PARA INICIAR SESION */
    }
  }
</script>

 <form>
   <input type="text" name="usuario" required/>
   <input type="password" name="password" required/>
   <button type="button" onclick="Login()">Iniciar Sesion</button>
   <button type="button" onclick="Registro()">Registro</button>
 </form>

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.