Submit when selecting a checkbox

Question

Submit when selecting a checkbox

Navigation

#1 by (1 votes)

0

I am trying to put the <script> of this code in a function of type .click() so that the form was sent every time the checkbox is pressed and thus do without the <input type="submit"/> . What the form does is check if the checkbox is selected or not and I get the response from the server using Ajax .

The code that I currently have is this:

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

The result of the code can be seen here . What I want to do is the same thing but to report if it is selected or not only, by clicking on checkbox

I tried to put a on.('click') but it does not work:

$("#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>');
        }
    }

});

jquery ajax

asked by gmarsi 17.10.2017 в 13:00

source

1 answer

Save file with saveFileDialog1 in VB 2015 Different results in distinct

score 1 · Accepted Answer

What you can do is a function that is called when the value of the checkbox changes.

And in that function do everything you want to do before submitting and then call the submit of the form with $('#login').submit(); (remove the comment from the code to do so, I commented so that there is no error when redirecting)

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>