CODEWITHSUNDEEP
javascriptphpjquerytwitter-bootstrap
Alyssa Reyes
Alyssa Reyes

Reputation: 2439

php script mailer modal bootstrap

Hi I submit my form using modal in bootstrap How can I make this work with dismissal message and not closing the modal?

HTML

<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header modal-header-custom">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>

                <div class="modal-body text-center">

                    <form class="form-inline requestaccessForm" role="form" name="requestaccessForm">
                      <div class="form-group">
                        <label class="sr-only" for="First Name">First Name</label>
                        <input type="text" class="form-control" id="request_first_name" placeholder="First Name">
                      </div>
                      <div class="form-group">
                        <label class="sr-only" for="Last Name">Last Name</label>
                        <input type="text" class="form-control" id="request_last_name" placeholder="Last Name">
                      </div>
                      <div class="form-group">
                        <label class="sr-only" for="email">Email</label>
                        <input type="email" class="form-control" id="request_email" placeholder="Email">
                      </div>
                      <button type="submit" id="requestformSubmit" class="btn btn-green">Submit</button>

                    </form>
              </div>
            </div>
          </div>
    </div>

PHP

<?php
 $myemail = '[email protected]';
 if (isset($_POST['request_first_name'])) {
 $request_first_name = strip_tags($_POST['request_first_name']);
 $request_last_name = strip_tags($_POST['request_last_name']);
 $request_email = strip_tags($_POST['request_email']);

  echo "<span class=\"alert alert-success\" >Your message has been received. Thanks!       
  Here is what you submitted:</span><br><br>";
  echo "<stong>Name:</strong> ".$request_first_name."<br>"; 
  echo "<stong>Name:</strong> ".$request_last_name."<br>";  
  echo "<stong>Email:</strong> ".$request_email."<br>"; 


 $to = $myemail;
 $email_subject = "Contact form submission: $request_first_name";
 $email_body = "You have received a new message. ".
 " Here are the details:\n Name: $request_first_name \n ".
 "Email: $request_email\n";
 $headers = "From: $myemail\n";
 $headers .= "Reply-To: $request_email";
 mail($to,$email_subject,$email_body,$headers);
 }?>

Javascript

    $(document).ready(function () {
        $("button#requestformSubmit").click(function(){
            $.ajax({
                type: "POST",
                url: "process.php", // 
                data: $('form.requestaccessForm').serialize(),
                success: function(msg){
                    alert("success");
                },
                error: function(){
                    alert("failure");
                }
            });
        });
    });

Thank you

Upvotes: 1

Views: 813

Answers (1)

juanreyesv
juanreyesv

Reputation: 853

To achieve that you have to take some steps first..

  1. Add a div inside the modal which will serve as the success message container.

    Before closing the <div class="modal-body text-center"> add the following code:

    ...
<div id="successMessage"/></div>
...

  2. Change the success handler of the $.ajax request to add the dismissal/success message into the div created in the previous step.

    Add the following code to your $.ajax success handler:

    ...
success: function(msg){
             $("#successMessage").html(msg);
},
...

  3. Prevent default actions from the button click so that the modal will not be closed after the request.

    Add the following line at the end of your jQuery click function:

    return false;

So your jQuery code will look something like this:

    $(document).ready(function () {
    $("button#requestformSubmit").click(function(){
        $.ajax({
            type: "POST",
            url: "process.php", // 
            data: $('form.requestaccessForm').serialize(),
            success: function(msg){
                $("#successMessage").html(msg);
            },
            error: function(){
                alert("failure");
            }
        });
        return false; 
    });
});

Hope this helps you out

Upvotes: 1

Related Questions