Pass PHP variable back to jQuery $.ajax function

Question

1. HTML

I have an input requesting the user to enter their PIN code:

<input type="text" name="pin" maxlength="4" id="pin" />

2. javaScript

When the user types in 4 characters, the jQuery function fires off an ajax call to process the PIN in a PHP file and return the corresponding site name:

$("input#pin").keyup(function() {
    var PIN = $("this").val();

    if (PIN.length == 4) {

        var dataString = "PIN=" + PIN;

        $.ajax({
            type: "POST",
            url: "pins.php",
            dataType: "json",
            data: dataString,
            cache: false,
            success: function(site)
                {
                    console.log("site name is:" + site);
                }
        });
    }
});

3. PHP

pins.php contains the following code:

<?php
$pin = $_POST["PIN"];

if ($pin == "faf9") {
    $site = "pgv";
}

echo $site;
?>

Problem

I cannot seem to get the value of $site back into the success function of the ajax call. Console log reports null as the value if the pin doesn't equal faf9 and there is no log if I enter the correct pin.

I can't seem to figure out where I'm going wrong?

John Shepard · Accepted Answer · 2012-05-23 07:30:38Z

8

Change dataType to:

dataType: 'HTML',

That is all :)

answered May 23, 2012 at 7:30

John Shepard

9471 gold badge9 silver badges28 bronze badges

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

1 Comment

Vili Over a year ago

Or change dataString to dataString:{PIN:PIN}

Fabrizio Calderan · Accepted Answer · 2012-05-23 07:30:49Z

2

your php returns a string but you're expecting a JSON object. Change your datatype attribute inside $.ajax function

answered May 23, 2012 at 7:30

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Comments

bitoshi.n · Accepted Answer · 2012-05-23 07:40:02Z

2

For dataType: "json", you have to return json object. If not, chang that type with appropriate one like dataType: "html" or dataType: "text"

Also, you need to initialize $site if you don't want null return value.

edited May 23, 2012 at 7:40

answered May 23, 2012 at 7:32

bitoshi.n

2,3381 gold badge16 silver badges16 bronze badges

2 Comments

izolate Over a year ago

Initialize $site -- can you elaborate please?

bitoshi.n Over a year ago

@muppethead if it json $site='{}';. if html/text $site='';. Write the line before if syntax.

Vishal · Accepted Answer · 2012-05-23 07:44:16Z

2

Make following modifications as:

Replace var PIN = $("this").val(); with var PIN = $(this).val();
~~Replace var dataString = "PIN=" + PIN; with var dataString = PIN;~~
Replace dataType: "json", with dataType: "html",

edited May 23, 2012 at 7:44

answered May 23, 2012 at 7:36

Vishal

2,18114 silver badges25 bronze badges

2 Comments

izolate Over a year ago

I'm pretty curious about why you changed your mind about this: Replace var dataString = "PIN=" + PIN; with var dataString = PIN;

Vishal Over a year ago

I was assuming that you're using $.post() method in which you should pass a variable as pin: PIN and use it as $_GET['pin'] on server-side. But you're using $.ajax(), I lately recognize hence did that change! ;)

Malyo · Accepted Answer · 2012-05-23 07:32:12Z

1

This m8 not be relevant to your exact problem, but i think you should use $(this) without quotations

answered May 23, 2012 at 7:32

Malyo

2,0008 gold badges30 silver badges52 bronze badges

1 Comment

izolate Over a year ago

Good catch. I do have $(this) in my code. Not sure why I added quotes here.

Collectives™ on Stack Overflow

Pass PHP variable back to jQuery $.ajax function

5 Answers 5

1 Comment

Comments

2 Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

2 Comments

1 Comment

Related