Update PHP Variable after Ajax call - php

Question

I am making an Ajax call to a PHP file that checks a condition and runs a query a MySQL query if the conditions are met.
The query updates a table in my DB with a new value. This all works great. I would like to know how to show the new value in the current page without having to manually reload. Code is Below.
The variable I am updating is $trialExpiry
HTML/PHP
<h4 class="sbText mt-10">Trial End Date: <?php echo date("d/m/Y",
strtotime($trialExpiry)); ?></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>
JQUERY
<script>
$(function () {
$('#promocode').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '../model/process-promo-code.php',
data: $('#promocode').serialize(),
success: function () {
$("button.btn").css({
'transition-duration': '1000ms',
'opacity': '0.5'
});
}
});
});
});
</script>
Thanks so much.

Answer 1

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:
(Entry point) User clicks 'Submit', jQuery event handler fires
jQuery AJAX function is called and sends the promo code to a PHP script
In the PHP script, the database is updated with the promo code.
The PHP script returns the new expiry date (I'll assume that it's in the d/m/Y format you wanted)
The callback in the jQuery AJAX function receives the data from the script.
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!

Answer 2

You need to add a callback -- IE
<script>
$(function () {
$('#promocode').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '../model/process-promo-code.php',
data: $('#promocode').serialize(),
success: function (data) { //<---- CALLBACK
alert(data); // data contains the return from the ajax call
$("button.btn").css({
'transition-duration': '1000ms',
'opacity': '0.5'
});
}
});
});
});
</script>

Answer 3

Only change the success function like below
success: function (data) { //<---- CALLBACK
$('input["name='userid' "]').val(data); // data contains the return from the ajax call
$("button.btn").css({
'transition-duration': '1000ms',
'opacity': '0.5'