The jQuery AJAX and PHP not fetching data values

Question

I am trying to fetch the values of the data variable passed with jQuery AJAX to a php page. How to solve it?

Below is the HTML page code:

<input id="name" placeholder="Enter your name." />
<button id="submit">Submit</button>
<div id="message"></div>

On the button click this jQuery AJAX calls a php page:

 $.ajax({
     type: "POST",
     url: "jquery-ajax-hello.php",
     contentType: "application/json; charset=utf-8",
     data: '{"name":"' + $("#name").val() + '"}',
     success: function (result, status, xhr) {
         $("#message").html(result);
     },
     error: function (xhr, status, error) {
         $("#message").html("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
     }
 });

The PHP Page code is:

<?php
$name = $_POST['name'];
echo "Hello ".$name.", How are you ?"; 
?>

In the php page I am not able to fetch the data varaible 'name' value?

Please help?

Undefined index: name in E:\xampp\htdocs\demo\jquery-ajax-hello.php on line 2 Hello , How are you ? — yogihosting
– yogihosting, Commented Feb 2, 2017 at 10:02

A. L · Accepted Answer · 2017-02-02 10:03:12Z

2

Your data should be an object, what you're passing is a string, so it should be

data: {
    name: $("#name").val()
},

answered Feb 2, 2017 at 10:03

A. L

12.7k29 gold badges100 silver badges179 bronze badges

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

3 Comments

A. L Over a year ago

try removing contentType, it should really just pass as a www/encode thing.

yogihosting Over a year ago

thanks, i removed contentType and that solved my problem. Thank you.

A. L Over a year ago

jQuery's ajax doesn't actually pass it as a json object (as one might infer), it passes it as a query string. See more on their website.

Aman Kumar · Accepted Answer · 2017-02-02 10:09:25Z

1

JQuery Ajax

Form data

<input type="text" id="name" placeholder="Enter your name." />
<button id="submit">Submit</button>
<div id="message"></div>

Jquery section

$(function() {
$("#submit").click(function() {
  var name = $('#name').val();
 $.ajax({
  url : 'success.php',
  method: 'POST',
  data : {name:name},
  success : function(res) {
     $('#message').append(res);
   }
});
});
});

success.php

<?php 
 $name =  $_POST['name'];
 echo "Hello Mr ".$name ;
?>

answered Feb 2, 2017 at 10:09

Aman Kumar

4,5573 gold badges21 silver badges40 bronze badges

Comments

geekbro · Accepted Answer · 2017-02-02 10:02:56Z

0

change data property to

 data: {name: $("#name").val() }

and it would work fine

answered Feb 2, 2017 at 10:02

geekbro

1,33312 silver badges14 bronze badges

Comments

Mayank Pandeyz · Accepted Answer · 2017-02-02 10:05:09Z

0

change data to:

data: { name: $("#name").val() }

because data must be an object having key : value pair in it

In your case:

data: '{"name":"' + $("#name").val() + '"}'

{} is wrapped with single quotes. Remove them.

answered Feb 2, 2017 at 10:05

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

2 Comments

yogihosting Over a year ago

the php page is not able to fetch the "name" value, that's the problem?

Mayank Pandeyz Over a year ago

In that case data : name do no have the value in it

Collectives™ on Stack Overflow

The jQuery AJAX and PHP not fetching data values

4 Answers 4

3 Comments

JQuery Ajax

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

JQuery Ajax

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related