Submit -> Execute PHP script -> Alert User — while staying on same page

Question

I have a page with two submit buttons using if ($_POST['action'] == 'Test SMS') to executed code for my "Test SMS" button. I need to execute code from a PHP script then give an alert box while not leaving the page.

index.html

<form action="updateUserConfig.php" method="post">
<input type='submit' name='action' value='Test SMS' class='btn-test'>
<input type="submit" name="action" value="Save" class="btn btn-primary">
</form>

updateUserConfig.php

if ($_POST['action'] == 'Test SMS') { //action for Test SMS Button

   //grab ntid and phone from header
   if(isset($_POST['ntid'])) $ntid = $_POST['ntid'];
   if(isset($_POST['phone'])) $phone = $_POST['phone'];

   //using the notify_sms_users funtion from send_notification.php
   require 'send_notification.php';
   notify_sms_users(array($ntid), "", 4);

   //alert user that there message has been sent
   $alert = "Your message has been sent to " . $phone;
   echo '<script type="text/javascript">alert("'.$alert.'");';
   echo '</script>';

   header('Location: index.php');

} else {-----action for other submit button------}

I asked a similar question that was marked a duplicate at Alert after executing php script while not leaving current page but was able to come up with a solution so I wanted to share.

Answer 1

I was able to accomplish this by adding a URL query string in my header('location: index.php?text=success) function then using JS I was able to use an if statement to look for the query string and alert if so.

index.html

<form action="updateUserConfig.php" method="post">
    <input type='submit' name='action' value='Test SMS' class='btn-test'>
    <input type="submit" name="action" value="Save" class="btn btn-primary">
</form>

<script type="text/javascript">
$(document).ready(function () {
    if(window.location.href.indexOf("settings=success") > -1) {
       alert("Your settings have been saved");
    }
    else if(window.location.href.indexOf("text=success") > -1) {
       alert("A SMS has been sent!");
    }
});
</script>

updateUserConfig.php

if ($_POST['action'] == 'Test SMS') { //action for Test SMS Button

   //grab ntid and phone from header
   if(isset($_POST['ntid'])) $ntid = $_POST['ntid'];
   if(isset($_POST['phone'])) $phone = $_POST['phone'];

   //using the notify_sms_users funtion from send_notification.php
   require 'send_notification.php';
   notify_sms_users(array($ntid), "", 4);

   header('Location: index.php?text=success');

} else {-----action for other submit button------}
    header('Location: index.php?settings=success');

The only downside to this solution is that I don't have easy access to my PHP $phone variable to tell the user what number the message was sent to.

Answer 2

AJAX is the method most suited to this job, because what you are trying to achieve is a frontend interaction. Php is a server side language.

AJAX will transmit form data to the backend php script. Once the the php script has handled the data on the server, it can return the data you require to the AJAX script. This is done sometimes using JSON, especially as you have multiple variables.

$formdata = array(
    'ntid' => $_POST['ntid'],
    'phone' => $_POST['phone']
);

return json_encode($formdata);

The returned JSON code will look something like:

{"ntid":"NT ID","phone":"Phone number"}

Tutorials similar to this are very useful: [ http://www.yourwebskills.com/ajaxintro.php][1]

I have found that taking a break from your main project and investing a little time in learning the mechanics behind what your trying to achieve, enables you to solve your problem faster.