CODEWITHSUNDEEP
phpjavascriptjqueryhtmlajax
user2683673
user2683673

Reputation: 33

AJAX not passing data to php

I have been searching online for a while now and have tried many fixes, but I still can't get my code to function properly. When a user clicks on a link with the SubCategory class, I want to pass that hyperlink into php through an AJAX call in JavaScript. The click event is being detected correctly and the ajax call returns with a success alert, but when I try to access the variable in php, it says that the $_POST array is empty.

I don't understand why I can't access the $_POST['send_link'] variable in my php.

Here is part of my index.html: 

<table border="1" width=50%>
        <tr>
            <td><b>For Sale</b></td>
            <td><b>Services</b></td>
            <td><b>Jobs</b></td>
            <td><b>Country</b></td>
            <td><b>Locations</b></td>
        </tr>
        <tr>
            <td><a class = "SubCategory" href="FormData.php">Books</a></td>
            <td>Computer</td>
            <td>Full-Time</td>
            <td>USA</td>
            <td>Cupertino</td>              
        </tr>
        <tr>
            <td><a class = "SubCategory" href="FormData.php">Electronics</a></td>
            <td>Financial</td>
            <td>Part-Time</td>
            <td>India</td>
            <td>Mumbai</td>
        </tr>
        <tr>
            <td><a class = "SubCategory" href="FormData.php">Household</a></td>
            <td>Lessons</td>
            <td>Volunteering</td>
            <td>Sweden</td>
            <td>Stockholm</td>
        </tr>
    </table>

Here is my core.js

$( document ).ready(function() {
  $(".SubCategory").click(function(){
    var link =  $(".SubCategory").text();
$.ajax({
  type: 'POST',
  url: 'FormData.php',
  data: { send_link: link },
  async: false,
    success: function(data) { 
        alert("success ");

    },
    error: function (xmlHttpRequest, textStatus, errorThrown) {
         alert("fail");
    }
});
   });
  });

and here is my FormData.php

<?php
  // Connects to your Database 
  var_dump($_POST);
  if (isset($_POST['send_link'])) {
 var_dump($_POST['send_link']);
  }
  ?>

Request from Chrome:

Request URL:
http://localhost/pkanekal/FormData.php

Request Method:GET
Status Code:200 OK
200 OK
Request Headersview source

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Encoding:gzip,deflate,sdch
Accept-Language:
en-US,en;q=0.8

Connection:keep-alive
Cookie:
PHPSESSID=mj74gqocdse6a59kun1b36ndl5

Host:localhost
Referer:
http://localhost/pkanekal/index.html

User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36
Response Headersview source

Connection:Keep-Alive
Content-Length:
1303

Content-Type:text/html
Date:
Wed, 14 Aug 2013 20:31:36 GMT

Keep-Alive:timeout=5, max=99
Server:
Apache/2.4.4 (Unix) PHP/5.5.1 OpenSSL/1.0.1e mod_perl/2.0.8-dev Perl/v5.16.3

X-Powered-By:PHP/5.5.1

Upvotes: 0

Views: 2169

Answers (1)

Christopher Marshall
Christopher Marshall

Reputation: 10736

Need to change your selector as right now you're trying to select the text in every .SubCategory

var link = $(this).text();

You also need to prevent the default action on the anchor click. (May as well change the href to # since you're referencing it directly in your script.

$(".SubCategory").click(function(event){
 event.preventDefault();
// your code
});

Upvotes: 5

Related Questions