1

Muy buenas, tengo un formulario en html, y me gustaría que al hacer click en un boton, llame a una funcion ajax pasandole el usuario y la clave.

Este es mi formulario.

<form  method="post" action="javascript:login();" name="loginForm"  id="loginForm">
          <div class="form-group input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <input type="text" class="form-control"   name="txtUsuario" placeholder="Usuario" required />          
          </div>

         <div class="form-group input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
            <input type="password"   class="form-control"  name='txtClave' placeholder="Clave" required />     
          </div>

          <div class="form-group">
            <button type="submit" class="btn-sm  btn-primary btn-block">Aceptar</button>
        </div>
         </form>    

Los datos que quiero enviar a la funcion login() son el idUsuario e idCLave.

Muchas gracias. Un saludo

6
  • Se acepta jquery?
    – Einer
    el 18 sep. 2017 a las 20:07
  • Si, claro jajajajaaj el 18 sep. 2017 a las 20:20
  • Solo una pregunta. Alguna vez has utilizado ajax?
    – Einer
    el 18 sep. 2017 a las 20:24
  • Si, pero soy muy novato :), lo he arreglado con esta linea variable=$('#idUsuario').val(); Me funciona, imagino que es correcto hacerlo de esta forma. Muchas gracias. el 18 sep. 2017 a las 20:27
  • Publica lo que has intentado y asi se te puede ayudar mejor.
    – Einer
    el 18 sep. 2017 a las 20:29

1 respuesta 1

1

Prueba de esta manera, el código esta comentado.

$("#loginForm").submit(function(e) {
  $.ajax({
    type: 'post',
    url: "path/to/your/script.php", // el script donde se maneja la entrada de formulario.
    data: { //puedes serializar el formulario, asi te ahorrarias indicar cada uno.
    	usuario: $('input[name="txtUsuario"]').val(),
    	clave: $('input[name="txtClave"]').val(),
    },
  }).then(
    function(data) {
      alert(data);
      console.log(data);
    	// muestra la respuesta del php.
    }, function(data) {
      alert(data);
      console.log(data);
    	// muestra un error del script.
    }, function() {
      alert(data);
      console.log(data);
    	// muestra un error con la conexion.
    }
  );
  e.preventDefault(); // evitar ejecutar la acción real del formulario (submit).
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form  method="post" name="loginForm"  id="loginForm">
  <div class="form-group input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
    <input type="text" class="form-control"   name="txtUsuario" placeholder="Usuario" required />          
  </div>
  <div class="form-group input-group">
    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
    <input type="password"   class="form-control"  name='txtClave' placeholder="Clave" required />     
  </div>
  <div class="form-group">
    <button type="submit" class="btn-sm  btn-primary btn-block">Aceptar</button>
  </div>
</form>

Para instruirte del uso de jQuery puedes ver los siguientes enlaces:

1. Ajax

2. Submit

3. Serialize

Si eres mas audio/visual puedes ver tutoriales en youtube acerca de jQuery. Te recomiendo uno personalmente codigofacilito.

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.