Updated date:

DIY PHP and Bootstrap: Using Bootstrap Modal Box to Receive Input From User

Timothy is an enthusiast programmer and loves developing websites. He is expert in HTML, CSS, JavaScript, PHP, C#, and ASP[dot]NET.

diy-php-and-bootstrap-using-bootstrap-modal-box-to-receive-input-from-user

1. Introduction

Bootstrap modal box is a window that pops up when user perform action such as button click. It works much like JavaScript alert box but is more advanced in features. It can be used to display either a simple message or to perform more complex operation such as receiving input from user.

Bootstrap modal box has three parts as shown in following figure:

Parts of Bootstrap Modal Box

Parts of Bootstrap Modal Box

  • Header part of Modal Box is used to display title or caption of the box.
  • Body part is a place where message or user interface is defined.
  • Footer part contains buttons to perform actions such as to submit form, save data or simply close it.

Now let’s begin our journey of creating the Modal Box. Please include Bootstrap library to your page. If you don’t know how to than please follow the link given in introduction section in my tutorial at https://hubpages.com/technology/How-to-control-values-displayed-in-one-HTML-Dropdown-List-with-the-other-using-simple-JavaScript.

2. Create the Modal Box

In this section we will create the modal box. Our modal box is very simple. As for now it contain only two fields one for accepting user’s full name and other for e-mail. I am not covering much in this tutorial as it’s just the starting of the series. My modal box also contain two buttons, for submitting form and for closing the modal box if user wish to.

The logic for submit button is implemented using JavaScript in the HTML file itself, and the close button uses attribute data-dismiss="modal" which internally fires event handler to close the modal box whenever the button is clicked.

Code for Bootstrap Modal Box

Code for Bootstrap Modal Box

<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h2 class="modal-title font-weight-bold">Bootstrap Modal Form</h2>
            </div>
            <div class="modal-body mx-3">
                <div class="md-form mb-5">
                    <i class="fa fa-user prefix grey-text"></i>
					<label data-error="wrong" data-success="right" for="fname">Full Name:</label>
                    <input type="text" id="fname" class="form-control validate">
                </div>

                <div class="md-form mb-5">
                    <i class="fa fa-envelope prefix grey-text"></i>
					<label data-error="wrong" data-success="right" for="email">e-Mail:</label>
                    <input type="email" id="email" class="form-control validate">
                 </div>

            </div>
            <div class="modal-footer d-flex justify-content-center">
                <button id="send" class="btn btn-info">Submit <i class="fa fa-paper-plane-o ml-1"></i></button>
				<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

3. Launch the modal box

After the modal box is defined, we need a button to launch it so that it may appear to the user.

 <a href="" class="btn btn-success" data-toggle="modal" data-target="#modalContactForm">Launch Modal Contact Form</a>

4. Create section to display user’s submitted data

The data which user enters in the text boxes will be submitted to PHP page on the webserver and the response of PHP file is received in JavaScript code to inform user that his information is submitted successfully. To display this response I have created a section right after the definition of modal box.

<div class="modal-body">
        <div id="result"></div>
</div>
Code to launch Modal Box and Display Result

Code to launch Modal Box and Display Result

The interface will look like following

First view of Page

First view of Page

And when user click the button, modal box will appear as illustrated in following figure

View of Modal Box

View of Modal Box

5. Add JavaScript Code

Finally we need to add JavaScript code to make our modal box work

JavaScript code for Modal Box Functionality

JavaScript code for Modal Box Functionality

Following points help you understand code:

  • The click event is attached to submit button using the id of form #modalContactForm and button’s class .btn-info.
  • Value from text boxes has been extracted by using their ids #fname and #email and stored in variables vfname and vemail.
  • After extracting the values, it is sent to PHP page in the parameters fname and email.
  • And finally the response to the user is displayed in the div having id #result.
<script type='text/javascript'>

	 $(document).ready(function(){
	 $('#modalContactForm').on('click', '.btn-info', function(e){
     var vfname = $('#fname').val();
	 var vemail = $('#email').val();
   
	
			$.post("result.php", 
               { 
                  fname:vfname,
				  email:vemail,
               },
			function(response,status){ 
             $("#result").html(response);
            
          });
		  
     $('#modalContactForm').modal('hide');
   });
   });
		
  </script>

6. Create PHP file

The PHP file is a place where user's information is received and processed. In this tutorial I am only displaying it using echo function. In my next article I’ll show you how to store it to database.

<?php
   if($_POST["fname"])
   {
      
        echo "<h4>Thank you for submission!<h4>";
		echo "<br>Your Name: <b>".$_POST["fname"]."</b>";
		echo "<br>Your e-mail: <b>".$_POST["email"]."</b>";
   }
?>

7. Result

Run the form, and submit values. The result is shown in following figures.

Form is Filled with Data

Form is Filled with Data

Data is submitted and result is processed

Data is submitted and result is processed

8. Task for you

Follow the links given below to discover more on Bootstrap Modal Box and styles you may apply

you may also like to read article on my favorite list of websites that teach you web development

Download

You can download the source code for this article here:

Comments

Timothy Malche (author) from Jabalpur, M.P., India on April 16, 2019:

How to Use Bootstrap Alert With Php to Display Dynamic Information to User?

https://discover.hubpages.com/technology/How-to-us...