Passing value from ajax to php variable in same page

Question

Since 3days i am trying my best to get the solution from Ajax & PHP, i tried all tutorial but i am unable to get the solution, i am new to Ajax,Jquery but my question is really simple to you all.

i have developed website using jquery & PHP, i have created menu using HTML (ul, li) so what i want is, if i click on menu item ajax should send value to php variable and then execute php function, but all this should happen in same page,..

Please help me to resolve the issues.

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>

so if i click on href, i should get the value to php variable it should happen in same page only

for example if i writing above script in gallery.php, then ajax should pass value to gallery.php only, it should happen in self page only... — user2454281
– user2454281, Commented Jun 5, 2013 at 7:08

som · Accepted Answer · 2013-06-05 10:17:26Z

4

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'] );

edited Jun 5, 2013 at 10:17

answered Jun 5, 2013 at 7:19

som

4,6542 gold badges23 silver badges36 bronze badges

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

11 Comments

som Over a year ago

you can get the value using $_GET['val'] in your "oldindex.php" page.

user2454281 Over a year ago

<?php echo $_GET['val']; ?>

user2454281 Over a year ago

<html xmlns="w3.org/1999/xhtml"> <head> <script type='text/javascript' src="ajax.googleapis.com/ajax/libs/jquery/1.7.1/…> <script type="text/javascript"> $("#btn").click(function() { var val = "Hi"; $.ajax ({ url: "test8.php", data: val, success: function() { } }); }); </script>

som Over a year ago

@user2454281 Did you change data: val to data : {val : val}. I have checked locally and it is working fine.

Nono Over a year ago

Guys, above answer is not for same page. It;s using another page and question is about ajax response in same page. Here, same page means ajax code and ajax url are in same page.

|

Naryl · Accepted Answer · 2013-06-05 07:17:50Z

4

Let's see:

1- If you are doing a AJAX call, your page won't be refreshed. So if you try to send variables to the same page that makes the AJAX call it won't work, here's why. When you are able to see the page and execute the AJAX call, the code is already on the client side (your web explorer), there no PHP will be seen or executed (PHP is executed on the server only), so it's imposible for the same page to capture and process variables you pass to it using AJAX (since AJAX WON'T refresh the page, that's the point of AJAX).

2- If you are using AJAX you don't have to call to the same page. Call to another PHP, it will make the server side work for you, then return the result:

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

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

data: {value: val},

4- For what you have in your question, you don't start the AJAX call clicking a href, you have the AJAX function linked to a input type=submit, it also is outside a form.. so let's do this better:

<button id="btn">submit</button>

answered Jun 5, 2013 at 7:17

Naryl

1,8881 gold badge10 silver badges12 bronze badges

1 Comment

user2454281 Over a year ago

Hi, can you give me sample code so i can try plz, i am really new to ajax and jquery..

Nono · Accepted Answer · 2013-06-05 10:48:11Z

Here is your solution as given 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>

Collectives™ on Stack Overflow

Passing value from ajax to php variable in same page

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related