Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools

Posted by Ryan Salmons
Ryan Salmons
4,925 Points

Boostrap 3 Modal - PHP XHR/AJAX

I am building a simple contact form using Bootstrap 3's Modal template. I have developed a functioning php script that sends the contact form to an email account. However, after pressing the send button in the modal, it jumps to the php page as opposed to simply closing the modal on the current page.

My question: How can I use XHR/AJAX to validate the form using PHP and return errors on the modal form if there are any, or close the modal and pop up a successful alert when it is properly validated?

3 Answers

Alan Johnson
Alan Johnson
7,625 Points
Alan Johnson
Alan Johnson
7,625 Points

Can you post what code you have for that page so far? That'll help us help you.

Ryan Salmons
Ryan Salmons
4,925 Points

toggle code for the modal. 

<li><a href="#myModal" role="button" data-toggle="modal">Contact Us</a></li>
Ryan Salmons
Ryan Salmons
4,925 Points
Ryan Salmons
Ryan Salmons
4,925 Points

Here is my html code to toggle the modal. 

<li><a href="#myModal" role="button" data-toggle="modal">Contact Us</a></li>

Followed by the modal code itself: 

<!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-  hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                     <h4 class="modal-title" id="myModalLabel">Contact Us</h4>
                </div>
                <div class="modal-body">
                      <form class="form-horizontal name="commentform">
                     <div class="form-group">
                             <label class="control-label col-md-4" for="first_name">First Name</label>
                      <div class="col-md-6">
                             <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name"/>
                      </div>
                          </div>
                    <div class="form-group">
                      <label class="control-label col-md-4" for="last_name">Last Name</label>
                <div class="col-md-6">
                           <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name"/>
                </div>
                    </div>
                   <div class="form-group">
                <label class="control-label col-md-4" for="email">Email Address</label>
                <div class="col-md-6">
                    <input type="email" class="form-control" id="email" name="email" placeholder="Email Address"/>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-4" for="comment">Question or Comment</label>
                <div class="col-md-6">
                    <textarea rows="6" class="form-control" id="comments" name="comments" placeholder="Your question or comment here"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" value="Submit"  class="btn btn-primary">Send</button>
            </div>
        </form>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

What I want to do is to use XHR/ajax to prevent the modal from closing, validate for errors, submit with php, and return a confirmation message to the modal all before closing it. Then it can close the modal.

Alan Johnson
Alan Johnson
7,625 Points
Alan Johnson
Alan Johnson
7,625 Points

Got it! What JavaScript do you have so far?

Ryan Salmons
Ryan Salmons
4,925 Points
Ryan Salmons
Ryan Salmons
4,925 Points

Well, I am currently just learning the basic of JavaScript so I don't really know the syntax just yet, but I can give you the basic pseudocode that I would expect would work.

on submit (disable close modal) {
  validation check with php;
  if ( true) { send php mail form and return success message} else { return validation errors};
  close modal; 
  }

Let me know if you can assist me in the JavaScript. Thanks.

Alan Johnson
Alan Johnson
7,625 Points
Alan Johnson
Alan Johnson
7,625 Points

Your pseudocode is definitely on the right track! The reason your modal is closing is due to the fact that by default, HTML forms submit submit and display the response in the whole window. AJAX (or XmlHttpRequest) makes it possible to make a request from a script without refreshing the whole window. So the act of using XHR will handle disabling closing of the modal.

Here are some helpful links to jQuery's documentation that should start to point you in the right direction:

  • .submit() - Binds an event handler to the submit event for your form.
  • .serialize() - Converts the fields of an HTML form to data that you can submit with XHR.
  • .post() - Submits a request with XHR.

I hope those help! It sounds like you may want to dig into the Build an Interactive Website course as well. It'll help you gain confidence with JavaScript and how it interacts with HTML.