Estoy tratando de poner el <script>
de este código en una función del tipo .click()
para que se envié el formulario cada vez que se pulsa el checkbox
y así prescindir del <input type="submit"/>
.
Lo que hace el formulario es comprobar si el checkbox
está seleccionado o no y obtengo la respuesta del servidor usando Ajax.
El código que tengo actualmente es este:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Noticias varias</title>
<style>
#noticias li {
display: inline-block;
margin-right: 30px;
}
#noticias li a {
padding: 5px 10px;
background-color: white;
color: black;
text-decoration: none;
}
#noticias li a:hover {
background-color: rgb(255,153,0);
color: white;
}
#contenidos_externos #noticia {
margin-top: 10px;
padding: 20px;
border: 1px solid white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#login").submit(function(){
var datosFormulario = $(this).serialize();
$.get("login.php",datosFormulario, procesarDatos);
return false;
});
function procesarDatos(datosDevueltos){
if(datosDevueltos == "autorizado"){
$("#contenidos_externos").html('<p>Seleccionado</p>');
}else{
$("#contenidos_externos").html('<p>No seleccionado</p>');
}
}
});
</script>
</head>
<body>
<div class="cabecera">
<p class="logo">Procesando respuesta del servidor</p>
</div>
<div class="contenido">
<div class="principal">
<form method="get" action="login.php" id="login">
<table>
<tr>
<td>
<label for="usuario">Usuario:</label>
</td>
<td>
<input type="checkbox" name="usuario" id="usuario">
</td>
</tr>
<tr>
<td>
<!-- <label for="contra">Contaseña: </label> -->
</td>
<td>
<!-- <input type="text" name="contra" id="contra"> -->
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="boton" id="boton" value="Enviar" >
</td>
</tr>
</table>
</form>
<div id="contenidos_externos"></div>
</div>
</div>
</body>
</html>
PHP
if(isset($_GET['usuario'])){
$el_usuario = true;
}
if ($el_usuario ) {
echo 'autorizado';
} else {
echo 'fallo';
}
El resultado del código se puede ver aquí.
Lo que quiero hacer es lo mismo pero que informe si está seleccionado o no solamente, haciendo click en el checkbox
He intentado poner un on.('click')
pero no funciona:
$("#usuario").on('click', function(){
$("#login").submit(function(){
var datosFormulario = $("#login").serialize();
$.get("login.php",datosFormulario, procesarDatos);
return false;
});
function procesarDatos(datosDevueltos){
if(datosDevueltos == "autorizado"){
$("#contenidos_externos").html('<p>Seleccionado</p>');
}else{
$("#contenidos_externos").html('<p>No seleccionado</p>');
}
}
});
ready
pero no me funciona, cuando hago click en elcheckbox
simplemente no hace nada. A lo que te refieres, es que dentro delonClick
ponga ` $("#login").submit(function(){ //codigo actual });` y la funcionprocesarDatos()
la ponga fuera?