Hace tiempo escribí un post en un blog acerca de esto, si quieres probarlo es mas o menos asi:
Este seria tu html
:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title> Acción onclick en js </title>
// Aquí esta la referencia a jquery
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<form method="post" id="formulario">
<input type="text" name="usuario" placeholder="Usuario" autofocus/>
<input type="password" name="contrasena" placeholder="Contraseña"/>
<input type="button" id="btn-ingresar" value="Ingresar" />
</form>
// Este div nos servirá para cachar la respuesta enviada
// por el backend en caso de que sea necesario.
<div id="resp"></div>
</body>
</html>
y aquí tienes la acción del botón que enviará los datos de tu formulario a tu archivo php
:
$(document).on('ready',function(){
$('#btn-ingresar').click(function(){
var url = "datos_login.php";
$.ajax({
type: "POST",
url: url,
data: $("#formulario").serialize(),
success: function(data)
{
$('#resp').html(data);
}
});
});
});
Esta es una parte de lo que vendría siendo tu archivo php
llamada en este ejemplo como datos_login.php
:
<?php
$usuario = $_POST['usuario'];
$contra = $_POST['contrasena'];
echo "tu usuario es: ".$usuario;
echo "contraseña es: ".$contrsena;
?>
checalo y si tienes dudas puedes consultar la referencia del post que escribí aquí.
El código completo quedaría mas o menos así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title> Acción onclick en js </title>
// Aquí esta la referencia a jquery
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).on('ready',function(){
$('#btn-ingresar').click(function(){
var url = "datos_login.php";
$.ajax({
type: "POST",
url: url,
data: $("#formulario").serialize(),
success: function(data)
{
$('#resp').html(data);
}
});
});
});
</script>
</head>
<body>
<form method="post" id="formulario">
<input type="text" name="usuario" placeholder="Usuario" autofocus/>
<input type="password" name="contrasena" placeholder="Contraseña"/>
<input type="button" id="btn-ingresar" value="Ingresar" />
</form>
// Este div nos servirá para cachar la respuesta enviada
// por el backend en caso de que sea necesario.
<div id="resp"></div>
</body>
</html>
Saludos.