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

时间:2014-01-09 04:40:46

标签: php jquery forms modal-dialog

如何在提交后实施确认模式窗口。我可以从PHP表单将数据插入数据库,但问题是它重定向到另一个页面。我在表格中写的价值仍然存在。我想保持在同一页面只使用确认模式窗口,表格将刷新而不是整个页面。

<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>

1 个答案:

答案 0 :(得分:2)

通过ajax发布您的表单。见下文

$( "#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  
   },

});

});