How can I use a GET from my php file, to get a variable that I declared in my .js file?

Question

I made some variables that contain the answers that are selected in my dropdown menu's. Now I want to use those variables in my .php file so i can make a query of them. But I can't figure out what I'm doing wrong, so here is my code.

This my main.js file:

$("#slctTable").change(function(){
    var table = document.getElementById("slctTable");
    var tableSelected = table.value;

    console.log(tableSelected);
});

$("#slctField").change(function(){
    var field = document.getElementById("slctField");
    var fieldSelected = field.value;

    console.log(fieldSelected);
});

$("#slctAttribute").change(function(){
    var attribute = document.getElementById("slctAttribute");
    var attributeSelected = attribute.value;

    console.log(attributeSelected);
});

And this my getData.php file:

<?php

include "connect.php";

$test1 = $_GET['tableSelected'];
$test2 = $_GET['fieldSelected'];
$test3 = $_GET['attributeSelected'];

echo ($test1);
echo ($test2);
echo ($test3);

?>

To transmit a value to a PHP script, you need to actually call the PHP script. Once the user has made his selection in your dropdown menus, what is supposed to happen ? — JesusTheHun, May 17 '16 at 15:10
JavaScript is a client side language and PHP is a server side language. You can't get values out of JavaScript in PHP. The only way for PHP to access them is for you to include them in the URL. — Styphon, May 17 '16 at 15:11
I wanna use AJAX to do this. And the information the user selects will be thrown in a pg/sql query that will be displayed in a leaflet map. — L. Grunn, May 17 '16 at 20:32

Styphon · Accepted Answer · 2016-05-18T09:11:39.400

1

You will have to redirect the user to a page with the variables in the URL. PHP runs a script on the server then sends the output of that script to the client. JavaScript only runs on the client. You can do this:

$('#slctTable').change(function(){
    var table = document.getElementById("slctTable");
    var tableSelected = table.value;

    console.log(tableSelected);
    window.location.href = "?tableSelected=" + tableSelected
});

Alternatively you can make an Ajax request to make a call to the server without refreshing the page. You can use this:

$('#slctTable, #slctField, #slctAttribute').change(function ()
{
    var tableSelected = document.getElementById("slctTable").value;
    var fieldSelected = document.getElementById("slctField").value;
    var attributeSelected = document.getElementById("slctAttribute").value;
    $.ajax({
        "url": "getData.php",
        "type": "GET",
        "data": {
            tableSelected: tableSelected,
            fieldSelected: fieldSelected,
            attributeSelected: attributeSelected
        }
    })
    .done(function (response)
    {
        console.log(response);
    });
});

edited May 18 '16 at 09:11

answered May 17 '16 at 15:13

Styphon

10,304
9
52
86

Thanks that worked Styphon. But now I have another problem. When I only do a GET to tableSelected it works. But when I add the code for the fieldSelected and attributeSelected i get an Unidentified index error. And it does pass the right values but I also get the error in my debugger. (I used you'r Ajax solution btw) – L. Grunn May 17 '16 at 21:04
So you need to pass through all three always? – Styphon May 18 '16 at 08:02
Yeah i need to pass them all through. If the user selects nothing in a dropdown menu it needs to turn up empty. But most of the time the user will select value's in the three dropdowns. – L. Grunn May 18 '16 at 08:22
I've updated my answer to grab all three values and pass them to getData any time one of the fields is changed. – Styphon May 18 '16 at 09:12
Thanks it worked! But if i remove the .done(function(response) part of your code i get: `Connection Keep-Alive` in the header. Is that forming a security risk? Or is it just away to retrieve mutiple variables faster? – L. Grunn May 18 '16 at 09:47
http://stackoverflow.com/questions/6060959/http-is-statel-less-so-what-does-it-mean-by-keep-alive explains keep alive. It's not a security risk. – Styphon May 18 '16 at 09:48
Oww oké, so that's why you implemented the `.done(function (response)`? To close the connection? – L. Grunn May 18 '16 at 12:12
No, I implemented that because surely you'll want to do something with the response, even if it's just to check it completed properly. – Styphon May 18 '16 at 12:23
And what if i also want all the records in the dropdown to be visible and not only the selected value? So for exmaple i want to have a variable that has the array of the dropdown tables in it. – L. Grunn May 19 '16 at 08:56

score 0 · Answer 2 · answered May 17 '16 at 15:12

Using Jquery, you could use Ajax to accomplish that:

$("#slctTable").change(function(){
    var table = document.getElementById("slctTable");
    var tableSelected = table.value;

    console.log(tableSelected);
});

$("#slctField").change(function(){
    var field = document.getElementById("slctField");
    var fieldSelected = field.value;

    console.log(fieldSelected);
});
$("#slctAttribute").change(function(){
    var tableSelected = slctTable.val();
    var fieldSelected= slctField.val();
    var attributeSelected = $(this).val();

     $.get( "getData.php?tableSelected="+tableSelected+"&fieldSelected="+fieldSelected+"&attributeSelected="+attributeSelected )
                    .fail(function(data){

                        alert('Ajax Call Error');
                    })
                    .done(function(){
                        alert('Success');
                        });
                    });
});

How can I use a GET from my php file, to get a variable that I declared in my .js file?

2 Answers2