Change PHP Variable with Ajax

Update PHP Variable after Ajax call

You don't want to do the live updating with PHP variables, since those are only refreshed when the page is reloaded. Instead, you want to update an element's value via AJAX. As far as I can tell, you want to update the expiration date. If you don't, just let me know and I can change the code to whatever it's supposed to do.

Here's the "control flow" of this functionality:

1. (Entry point) User clicks 'Submit', jQuery event handler fires
2. jQuery AJAX function is called and sends the promo code to a PHP script
3. In the PHP script, the database is updated with the promo code.
4. The PHP script returns the new expiry date (I'll assume that it's in the d/m/Y format you wanted)
5. The callback in the jQuery AJAX function receives the data from the script.
6. The callback's function body updates the "Expiry" element on the page with the value from the PHP call.

Here's how to put that into HTML / JavaScript:

<h4 class="sbText mt-10" id="expiry_label">
    Trial End Date: <?php echo date("d/m/Y",
                    strtotime($trialExpiry)); // The initial value can be displayed as normal. ?>
</h4>

<form id='promocode'>
     <input type='text' class='sbInput' placeholder='Promo Code' name='promocode'>
     <input type='hidden' name='userid' value='<?php echo $userID; ?>'>
     <button class='btn sbSubmit'>Submit</button>
</form>

 <script>
     $(function () {
         $('#promocode').on('submit', function (e) {
              e.preventDefault();
              $.ajax({
                 type: 'post',
                 url: '../model/process-promo-code.php',
                 data: $('#promocode').serialize(),
                 success: function (result) {
                      $("button.btn").css({
                         'transition-duration': '1000ms',
                          'opacity': '0.5'
                       });
                       document.getElementById("expiry_label").innerHTML = "Trial End Date: " + result;
                 }
             });
        });
  });
</script>

As you can see, I only added an "id" attribute to the element, a parameter to the "success" property of the AJAX call, and a line of code to update the element.

Hope I helped!

Change PHP Variable on Select Change using Ajax and use in SQL query

First thing:

Instead of writing:

var selectValue = $('#select option:selected').val();

you can just use:

var selectValue = $('#select').val();

---

Second thing:

You have set the value of the select outside of your function, so when your listener for 'change' runs, the value of selectValue has already been set, you never overwrite it.

You'll want to move where you set the value of the variable to the following:

$(document).ready(function() {
  $('select').on('change', function() {
    var selectValue = $(this).val();

---

Third thing:

As mentioned in the comments, you are looking for the key selectValue in the below code:

$selectedValue = $_POST['selectValue'];

When you should be looking for:

$selectedValue = $_POST['selected'];

because that's what you sent through via AJAX, here:

data: {
   selected: selectValue
}

---

Fourth thing:

You've not sanitized the users input at all, leaving you open to SQL injection.

$query = "SELECT * FROM customers WHERE delivered='$selectedValue'";

To protect against SQL injection you'll want to consider updating to PDO:

How to prevent SQL injection

Order of scripts and php variables for AJAX post on a page (loading order)

The page and its contents is rendered from top to bottom.
So if you call variable X, you must declare it first, then call it => this should answer about the order.
Now regarding Ajax and php. The php code is only rendered once, since this is how it is suppose to work. AJAX was invented so developers can call/access server side variables without reloading the entire page (which you are doing here).
The problem is you are mixing AJAX and PHP: your php variable $startRow2send will only have one single value. I think you would want that also this PHP variable value changes with the AJAX call. For that, you should understand that the AJAX call only calls the JAVASCRIPT function. firstPage(). PHP variable remains constant until you reload the page. PHP/HTML only renders the page once and that's it. AJAX/JS can do more actions, since they are run from within the browser (locally).
So, maybe you should change the php var into a javascript variable, and put it inside the function. Then with every call also your variable will change.

// you can use this function to generate a random number in Javascript
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

// then in your original function you can add

function firstPage() {
  // generate a random between 100 and 999
  var myJSRandomNr = getRandomArbitrary(100, 999)

  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("ajaxCall").innerHTML = this.responseText;
    }
  xhttp.open("POST", "postRec.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("startRow2send=" + myJSRandomNr );
}

Change value of PHP variable with AJAX

You would have to modify your PHP script to allow for this.

For example:

PHP:

if (isset($_POST['change']))
{
    $mainView = $_POST['change'];
    echo $mainView;
}

HTML & jQuery:

<button id="change">Change the var</button>
<script>
$("#change").click(function() {
    $.post("file.php", {change: $(this).val()},
        function (data)
        {
           $("#mainContent").html(data);
        });
});
</script>

---

Related Topics