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

您的模态表单位于form标记之外，因此它不属于HTML form，因此它不会发布任何数据.HTML form元素定义用于收集用户输入的表单，可以包含其他HTML元素。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使用modal提交表单数据？

1 个答案: