Geek Answers Handbook

Passing value from ajax variable to php on the same page

Starting from 3 days I try to get a solution from Ajax and PHP, I tried all the tutorials, but I can’t get a solution, I am new to Ajax, JQuery, but my question is very simple for everyone.

I developed a website using jquery and PHP, I created a menu using HTML (ul, li), so I want, if I click on a menu item, ajax should send the value of the php variable and then execute the php function, but that's it this should happen on the same page ..

Please help me solve the problems.

So far I have tried the following:

JavaScript:

<script type="text/javascript"> $("#btn").click(function() { var val = "Hi"; $.ajax ({ url: "oldindex.php", data: val, success: function() { alert("Hi, testing"); } }); }); </script>

PHP and HTML:

 <input type="submit" id="btn" value="submit"> <form name="numbers" id="numbers"> <input type="text" name="number" id="number"> </form> <div id="number_filters"> <a href="abc">1</a> <a href="def">2</a> <a href="ghi">3</a> </div>

therefore, if I click on href, I should get the value of the php variable, this should happen only on the same page

+8
jquery php
source share
3 answers

index.php page

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function() { var val = "Hi"; $.ajax ({ url: "ajax.php", data: { val : val }, success: function( result ) { alert("Hi, testing"); alert( result ); } }); }); }); </script> <input type="submit" id="btn" value="submit"> <form name="numbers" id="numbers"> <input type="text" name="number" id="number"> </form> <div id="number_filters"> <a href="abc">1</a> <a href="def">2</a> <a href="ghi">3</a> </div>

ajax.php page

 <?php echo ( $_GET['val'] );
+6
source share

We'll see:

1- If you are making an AJAX call, your page will not be refreshed. Therefore, if you try to send variables to the same page that makes the AJAX call, this will not work, that’s why. When you can see the page and make an AJAX call, the code is already on the client side (your web explorer), PHP will not be visible or executed there (PHP is executed only on the server), therefore it is on the same page to capture and process variables, which you pass using AJAX (since AJAX will NOT refresh the page, that point is AJAX).

2- If you use AJAX, you do not need to call to the same page. Call another PHP, it will make the server side work for you, and then return the result:

 success: function(data) { alert("Hi, server returned this: "+data); }

3- When you pass variables using AJAX, you need to assign a variable a name, so it can be read on the PHP side:

 data: {value: val},

4 For what you have in your question, you do not start the AJAX call by clicking href, you have the AJAX function associated with input type=submit , it is also outside the form .. so do it better

 <button id="btn">submit</button>
+4
source share

Here is your solution as a sample code:

 <?php if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { echo $_GET['q']; exit; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(e) { e.preventDefault(); var val = "Hi"; $.ajax ({ url: "test8.php", // wrong query. you are not passing key , so here q is key data: 'q=' + val, success: function(returnResponseData) { alert('Ajax return data is: ' + returnResponseData); } }); }); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <form name="numbers" id="numbers"> <input type="text" name="number" id="number"> <input type="submit" name='button' id="btn" value="submit"> </form> </body> </html>
+1
source share

More articles:


All Articles