bootstrap 模態框提交表單
阿新 • • 發佈:2019-02-10
<!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 點選就送 </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <form id="updateform" action="test.php" > <div class="form-group"> <label for="loginname" class="control-label">使用者名稱:</label> <input type="text" class="form-control" id="loginname" name="loginname"> </div> <div class="form-group"> <label for="email" class="control-label">Email:</label> <input type="text" class="form-control" id="email" name="email"> </div> <div class="form-group"> <label for="phone" class="control-label">電話:</label> <input type="text" class="form-control" id="phone" name="phone"> </div> <div class="form-group"> <label for="address" class="control-label">收貨地址:</label> <textarea class="form-control" id="address" name="address"></textarea> </div> <div class="text-right"> <span id="returnMessage" class="glyphicon"> </span> <button type="button" class="btn btn-default right" data-dismiss="modal">關閉</button> <button id="submitBtn" type="button" class="btn btn-primary" onclick="add_info()" >修改</button> </div> </form> </div> </div> </div> </div> </body> <script> function add_info() { var form = document.getElementById('updateform'); form.submit(); $("#myModal").on("hidden.bs.modal", function() { $(this).removeData("bs.modal"); }); } </script>
add_info()裡面最後的操作是用來重新整理模態框的,如果不加的話每次點開模態框還會保留上次的資料