javascript - 如何在 Bootstrap 模式中提交提交数据？

Question

我有一个包含两个输入的表单，用户名和密码以及一个确认任务的模式。模式打开并尝试提交后，它什么也不做:

    <form action="login.php" method="POST" id="form1">
    
    <input class="form-control" placeholder="Enter username" name="username" id="username">
    <input class="form-control" placeholder="Enter password" name="password" id="password">
    
    <input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" /> 
    
    </form>

    <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    Confirm Submit
                </div>
                <div class="modal-body">
                    is your username and password correct?
                    <table class="table">
                        <tr>
                            <th>username</th>
                            <td id="uname"></td>
                        </tr>
                        <tr>
                            <th>password</th>
                            <td id="psw"></td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a href="#" id="submit" class="btn btn-success success">Submit</a>
                </div>
            </div>
        </div>
    </div>

    <script>
    $('#submitBtn').click(function() {
         $('#uname').text($('#username').val());
         $('#psw').text($('#password').val());
    });
    
    $('#submit').click(function(){
        $('#form1').submit();
    });
    </script>

表单数据必须使用POST方法发送到服务器。如何实现这一目标？任何答案都值得赞赏。

Answer 1

您的模态表单超出 form 范围标记 so，它不是 HTML form 的一部分因此它不会发布任何数据。HTML form element 定义了一个用于收集用户输入的表单，并且可以包含其他 HTML 元素。

此外，您还可以使用<input type="submit">或<button type="submit">将数据直接提交到 form .

$('#submitBtn').click(function() {
     $('#uname').text($('#username').val());
     $('#psw').text($('#password').val());
});

$('#submit').click(function(){
    $('#form1').submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="login.php" method="POST" id="form1">

<input class="form-control" placeholder="Enter username" name="username" id="username">
<input class="form-control" placeholder="Enter password" name="password" id="password">

<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" /> 

<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Submit
            </div>
            <div class="modal-body">
                is your username and password correct?
                <table class="table">
                    <tr>
                        <th>username</th>
                        <td id="uname"></td>
                    </tr>
                    <tr>
                        <th>password</th>
                        <td id="psw"></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a href="#" id="submit" class="btn btn-success success">Submit</a>
            </div>
        </div>
    </div>
</div>

</form>