Good Day!

I am having a difficulty when it comes to showing a pop-up box in my webpage. I would like to show it when it meets a certain condition inside my php code, which is under the Condition.php. I have included the js file, which removes a certain class to make the box visible. How would I execute the JS code inside the Condition.php when it meets a certain condition?

Here are my codes:

Condition.php

<?php
    // Defined variables and additional codes section
    if (strlen($str) == 4) {
        // Show the popup box
    }
    // Additional Codes
?>

ConfirmCheck.js

$(document).ready(function () {
    $('#confirm').click(function () {
        $('.popup').removeClass("hide");
    });
});

Check.php

<form class="frm" action="Condition.php" method="POST">
    // Additional Codes here
    <input type="submit" name="checkOutBtn" value="CONFIRM" id="confirm">
</form>

<?php include 'box.php';?>
<script src='ConfirmCheck.js'></script>

Box.php

<div class="popup hide" id="popupID">
    <div class="box">
            <div class="form">
                <h1>SUCCESS!</h1>
                <form action="home.php">
                    <div class="form-group">
                        <p class="paragraph">
                            Your order has been successfully placed!
                        </p>
                        <button class="homepageBtn" onclick="home.php">GO TO THE HOME PAGE</button>
                    </div>
                </form>
            </div>
        </div>
</div>

CodePudding user response：

To do what you require simply put the if condition inside box.php and remove condition.php as it serves no purpose having an entire PHP page for a single condition.

box.php

<div class="popup <? if (strlen($str) != 4) { ?>hide<? } ?>" id="popupID">
  <div class="box">
    <div class="form">
      <h1>SUCCESS!</h1>
      <form action="home.php">
        <div class="form-group">
          <p class="paragraph">
            Your order has been successfully placed!
          </p>
          <button class="homepageBtn" onclick="home.php">GO TO THE HOME PAGE</button>
        </div>
      </form>
    </div>
  </div>
</div>

CodePudding user response：

I guess the problem is that you've set the action of your form to Condition.php but included the box design and code on check.php.

Note that #confirm is and input of type submit so after its pressed it will redirect you to the page specified at the action of the form.

I can suggest two possible fixes to that:

1. [least suggested] display the confirmation box on the Condition.php page
2. [most suggested] use AJAX!

The first fix requires you to move the markup and styles for box to the Condition.php file and design a whole confirmation/post action page

The second fix is better because by sending the Data to the server using AJAX you're not only going to stay on the same page (check.php) but you can also sort of hide the address to Condition.php which is supposed to be a backend file(from what i understood)

The structure should look something like this:

check.php:

<div class="frm">
    // Additional Codes here
    <buttin name="checkOutBtn" id="confirm">CONFIRMM</button>
</form>

<?php include 'box.php';?>
<script src='ConfirmCheck.js'></script>

ConfirmCheck.js:

$(document).ready(function () {
    $('#confirm').click(function () {
        // code to get all of your fields and put them in a js object: FDATA
        $.ajax({type:'POST', url:'Condition.php', data: FDATA,
        success:function(){
             $('.popup').removeClass("hide");
        }});
    });
});

Condition.php:

<?php
    // Defined variables and additional codes section
    if (strlen($str) == 4) { //success
        echo "success message";
    }else{ // failed
        header('HTTP/1.0 400 Bad Request');
        die("bad request");
    }
    // Additional Codes
?>

The request goes back and forth between check.php and Condition.php in the background and your code gets notified through a callback whether or not to show the box.