'Alert message after submitting form in PHP

I'm using form with POST method to apply session, once the form is submitted the page reloads and I can't have any alerts on the screen.

So I've used some trick I found online but it has a problem, the alert pops up after the form submitted but none of the page design works, meaning I have only blank page and alert message.

After I click "OK' to close the alert message, the page loads.

if(empty($_SESSION["shopping_cart"])) {
    $_SESSION["shopping_cart"] = $cartArray;
    $status = "Product is added to your cart!";
    header('location:product.php?status=success');
}else{
    $array_keys = array_keys($_SESSION["shopping_cart"]);
    if(in_array($code,$array_keys)) {
        $status = "Product is already added to your cart!";
        header('location:product.php?status=failed');
    } else {
        $_SESSION["shopping_cart"] = array_merge($_SESSION["shopping_cart"],$cartArray);
        $status = "Product is added to your cart!";
        header('location:product.php?status=success');
    }

}

// This right here responsible to alert the message according to the status.
if( $_GET['status'] == 'success') {
   echo '<script>  alert("welldone");   </script>';
}
else{
   echo '<script>  alert("no good");   </script>';
}

How can I solve the page loading order so the page loads first and the alert loads second?

enter image description here

javascriptphp


Solution 1:[1]

After long researching, I found solution to delay the alert message with jQuery delay() function, the delay allowing the HTML page load and then execute the alert. Thanks to all who helped me to get to this result.

  <script>
      $(document).ready(function(){
          setTimeout(function() {
              <?php
              if( $_GET['status'] == 'success') {
                  echo 'alert("welldone");';
              }
              else{
                  echo 'alert("no good");';
              }
              ?>
              }, 500);
      });
  </script>

Solution 2:[2]

alert() stops the execution of the script and the loading of the HTML page at the point in which it was called. You should move this script to the bottom of the page.

Solution 3:[3]

I had a lot of trouble with this one -- even using old answers marked "correct".

I found a work around. On window load and document ready didn't work. But if you add an image at the bottom of the page with the following script, it won't get called until the image is loaded (at the end of the page load).

This worked in all my testing.

<img id='workaround' src='https://picsum.photos/1/1'> <!-- any transparent 1x1 image would work -->
<script>
$("#workaround").on( "load", function(){
  alert("Image loaded.");
});
</script>

So for your purposes (or similar)

<img id='workaround' src='https://picsum.photos/1/1'>
<script>
$("#workaround").on( "load", function(){

<?php 
if( $_GET['status'] == 'success') {
   echo 'alert("welldone");';
}
else{
   echo 'alert("no good");';
}
?>
});
</script>

Solution 4:[4]

You could defer the script tag and it won't load until after the page is rendered.

<script src="alert.js" defer></script>

Then it will load after the page renders, and there won't be a random delay (like using wait/jquery delay).

Solution 5:[5]

Please try this code, To alert message after submitting form in PHP.

<?
if ($_POST)
    {
    if (empty($_POST['testabc'])) $msg='<script type="text/javascript">alert("BLANK");</script>';
    else $msg='<script type="text/javascript">alert("NOT BLANK");</script>';
    }
?>
<html><head></head><body>
<table>
    <tr>
        <td>
            <form id="finfo" method=POST>
                <input type="text" name="testabc">
                <input type="submit" value="info">
            </form> 
        </td>
    </tr>
</table>
<script type="text/javascript">alert("auto");</script>
<? echo $msg; ?>
</body></html>

Solution 6:[6]

Bootstrap modal could also be a better option. Modal looks prettier than alert dialogue box. It does not change current page layout during message display.

In php code:

// This right here responsible to alert the message according to the status.
$message = '';
$show_modal = false;
if( $_GET['status'] == 'success') {
    $message = "Well Done";
    $show_modal = true;
}
else{
    $message = "No Good";
    $show_modal = true;
}

In html head tag:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Then in the html:

    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Alert!</h4>
                </div>
                <div class="modal-body">
                    <p><?php echo ($message); ?></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

Finally show modal with condition in js:

<?php if($show_modal):?>
    <script> $('#myModal').modal('show');</script>
<?php endif;?>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Yotam Dahan
Solution 2 andriusain
Solution 3
Solution 4 Jeff Vdovjak
Solution 5 Dharman
Solution 6

Related Questions