Passing JavaScript Variable to PHP Using Ajax

Pass Javascript variable to PHP via ajax

Pass the data like this to the ajax call (http://api.jquery.com/jQuery.ajax/):

data: { userID : userID }

And in your PHP do this:

if(isset($_POST['userID']))
{
$uid = $_POST['userID'];

// Do whatever you want with the $uid
}

isset() function's purpose is to check wheter the given variable exists, not to get its value.

Using AJAX to pass Javascript var to PHP on same page

Ah! As I continued to look, I found that jQuery has the .load() function which is EXACTLY what I wanted. Dang! I was able to build this and make it work:

// Store clicked page
var currentPage = $(this).attr("name");
// Build filepath
var currentPagePath = "pages/" + currentPage + ".php";

// Find the div I want to change the include for and update it
$("#pageContent").load(currentPagePath);

So easy. Dang. Thanks all.

Cannot pass JS variable to PHP using AJAX

Nothing shows up.

And that's correct you will never get any thing by browsing index.php because there is no POST at this time , AJAX is internal and the only way to show a result from index.php is in the page that you send from it an ajax call.

At this :

success: function(data)
{
console.log(data);

}

you could control where to show your data that comes from index.php by , for example alert(data) or document.getElementById("someelement").innerHTML=data; and so on.

Problem with passing javascript variable to PHP variable via AJAX

Here is my HTML & JS Code!

    <div id="submitfakta" value="abdulrehman" style="height: 200px; width: 200px; background-color: red;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$('#submitfakta').live('mouseover mouseout', function(e) {
if (e.type == 'mouseover') {
var idAttr = $(this).attr('value');
//alert($(this).attr('id'));
$.ajax({
type: "POST",
url: 'profile.php',
data: {idAttr : idAttr },
success: function(data)
{
alert("success! " + data);
}
});

}
});
</script>

AND HERE IS MY profile.php CODE:

<?php 
echo $_POST["idAttr"]; exit;

Passing a JavaScript variable using AJAX to PHP

Try this HTML for your index.php page:

<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var var_data = "Hello World";
$(document).ready(function() {
$('#sub').click(function() {
$.ajax({
url: 'response.php',
type: 'GET',
data: { var_PHP_data: var_data },
success: function(data) {
$('#result').html(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
//case error
}
});
});
});
</script>
</head>
<body>
<input type="submit" value="Submit" id="sub"/>
<p id="result"></p>
</body>
</html>

Passing variables from javascript via ajax to php

It's just simple to pass the values to php file through AJAX call.
Change your AJAX call as shown in below

var message = $('#input-message').val();
var sender= $('#sender').val();
var receiver= $('#receiver').val();
$.ajax({
url: "scripts/load_messages.php",
method: "post",
//data: { "message":$('#input-message').val(),"sender":$('#sender').val(),"receiver":$('#receiver').val()},you can pass the values directly like this or else you can store it in variables and can pass
data: { "message":message,"sender":sender,"receiver":receiver},
success: function(data){
$('#chat-body').html(data);
},
error: function() {
alert('Not OKay');
}
});

and your load-messages.php could be like this`

$receiver = $_POST['receiver'];
echo $receiver;

AJAX POST - how to use a js variable in PHP

No you don't need to reload the page, especially since you are utilizing an asynchronous request (the A in AJAX) to the same URL.

See this phpfiddle demonstrating your example (with a couple modifications). Click the Run - F9 button and then click the button labeled Board to run the JavaScript (with the AJAX request). If you open the browser console, you should see the requests in the Network tab. The main one should be a GET request to a page like code_41096139.php (the numbers will likely change). Then when the AJAX request is made, there should be a POST request to that same page. Expand that request and you should see the Form data.

inspecting requests in network tab of console

The only modifications made, besides adding the button and click handler, were to add the output element:

<div id="output"></div>

and then in the success callback of the AJAX request, set the text of that element to the response (in addition to the call to console.log()):

 success: function(response) {
$('#output').text('response: '+response);
console.log(response);
}


Related Topics



Leave a reply



Submit