Undefined index when sending data to PHP file from jQuery

Question

I've researched about this issue (I read a lot of StackOverflow questions) and I still can't figure out a solution.

I get the id HTML 'a' attribute value with jQuery when I click the link and then I need send it to a php file which will do a database query. I tried by using $.ajax and $.post jQuery functions and I get the same error.

With $.post

var idElement;
$(document).ready(function(){
  $('.linkElement').click(function(){
      idElement= $(this).attr('id');
      console.log(idElement); // Shows id value on console
      $.post("showElement.php", idElement).done(function (){
         alert("All went good"); 
      });
      $(document.body).load("showElement.php");         
  });
});

With $.ajax

var idElement;
    $(document).ready(function(){
        $('.linkElement').click(function(){
          idElement= $(this).attr('id');
          console.log(idElement); // Shows id value on console
          $.post("showElement.php", idElement).done(function (){
             alert("All went good"); 
          });

            $.ajax({
              url: "showElement.php",  
              type: "POST",
              data: {'idElement':idElement}
            });

        });
});

When I use $_POST['idElement'] in my showElement.php file I get the following:

Notice: Undefined index: idElement in C:\xampp\htdocs\path\to\showElement.php on line 28

What am I doing wrong?

EDIT: I tested this with Firebug and it says it's ok. And data shown in Firebug Console appears correctly, but PHP file is not shown in browser (var_dump returns values it should have).

Any idea about this?

Thanks for your reply. I had it like you said, and after searching in jQuery website I noticed it may should be 'method' instead 'type', so I changed it. If I leave it like 'type', showElement.php is not shown. Any that should I know? — Neniel, May 26 '15 at 04:21
In your `showElement.php` try to echo the `$_POST['idElement']` — Sulthan Allaudeen, May 26 '15 at 04:24

score 0 · Answer 1 · answered May 26 '15 at 04:25

0

Change this

      $.post("showElement.php", idElement).done(function (){
         alert("All went good"); 
      });

for this

         $.post("showElement.php", {'idElement': idElement}).done(function (){
         alert("All went good"); 
      });

You forgot to add the key in the 'data' parameter. And I think you might be seeing this only when you use $.post because the $.ajax is correct. Comment the $.ajax one and try what I suggested you or comment the $.post one and try the $.ajax.

Here you have an example http://www.tutorialspoint.com/jquery/ajax-jquery-post.htm

PS : Sorry, I can't answer as a comment yet.

answered May 26 '15 at 04:25

Eric Martinez

31,277
9
92
91

Thanks Eric. I did what you suggested me but, unfortunately I'm still getting the same error. I don't know what's going on... Maybe is the way I load the showElement.php file... $(document.body).load("verPregunta.php"); that should be done by other way? – Neniel May 26 '15 at 04:33
How are you accesing your php file? I'm thinking you're accessing the file directly through your browser. If firebug reports that is ok, it means what I'm telling you. I tried your code and neither of those two prints what is returned from the file. So basically what you are doing, I think, is you are running your file with javascript code and then you browse your php file in two different tabs (to be more clear). Am I right? – Eric Martinez May 26 '15 at 16:39
My intention was to open the .php file in the current tab. That .php file does a database query and shows data (all that in the same file). I've found a solution. I'll post it answers section shorty :) – Neniel May 26 '15 at 17:53

score 0 · Answer 2 · edited May 26 '15 at 06:40

0

POST method can be used like

$.post("showElement.php", 
{idElement: idElement},
 function (result) {
   alert("All went good"); 
});

edited May 26 '15 at 06:40

Narendrasingh Sisodia

21,247
6
47
54

answered May 26 '15 at 04:33

rupesh-mdr

71
11

Abhinav · Answer 3 · 2015-05-26T04:54:39.637

0

I dont think you are doing anything wrong. Instead of trying to fetch a data using some key,

Try var_dump($_POST) to see whether you are getting any POST datas at all

NOTE: Try setting datatype also in your ajax request

EDIT : Inlcude the contentType in your request. check below

  $.ajax({
          url: "showElement.php",  
          type: "POST",
          contentType:"application/x-www-form-urlencoded",
          dataType: 'html', //or json whatever data that you return from server side
          data: {'idElement':idElement}
        });

I think setting the contentType should work.

edited May 26 '15 at 04:54

answered May 26 '15 at 04:39

Abhinav

8,028
12
48
89

It returns array(0) { }, I'm not getting any POST datas, for sure... Any Idea or alternative? – Neniel May 26 '15 at 04:46
Did you check console for any kind of syntax errors? Also did you try setting datatype? – Abhinav May 26 '15 at 04:46
Yes, I got a kind of warning that says: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. I reseached for the warning/error and [link](http://stackoverflow.com/questions/24639335/javascript-console-log-causes-error-synchronous-xmlhttprequest-on-the-main-thr) and still the same thing... – Neniel May 26 '15 at 04:58
okay so did you try explicitly putting "async: true" in your ajax request as given in one of the solutions, may be the async parameter is set to false and asynchronous request is not being sent – Abhinav May 26 '15 at 05:03
Yes, I did. And showElement.php file is not showing at all... If I figure out something I'll let you know. – Neniel May 26 '15 at 05:13

score 0 · Accepted Answer · edited May 23 '17 at 12:05

Well, as I said in a comment, I came across with a solution that doesn't use JavaScript.

I'm working with Twig for templates and what I did is to forget about jQuery for this and use $_GET instead $_POST in showElement.php, since I'm not sending sensitive data (passwords or usernames) and I just appended

?idElement=anyElementId

to the path to showElement.php, getting, for example, the following URI:

http://localhost/Project/showElement.php?idElement=1

In my showElement.php:

$anElement= ElementQuery::create()->findPk($_GET['idElement']); // Retrieve and element with Propel
$_SESSION['element'] = $anElement; // Save the element in $_SESSION['element'] variable

And to show the information I display my showElement.twig template:

$twig->display("showElement.twig", array('element') => $_SESSION['element']); // Display Twig template and pass arguments in an array

In my Twig template (showElement.twig)

<!-- Link to be clicked -->
    <a id="{{element.getId}}" class="linkElement" href="./../Project/showElement.php?idElement={{element.getId}}">{{element.getTitle}}</a>

It's just one solution. I don't know if it's a good way to do it, but it works. I think I can save the object in the array directly, avoiding using $_SESSION variable for this but, I did it in case I need to use the retrieved element in others PHP files.

If anyone finds another solution for this, can post it here.

Thanks everyone for your help :)

EDIT Link to thread that helps me: Ajax send the data, but php doesn't recieve (Title describes just what I figured out with Firebug :P)

Undefined index when sending data to PHP file from jQuery

4 Answers4