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

Answer 1

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

Answer 2

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>