bootstrap modal open in same page after php sending script

Question

Another question about the contact form. I tried getting the bootstrap modal on the same page after it's send through the php script. Sadly enough I failed everytime, and now I'm a bit stuck.

What I want it do to... After clicking on the submit button, the contact form must be send by the php script, and after that the "ThankyouModal" should pop-up on the page where the contact form is.

Here's the HTML :

<div class="container main-container">
    <div class="col-md-6">
        <form action="contact-page.php" method="post">
            <div class="row">
                <div class="col-md-12">
                    <div class="input-contact">
                        <input type="text" name="name">
                        <span>Naam</span>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="input-contact">
                        <input type="text" name="email">
                        <span>E-mailadres</span>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="textarea-contact">
                        <textarea name="message"></textarea>
                        <span>Bericht</span>
                    </div>
                </div>
                <div class="col-md-12">
                    <!-- <a class="btn btn-box" input type="submit" name="submit" value="Send">Verzenden</a> -->
                    <button type="submit" name="submit" class="btn btn-box">Verzenden</button>
                </div>
            </div>
        </form>
    </div>

Here's the PHP script :

<html>
    <head>  
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

        <!-- Main CSS -->
        <link rel="stylesheet" href="css/style.css">

        <!-- Js -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<?php 

if(isset($_POST['submit'])) {     
    // EDIT THE 2 LINES BELOW AS REQUIRED

    $email_to = "test@test.com";

    // EDIT THE 2 LINES BELOW AS REQUIRED
    $sender = $_POST['email'];

    $name = $_POST['name']; // required
    $email = $_POST['email']; // required
    $message = $_POST['message']; //required


    $email_message = "Hieronder staan alle gegevens.\n\n";

    $email_subject = "Contact details - $name";

    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }

    $email_message .= "Naam: ".clean_string($name)."\n";
    $email_message .= "E-mailadres: ".clean_string($email)."\n";
    $email_message .= "Bericht: ".clean_string($message)."\n";


    // create email headers
    $headers = 'From:'.$sender."\r\n".
    'Reply-To: '.$email."\r\n" .
    'X-Mailer: PHP/' . phpversion();
    $sent= @mail($email_to, $email_subject, $email_message, $headers); 

    if($sent){
        echo "<script>
            $(document).ready(function(){
            $('#thankyouModal').modal('show');
            });
            </script>";
    }
    else {
        echo "<script>
            alert('Sorry! Er is iets mis gegaan, probeer het opnieuw.')
            location.replace('contact.html')
            </script>";
    }
}
?>

    </head>
    <body>
        <div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header text-center">
                    <h2 class="modal-title text-center" style="font-weight: 600; color: #393939;">BEDANKT</h2>
                    </div>
                    <div class="modal-body text-center" style="background-color: #fff;">
                    <p style="font-weight: 600; color: #393939; font-size: 18px;">Ik neem zo spoedig mogelijk contact op!</p>
                    </div>
                    <div class="modal-footer" style="background-color: #fff; border-top: 0px solid #fff;">
                    <button type="button" class="btn btn-box" aria-label="Close"><a href="contact.html" style="color:fff;" data-dismiss="modal" onclick="javascript:window.location='contact.html'">Sluiten</a></button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </body>
</html>

I realize that it's all the fields are in Dutch language, but the code must be universal. Maybe if there's a solution for the pop-up thing I would also like to know how to implement the same pop-up for the "failed" message.

Thanks in advance guys! Kevin

A better way would be to use ajax to post the form and on success change the dom content on .modal-content with your thank you. — Lawrence Cherone, Nov 26 '17 at 16:51
Why don't you try doing it by ajax? Post the data to the required function and send a success response on saving user info. If data received is success then show modal. `$("#modal-id).modal();` else show error. Page will more responsive and form is submitted without refreshing the page. — BEingprabhU, Nov 26 '17 at 16:53
I appreciate the comments but I never worked with AJAX or PHP, I'm more of a front-end guy (officially a graphic designer) so a bit more explanation would be awesome. :) @LawrenceCherone — ZnortDesigns, Nov 26 '17 at 16:58
Read: [jQuery Ajax POST example with PHP](https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) — Lawrence Cherone, Nov 26 '17 at 17:01
You need to use ajax '. done' function and put inside that fn the simple bootstrap modal — csandreas1, Nov 28 '17 at 21:14

Chris · Accepted Answer · 2017-11-28T20:47:48.827

This should do the trick:

form.html:-

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>Contact Form</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
  <div class="container main-container">
    <div class="col-md-6">
      <form  id="contact-form">
        <div class="row">
          <div class="col-md-12">
            <div class="input-contact">
              <input type="text" name="name">
              <span>Naam</span>
            </div>
          </div>
          <div class="col-md-12">
            <div class="input-contact">
              <input type="text" name="email">
              <span>E-mailadres</span>
            </div>
          </div>
          <div class="col-md-12">
            <div class="textarea-contact">
              <textarea name="message"></textarea>
              <span>Bericht</span>
            </div>
          </div>
          <div class="col-md-12">
            <!-- <a class="btn btn-box" input type="submit" name="submit" value="Send">Verzenden</a> -->
            <button type="submit" name="submit" class="btn btn-box">Verzenden</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center">
          <h2 class="modal-title text-center" style="font-weight: 600; color: #393939;">BEDANKT</h2>
        </div>
        <div class="modal-body text-center" style="background-color: #fff;">
          <p style="font-weight: 600; color: #393939; font-size: 18px;">Ik neem zo spoedig mogelijk contact op!</p>
        </div>
        <div class="modal-footer" style="background-color: #fff; border-top: 0px solid #fff;">
          <button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <div id="fail-modal" class="modal fade" 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">Fail Modal</h4>
        </div>
        <div class="modal-body">
          <p>Something went wrong in the php script</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
        </div>
      </div>
    </div>
  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#contact-form").on("submit", function(event) {
        event.preventDefault();

        request = $.ajax({
          url: "process.php",
          type: "post",
          data: $(this).serialize(),
          dataType:"json"
        });

        // Callback handler that will be called on success
        request.done(function (response, textStatus){
          if (response == true ) {
            console.log('true');
            $('#thankyouModal').modal('show');
          } else {
            console.log('false');
            $('#fail-modal').modal('show');
          }
        });

        // Callback handler that will be called on failure
        request.fail(function (textStatus, errorThrown){
          // Log the error to the console
          console.error(
            "The following error occurred: "+ textStatus, errorThrown
          );
        });
      });
    });
  </script>
</body>
</html>

process.php:-

<?php
header('Content-Type: application/json');

$sent = false;
if(isset($_POST['submit'])) {     
    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "test@test.com";

    // EDIT THE 2 LINES BELOW AS REQUIRED
    $sender = $_POST['email'];

    $name = $_POST['name']; // required
    $email = $_POST['email']; // required
    $message = $_POST['message']; //required

    $email_message = "Hieronder staan alle gegevens.\n\n";

    $email_subject = "Contact details - $name";

    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }

    $email_message .= "Naam: ".clean_string($name)."\n";
    $email_message .= "E-mailadres: ".clean_string($email)."\n";
    $email_message .= "Bericht: ".clean_string($message)."\n";

    // create email headers
    $headers = 'From:'.$sender."\r\n".
    'Reply-To: '.$email."\r\n" .
    'X-Mailer: PHP/' . phpversion();
    $sent= @mail($email_to, $email_subject, $email_message, $headers); 
}

die(json_encode($sent));

?>

For the success modal to appear $sent must be true at the end of process.php

I haven't tested your php script - thats upto you. There is probably a better way of checking the response than the way I have done it but this should be nice and simple since its the first time you have used ajax

Hi @chris sadly enough its not sending the info. But the php is working. You can test it here : test.znortdesigns.com — ZnortDesigns, Nov 27 '17 at 19:48
I'm not home at the moment so can't test anything. The script I posted should be working. Are you including jQuery and bootstrap? Are you getting any errors in console? I'll take another look tonight when I get home — Chris, Nov 28 '17 at 07:31
I'm loading jQuery in the footer, maybe that's the issue... Let me check. :) — ZnortDesigns, Nov 28 '17 at 17:55
I have edited my answer with complete scripts, however they were still working for me.. I'm guessing you were testing by submitting a blank form so $sent was never being set as you are not doing any $_POST checks. I have now set sent to be false outside of your mail script so that you should always get a response. — Chris, Nov 28 '17 at 20:51
Damn Chris, you saved my ass... I made a mistake when pasting the code. You did a great job, thanks for your help. But the succes message is also showing when sending an empty form. How could I fix this? — ZnortDesigns, Nov 28 '17 at 22:19
You need to make sure that the email has been sent before setting $sent = true. You should also check that all required fields are filled in before sending the form. — Chris, Nov 29 '17 at 13:55
I changed the value, and it's showing the modal, but I'm not receiving any emails. I give up... Thanks for your help Chris. — ZnortDesigns, Nov 30 '17 at 10:14
like I said, I didn't test your php script... you should probably start a new question asking for help with your mail script — Chris, Dec 01 '17 at 00:18

bootstrap modal open in same page after php sending script

1 Answers1