passing value from javascript to sql via ajax

Question

I have some problem when I pass variable across php , javascript and ajax.

html - when I change the selected value, ajax will post the new value:

<select name="PACKAGE_CATEGORY" id="PACKAGE_CATEGORY" onclick="fireAjax()" class="form-control" >
    <option value="0" disabled selected  hidden> -- select an option -- </option>
    <option value="PLINE">Phone Line Only</option>
    <option value="UNIFI">Unifi for New Registration</option>
    <option value="STREAMYX">Streamyx for New Registration</option>
    <option value="WEBE">Webe</option>
    <option value="DOME">Lease Line (DOME)</option>
</select>

ajax - I get the value by javascript and save it in var1:

<script>
function fireAjax(){
    $.ajax({
        url: 'form.php',
        type: 'POST',
        data: {var1: document.getElementById('PACKAGE_ID').innerHTML },
        success: function(data) {
            console.log("success");
        }
    });
}

javascript function - I want to take the value var1 from ajax, but fail:

<script>
$(function () {
var pricestore = [
    <?php
    $var1 = $_POST['var1']; // I cannot get the var1, please help me T.T
    $sqlpid=mysqli_query($conn, "select no from product where P_NAME = '$var1' ");

    //some function
    //.............
    ?>
];
});
</script>

You have no element in the HTML you've shown with an `id` of `PACKAGE_ID`. Assuming you're trying to get the selected option of `PACKAGE_CATEGORY`, use `.value` instead of `. innerHTML` — Rory McCrossan, Nov 06 '17 at 08:18
I have changed from `. innerHTML` to `.value`, but it still can't get the value.May I know is it all my code wrong at the first of the time? — NG Miow, Nov 06 '17 at 08:21
Did you also change the `id` as I suggested? Your current code is not retrieving the correct element — Rory McCrossan, Nov 06 '17 at 08:21
Then have you checked the console for errors? Have you ensured in the console that the value is being sent in the request? You're really not making this easy to help you. — Rory McCrossan, Nov 06 '17 at 08:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158295/discussion-between-ng-miow-and-rory-mccrossan). — NG Miow, Nov 06 '17 at 08:28
before you put your code anywhere production near take a look at [sql-injection](http://php.net/manual/en/security.database.sql-injection.php) — yellowsir, Nov 07 '17 at 15:23
@yellowsir , may I know is it my code can be injected by sql? I not so sure about that, but is it dropdown list also can be injected? — NG Miow, Nov 08 '17 at 00:40
@NGMiow , people can still chance the value from dropdown in html or build their own post request, and buildsomething like: `where P_NAME = '$var1' or 1=1` (or worse if you use * anywhere you could build a subselect on e.g. the user table and get email adresses, pwhashes and much more..) you could use mysqli/pdo [see this answer](https://stackoverflow.com/a/60496/1761588) — yellowsir, Nov 09 '17 at 13:52

score 0 · Answer 1 · answered Nov 06 '17 at 08:29

Change onclick() to onchange()

<select name="PACKAGE_CATEGORY" id="PACKAGE_CATEGORY" onchange="fireAjax()" class="form-control" > //Here
<option value="0" disabled selected  hidden> -- select an option -- </option>
<option value="PLINE">Phone Line Only</option>
<option value="UNIFI">Unifi for New Registration</option>
<option value="STREAMYX">Streamyx for New Registration</option>
<option value="WEBE">Webe</option>
<option value="DOME">Lease Line (DOME)</option>

score 0 · Answer 2 · answered Nov 06 '17 at 08:31

Try the following:

Html:

  <select name="PACKAGE_CATEGORY" id="PACKAGE_CATEGORY" onchange="fireAjax()" class="form-control" >
    <option value="0" disabled selected  hidden> -- select an option -- </option>
    <option value="PLINE">Phone Line Only</option>
    <option value="UNIFI">Unifi for New Registration</option>
    <option value="STREAMYX">Streamyx for New Registration</option>
    <option value="WEBE">Webe</option>
    <option value="DOME">Lease Line (DOME)</option>
</select>

Javscript:

<script>
    function fireAjax(){
        $.ajax({
            url: 'form.php',
            type: 'POST',
            data: {var1: document.getElementById('PACKAGE_CATEGORY').value},
            success: function(data) {
                console.log("success");
            }
        });
    }

Changed onclick to onchange, changed id, changed innerHtml to value

I still can't get the value with this answer, but I think it's near — NG Miow, Nov 06 '17 at 08:34
Is there any errors in console? try exiting form.php with print_r($_POST) ONLY — Blesson Christy, Nov 06 '17 at 08:37
nope, nothing errors show. I have try to use alert to show the `var1` , it show nothing too — NG Miow, Nov 06 '17 at 08:39

Casper · Answer 3 · 2017-11-06T08:50:03.603

0

Try to change your ajax call into change event of selector,

$('#PACKAGE_CATEGORY').change(function(){
    $.ajax({
        url: 'form.php',
        type: 'POST',
        data: {
            'var1': $(this).val() 
        },
        success: function(data) {
            console.log("success");
        }
    });
})

edited Nov 06 '17 at 08:50

answered Nov 06 '17 at 08:35

Casper

1,469
10
19

Still can't get the value. Is it change to change event is better than mine way? – NG Miow Nov 06 '17 at 08:43
I dunno the different, so just asking, not saying that this is not good – NG Miow Nov 06 '17 at 08:44
two ways are same i just remove function, any way did you add URL ? – Casper Nov 06 '17 at 08:49
please add console.log and check inside this $('#PACKAGE_CATEGORY').change(function(){ – Casper Nov 06 '17 at 08:52

passing value from javascript to sql via ajax

3 Answers3