양식을 데이터베이스에 제출하고 같은 페이지에 머문 후 모달 창 구현

Question

제출 후 확인 모달 창을 어떻게 구현할 수 있습니까? 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> 

Answer 1

아약스를 통해 양식을 게시하십시오. 아래 참조

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

}); 

});