Using AJAX to pass Javascript var to PHP on same page

Question

I have a page that started with an empty PHP var. Then, when the user clicks on a link I want to pass the value of the name attribute to a JS var, and then pass that JS var to the same page and then update the PHP var with the JS var value. Here is a simple example of what I am trying to do:

// PHP
<?php
    // Starts empty, then when posted should update
    $jsVar = $_POST['jsVar'];
    echo $jsVar;
 ?>


<!-- HTML-->
<!-- Link to click with name vlue to pull-->
<a href="#" name="link">Click Me</a>


<!-- JAVASCRIPT -->
<!-- Import jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    // On link click
    $('a').click(function(e){

        // Prevent link default behavior
        e.preventDefault();

        // Store name vale as jsVar
        jsVar = $(this).attr("name");

        
        $.ajax({
            type: "POST",
            // url: ""   <--------------- From what I read, if you want to post to the same page you just don't inclue the URL?
            data: {jsVar : jsVar}, // <--------- This was also something I found online that supposedly helps pass JS vars to PHP?
            success: function(data)
            {
                alert("success!");
            }
        });
    });

</script>

A lot of people say that I don't need AJAX for this. The example I provided is a much similar version of what I am trying to do, which is dynamically change an include file based on the user clicking a sidebar item. I don't want to use a form for this, do I?

The idea of using AJAX is the fact you're doing a request in the background, without needing to leave the page. If you send an AJAX request to the same page, the whole point would be lost. So basically, the steps would be like this: 1. User enters a page. 2. User clicks the button, which triggers an AJAX request. 3. The Javascript will wait for the response of the sent AJAX request. 4. The Javascript will update the page with the response retrieved from the server. (Or handles the fact the data could not be retrieved...) — JiFus
– JiFus, Commented Jun 23, 2018 at 18:07
you dont update the variable, thats not how it works if you wish to do it anyway then use a form instead w3schools.com/php/php_forms.asp look at the example and read at this ajax-php tutorial guru99.com/php-ajax.html — Geomorillo
– Geomorillo, Commented Jun 23, 2018 at 18:09
Make these changes :- <a href="#" name="link" id="link">Click Me</a> $('#link').click(function(e){ — PHP Web
– PHP Web, Commented Jun 23, 2018 at 18:11

Tobin Shields · Accepted Answer · 2018-06-23 18:25:54Z

1

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.

answered Jun 23, 2018 at 18:25

Tobin Shields

1497 bronze badges

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

Collectives™ on Stack Overflow

Using AJAX to pass Javascript var to PHP on same page

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related