How to send form field value to ajax function

Question

How to send form field value to ajax function

Navigation

#1 by (1 votes)

1

Very good, I have a form in html, and I would like you to click on a button, call an ajax function with the user and password.

This is my form.

<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>

The data I want to send to the login () function is the userID and idCLave.

Thank you very much. Greetings

html ajax

asked by Lorenzo Martín 18.09.2017 в 21:45

source

1 answer

How to save an image in Database by URL how do I take the id of a tag and then save it in a javascript variable

score 1 · Accepted Answer

Try this way, the code is commented.

$("#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>

To learn how to use jQuery you can see the following links:

1. Ajax

2. Submit

3. Serialize

If you're more audio / visual you can see tutorials on youtube about jQuery. I recommend you personally codigofacilito .