0

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>');
        }
    }

});
1
  • @lois6b el ultimo trozo de código que he publicado en la pregunta lo he probado dentro del ready pero no me funciona, cuando hago click en el checkbox simplemente no hace nada. A lo que te refieres, es que dentro del onClickponga ` $("#login").submit(function(){ //codigo actual });` y la funcion procesarDatos() la ponga fuera?
    – gmarsi
    Commented el 17 oct. 2017 a las 11:15

1 respuesta 1

1

Lo que puedes hacer es una funcion que se llame cuando el value del checkbox cambie.

Y en esa funcion hacer todo lo que quieres hacer antes del submit y despues llamar al submit del form con $('#login').submit(); (quita el comentario del codigo para que lo haga, lo comenté para que no salga error al redirigir)

function beforeSubmit() {

  console.log("serializando");
  console.log("cogiendo datos");

  //$('#login').submit();
  
  console.log("submited!");

}


$(function() {
  $('#usuario').on('change', function() {
    beforeSubmit();
    //alert("pulsado")
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="get" action="login.php" id="login">
  <table>
    <tr>
      <td>
        <label for="usuario">Submit:</label>
      </td>
      <td>
        <input type="checkbox" name="usuario" id="usuario">
      </td>
    </tr>

  </table>
</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.