0

I have this JS function and I'm looking for the simplest way to send a variable to php and have php return an array to my JS. I have the second part down I just need help sending the variable. Here's my function:

 function myEvent(){
        //console.log(uploaded);
            var length = uploaded.length;
            var content = document.getElementById("Profile");
            if(length == 0){
                content.innerHTML = '<p style="text-align:center"><b> You uploaded no events. </b></p>';

            }
             else {
                content.innerHTML = " ";
            for(var i=0; i<length;i++){
                var entry = document.createElement('li');
                var EID = uploaded[i][0];
                entry.innerHTML= '<a href="eventList2.html">'+uploaded[i][1]+'</a>​';
                content.appendChild(entry); 
                }
                return false;
            }
    }

I want to be able to send EID which is a unique ID to a PHP script every time I click the link.

Any help? I'm using Jquery but I'm not too familiar with it. If there's an option using JS alone I would really appreciate it.

Improve this question
4
  • You need to use AJAX to send a value to a server side script. It can certainly be done with straight Javascript but it's much easier with jQuery. Commented Oct 24, 2013 at 0:42
  • I understand that but I'm not too familiar with ajax. Could you show me an example related to my question? Thanks Commented Oct 24, 2013 at 0:55
  • 1
    You need to search stack, because I just posted an answer similar to this one. Yet here is a tut tutorialspoint.com/jquery/ajax-jquery-post.htm Commented Oct 24, 2013 at 0:55
  • Thanks for the reply @xlordt but how can I execute $.post? I will assume onclick but like I said I'm not to familiar with Jquery. If you could post an eg. for me please I'd appreciate it, thanks. Commented Oct 24, 2013 at 1:05

3 Answers 3

Reset to default
1

You can do that using Ajax. There's also another really simple way to send data to a php script on any server (same domain or not) while making that php script interact with your page

first you create a script tag:

var tag = document.createElement('script');

the src of that tag will be the url of the php script that will receive the variable:

var myVar = 'foo';
tag.src = '/path/to/my/script.php?variable='+myVar;

you add the script tag to the dom to request it

document.getElementsByTagName('head')[0].appendChild(tag);

on the server side the php script receives the variable and does whatever it should do with it, and optionally it can echo any javascript that will run on the page afterwards:

<?php
echo "alert('".$_GET['variable']."')";

that's pretty much it, WARNING, be aware that this is just a simple example, to implement something like this on a production site you need to make sure that doing so won't open your site to XSS attacks, code injection etc... how to do that is beyond what is being discussed here but be aware

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

3 Comments

Thanks for your reply, but when I tried to alert the variable in php it alerts undefined. I tried exactly what you put here. Any reason why this may happen?
does the alert pop but says "undefined"? it could be a quote missing maybe, open the script url in a browser window and check
no errors. Here's my code, I have an onlick on my link that loads this function function load(){ var tag = document.createElement('script'); tag.src = 'eLoad.php?EID=hello'; document.getElementsByTagName('head')[0].appendChild(tag); } and then I echoed it in PHP to see if it was sent and I got undefined
1

Make sure you view this using firebug, or anything similar in order to see the returned results, in the jquery done function you can then do data[0], etc for the arrays

html

<!DOCTYPE html>
 <html>
  <head>
   <title>JQuery Test</title>
   <meta charset="utf-8">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="myjs.js"></script>
  </head>

  <body>
   <button id="sendData">Send Data</button>
  </body> 
 </html>

JS

$(document).ready (function (){
    $("#sendData").on ("click", function (){
             jQuery.ajax ({
                url:  "index.php",
                type: "POST", 
                data: {returnArray: 1}
            }).fail (function (){
                console.log ("failed");
            }).done (function (data){
                console.log (data);
            });
    });
 });

PHP

 if (isSet ($_POST ['returnArray']))
 {
     $a = array ("a", "b", "c", "d");

     header('Content-type: application/json');
     echo json_encode ($a);

     exit;
 }

I am sure you can figure this out... show some effort.. and don't be afraid to ask if you still don't understand.. just as long as you try.

Improve this answer

Comments

0

Use JavaScript's XMLHttpRequest to send a message to the server running PHP. When the PHP script responds, the XMLHttpRequest object will let you know and you'll be able to grab the XMLHttpRequest.responseText.

It would be a good idea to have PHP respond with JSON, which it can do easily. Then you can parse the responseText with JavaScript's JSON.parse function and just use it.

The following two articles will show you how to use the standard objects.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

http://www.php.net/manual/en/function.json-encode.php

You'll just have to be sure you don't try talking to a different website than the one your page is loaded from, unless you want to learn all about cross domain requests.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.