html - Can't get rid of blank php page after submission form

Solution:

What you are trying to achieve seems different from what you actually coded.

Let's look at your HTML form. You have attached Bootstrap'sdata-toggle anddata-target attributes on your submit button. This means that when you click that button, it will open the modal AND submit the form. So the user will briefly see a modal and see the page redirect to your PHP file. (This is why you are seeing a modal appear briefly.)

Next, let's look at your PHP file. First of all, when you submit a form from one page to another page, that latter page has no idea of the HTML elements in your former page. This means the code you have inside your echo'd<script> tag actually should not be working as it is looking for an HTML element on your former page.

Now, for your question as to why are you getting a blank page? Well... everything is working fine so your code echo's a<script> tag -- which has no visual indicator. But like I just said, what you have inside the<script> does not work -- so nothing shows up and nothing happens.

So recap of the order of events when you click your button: the modal shows up, the form submits, the form redirects to another page, and that other page echo's nothing.

Below is a poor/quick solution to what I think you are trying to achieve:

1. Change your HTML file to a PHP file.

2. Removedata-toggle anddata-target attributes off your button, so that it doesn't open the modal right when you click the button

   <form action="form.php" method="post">
       <div class="form-group label-floating">
           <input name="email" class="control-label form-control text-center" type="text" placeholder="Enter your email address ...">
           <button type="submit" class="btn btn-primary">Send</button>
       </div>
   </form>
   Copy code

3. Move your echo'dscript tag from your PHP submission page to your PHP form page and wrap it in a condition as shown below:

   <?php if (!empty($_GET['success'])) : ?>
       <script>
           $(document).ready(function(){
               $("#myModal").modal();
           });   
       </script>
   <?php endif ?>
   Copy code

4. Remove your echo'dscript tag lines of code in your PHP submission page. Instead, add a code so that it redirects back to your PHP form page. The key part is that you will append a?success=true at the end of your URL.

   $email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL); // valid email or null|false
   
   if ($email) { 
       $to = "[email protected]";
       $from = "[email protected]";
       $headers = "From: " . $from . "\r\n";
       $subject = "New Beta Subscription";
       $body = "New user interested in beta program: " . $email;
   
       if (mail($to, $subject, $body, $headers, "-f " . $from)) {
           header('Location: subscribe.php?success=true'); // replace `subscribe.php` with PHP form page
           exit;
       } 
       echo 'There was a problem with your e-mail (' . $email . ')';   
   } else {
      echo 'There was a problem with your e-mail'; // no point in printing $email if it is null   
   }
   Copy code

Basically, passing?success=true is for telling the PHP form page that everything went well to open the modal (3).

And that should be it.

A better approach is to learn and use AJAX.

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.