1. 程式人生 > >bootstrap 模態框提交表單

bootstrap 模態框提交表單

<!-- 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()裡面最後的操作是用來重新整理模態框的,如果不加的話每次點開模態框還會保留上次的資料