variable in jquery function is null

Question

I am having a problem with seeing one of my variables on a webpage. Here is what I have so far.

 $(document).ready(function() {
    $(function() {
        $("#CheckID").click(function() {
         // submit ajax job and display the result
         var id = '$("#ID").val()'      
            $.ajax({
                type: "POST",
                url: "test_wID.php",
                data: "id",
                success: function(data) {
                $('#rightselection').html(data)
                }
            });
        });
    });
});

This is the jquery function I am using to take an ID entered into a form and use that ID with a bash script.

Here is the php.

<?php

//Get the ID from the HTML form and use it with the check chunk script.

$id = $_POST['ID'];
if (is_null($id)){
        echo "$id is null";
}
echo "Selected test Game ID: ".$id;
//print shell_exec('/opt/bin/tester $id');

?>

I commented out the script because the variable is returning null, at this point I am just trying to make sure that I get the ID.

For completeness here is the form I'm using.

print "<p><h3>ID: <input type=\"text\" id=\"ID\" /></h3></p>";

#print "<br>";

print "<p><button id=\"CheckID\">Check ID</button></p>";

When i click the button I get the message in my div that the variable is null. So my question is am I missing something in the declaration? How is it that the var id is null?

Thanks for any help provided.

And learn to sanitize input you are passing to shell commands (escapeshellarg()) - even though it's currently commented out. — ThiefMaster
– ThiefMaster, Commented Oct 23, 2012 at 8:26

techfoobar · Accepted Answer · 2012-10-23 08:18:31Z

2

You should consider changing your jQuery code to:

$.ajax({
    type: "POST",
    url: "test_wID.php",
    data: {id: $("#ID").val()},
    success: function(data) {
        $('#rightselection').html(data)
    }
});

answered Oct 23, 2012 at 8:18

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sirko · Accepted Answer · 2012-10-23 08:32:04Z

2

You mixed up strings and variable references at two points.

First, the statement var id = '$("#ID").val()' assigns just a string to your if variable and not the return value of the jQuery call. So just remove the ' here.

Second, the data parameter you're giving to the ajax() call again consists just of a string "id" and not the respective value. Here you need to change to {'id': id}.

So after correcting everything, your code should look like this:

 $(document).ready(function() {
        $("#CheckID").click(function() {
         // submit ajax job and display the result
         var id = $("#ID").val();     
            $.ajax({
                type: "POST",
                url: "test_wID.php",
                data: {'id': id},
                success: function(data) {
                  $('#rightselection').html(data);
                }
            });
        });
});

^{Sidenote: Try to put all ;, where they belong. This prevents some errors, which can be hard to track!}

EDIT

As pointed out in the comment by @FlorianMargaine you only need one wrapper not two around your code.

edited Oct 23, 2012 at 8:32

answered Oct 23, 2012 at 8:17

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

1 Comment

Sirko Over a year ago

@FlorianMargaine Overlooked that one. Corrected. Thanks.

Florian Margaine · Accepted Answer · 2012-10-23 08:35:59Z

Firstly, the two following snippets are equivalent:

$(document).ready(function() {
});

// Is equivalent to:

$(function() {
});

So your code does the same as:

$(document).ready(function() {
    $(document).ready(function() {
    });
});

Plain useless, right?

Secondly, this line is plain wrong:

var id = '$("#ID").val()';

You're passing a string to the id variable. $('#ID').val() is not evaluated. This is the equivalent of doing this in PHP:

$id = '$_POST["id"]';

Which is just wrong, right?

You want this:

var id = $('#ID').val();

By the way, this variable naming could be improved, the same goes for the HTML ID.

Thirdly, you're doing the same mistake in the data option of $.ajax:

data: 'id'

You're just passing a string to the data option. You want the value of the id variable.

Then, if you absolutely want a string, I don't recommend it. jQuery expects a special kind of string. You better pass an object. Like this:

data: {
    id: id
}

Do you see why the variable naming is wrong? You can't differentiate the property from the value. If you had done the following:

var idValue = $('#ID').val();

You could use this:

data: {
    id: idValue
}

Which is way more readable.

ThiefMaster · Accepted Answer · 2012-10-23 08:25:22Z

0

In your $.ajax call you need to do:

data : { id: id }

edited Oct 23, 2012 at 8:25

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

answered Oct 23, 2012 at 8:17

Brian

8,6212 gold badges27 silver badges32 bronze badges

2 Comments

Florian Margaine Over a year ago

So you're just passing a string of a javascript statement?

Brian Over a year ago

no... id will be the name and then passing the value - you do not need quotes - it's just a JSON string you're defining here.

user254875486 · Accepted Answer · 2012-10-23 08:17:39Z

-1

If you want to pass parameters in an AJAX call you need to pass a string similar to the GET string you see in urls. So something like: d=123&name=test

Change the line

var id = '$("#ID").val()'

To

var id = 'id=' + $("#ID").val();

answered Oct 23, 2012 at 8:17

user254875486

11.3k7 gold badges39 silver badges65 bronze badges

1 Comment

ThiefMaster Over a year ago

NO! var data = {id: $('#ID').val()} - id is a bad variable name for the payload.

Collectives™ on Stack Overflow

variable in jquery function is null

5 Answers 5

Comments

1 Comment

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related