How to GET value from an input checkbox to use it in a query to show information

Question

I'm trying to GET information about rooms and towers in an orientation system. It is a search device throw checkboxes. The point is to select each option to filter the information retrived from the database.

The problem is that the values i'm trying to GET are not even echoing, so I can't use them in the query. On the other hand they are showing in the URL and if I add a submit button I can GET the information I want, but the idea here is to get the information instantly without the button.

This is the refresh code i'm using

var auto_refresh = setInterval(
function()
{
$("#results").load("searchroom.php").fadeIn("slow");


}, 1000);
$.ajaxSetup({ cache: false });

This is how i'm saving the values that are selected in the URL

$('input[type="checkbox"]').on('change', function(e){
    var data = $('input[type="checkbox"]').serialize(),
        loc = $('<a>', {href:window.location})[0];
    $.post('/showbytipo.php?'+data);
    if(history.pushState){
        history.pushState(null, null, loc.pathname+'?'+data);
    }
});

This are the HTML inputs

<form method="GET" action="searchroom.php" id="myform" name="myform">
       <p>TIPOLOGIA</p>
        <ul>
            <li><input class="tipologia" id="tipologia"name="tipologia" type="checkbox" value="services" ><label>Serviços</label></li>
            <li><input class="tipologia" name="tipologia" type="checkbox" value="class"><label>class</label></li>

        </ul>

     <p>TORRE</p>
        <ul>
            <li><input class="torre" name="torre" value="a" type="checkbox" value="a" ><label>A</label></li>
            <li><input class="torre" name="torre" value="b" type="checkbox" value="b"><label>b</label></li>


        </ul>
</form>

    <div id="results" >


    </div>

This is the PHP code to GET the values from the url

 <?php
    include("connect.php");


    $tipo=$_GET['tipologia'];
    echo $tipo;
    $torre=$_GET['torre'];
    echo $torre;

    //$tipo='services';



           $sql = "select * from rooms where tower='$torre' AND floor='$piso' AND typology='$tipo'";
            //$sql = "select * from rooms where typology='$tipo'";
            $query = mysql_query($sql) or die ("erro na query");
            while($row = mysql_fetch_array($query)) {  

    echo $row["name"];
    echo $row["tower"];
    echo $row["typology"];
            }
     echo 'ola';



    ?>

Answer 1

Apart from that you have serious security issues by having get variables straight to your query, your input fields are named the same. eg: name="tipologia" and name="torre" has 2 instances and in the url only the second one will take effect (if it's selected).

If you want to pass multiple values your names should be like: name="tipologia[]" and this way you will see them in php as an array.

Also I know it's irrelevant, but why you are using $.post since you want to pass the values as get? Why don't you use $.get instead?

Edit:

I didn't saw that refresh part of the question. You don't pass any variables in the refresh call if you want to pass variables the code should be like:

var auto_refresh = setInterval(
function()
{
$("#results").load("searchroom.php", $('#myform').serialize()).fadeIn("slow");}, 1000);
$.ajaxSetup({ cache: false });

I hope you know what are you doing, because the whole concept with refresh is quite messy to me, but still you have problem with the empty values from checkboxes:

You should have a javascript code which update a separate hidden field, which hold the state of the tipologia or torre fields. otherwise you can't rely on the checkboxes, their value will be always the last one checkbox.

Of course the easiest way is to use radio buttons and then you won't have this problem with the hidden field.

For debugging the variables you should use var_dump($_GET['torre']) and it will give you exactly what is in it. So, if it's empty you should see it or if it's undefined you will see null.

hope that helps.