如何使用模态提交表单数据？

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>

但是当我使用模式提交时，它不会发布任何东西或不会发生任何事情。 当它显示模式包含值时，提交时应该发布表单值，问题出在哪里？

Answer 1

您的Modal表单不在form标记之外，因此它不是HTML form一部分，因此它不发布任何数据。HTML form元素定义了一个用于收集用户输入的表单，并且可以包含其他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>