在表单提交到数据库之后实现模式窗口并保持在同一页面上

Question

How can I implement a confirmation modal window after after submitting . I can insert data into database from a PHP form , but the problem is it redirects to another page . And the value I have written in form still remain . I want to remain on the same page just use an confirmation modal window and the form will be refreshed not the whole page .

<form role="form" action="db.php" method="post">
                                <div class="form-group">
                                    <label for="name">Name</label>
                                    <input type="text" class="form-control" id="name" placeholder="Your Full Name">
                                 </div>
                                 <div class="form-group">
                                    <label for="address">Delivery Address</label>
                                    <input type="text" class="form-control" id="address" placeholder="Address">
                                 </div>
                                 <div class="form-group">
                                    <label for="phone">Phone No</label>
                                    <input type="text" class="form-control" id="phone" placeholder="Phone No">
                                 </div>
                                  <div class="form-group">
                                    <label for="email">Email address</label>
                                    <input type="email" class="form-control" id="email" placeholder="Enter email">
                                  </div>
                                  <div class="form-group">
                                    <label for="exampleInputEmail1">Quantity</label>
                                    <select class="form-control" id="quantity">
                                      <option>1</option>
                                      <option>2</option>
                                      <option>3</option>
                                      <option>4</option>
                                      <option>5</option>
                                    </select>
                                  </div>
                                  <div class="form-group" >
                                    <label for="exampleInputEmail1">Expected Date</label>
                                     <input id="datepicker" />
                                  </div>


                                  <button type="submit" class="btn btn-default" >Submit</button>
                            </form>

Answer 1

Post your form via ajax. See below

$( "#formid" ).submit(function( event ) {
 event.preventDefault();

 $.ajax({
   url: 'db.php',
   type: 'POST',
   data:  $('#formid').serialize(),
   success: function(response) { 
   if(response == 'Success') {  
       $('#model_div_id').html("Success");
       $('#model_div_id').modal('show'); //twitter bootstrap modal  
   },

});

});