在 Bootstrap MODAL 中显示表单输入

Question

我需要将表单中的用户输入显示到 MODAL 中。在提交表格之前，此 MODAL 将充当确认框。应该是这样的：

1. 用户填写表单。
2. 验证表单以检查必填字段 [entry_check()]。
3. 验证后，模式窗口打开并显示用户输入以供确认。
4. 确认后，提交表单。

代码

<form role="form" id="ps_entry" name="ps_entry" method="post" onsubmit="return entry_check()" action="/user/ps/add/">
    <table>
        <tr>
            <td>Type</td>
            <td>:</td>
            <td>
                <label>
                    <input type="radio" name="type" id="type" value="1" />Purchase</label>
                <br />
                <label>
                    <input type="radio" name="type" id="type" value="2" />Sale</label>
            </td>
        </tr>
        <tr>
            <td>Date</td>
            <td>:</td>
            <td>
                <input name="date" id="date" class="input" autocomplete="off" />
            </td>
        </tr>
        <tr>
            <td>Purchase Date</td>
            <td>:</td>
            <td>
                <input name="pdate" id="pdate" class="input" autocomplete="off" />
            </td>
        </tr>
        <tr>
            <td>Remarks</td>
            <td>:</td>
            <td>
                <textarea name="remarks" id="remarks" class="input" autocomplete="off"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>
                <input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />
            </td>
        </tr>
    </table>
</form>
</p>
<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">Are you sure you want to submit the following details?
                <!-- We display the details entered by the user here -->
                <table class="table">
                    <tr>
                        <th>Type</th>
                        <td id="typ"></td>
                    </tr>
                    <tr>
                        <th>Date</th>
                        <td id="dat"></td>
                    </tr>
                    <tr>
                        <th>Payment Date</th>
                        <td id="pdat"></td>
                    </tr>
                    <tr>
                        <th>Remarks</th>
                        <td id="remark"></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>

JS

$('#submitBtn').click(function () {
    /* when the button in the form, display the entered values in the modal */
    $('#typ').html($('#type').val());
    $('#dat').html($('#date').val());
    $('#pdat').html($('#pdate').val());
    $('#remark').html($('#remarks').val());
});

$('#submit').click(function () {
    /* when the submit button in the modal is clicked, submit the form */
    alert('submitting');
    $('#ps_entry').submit();
});

当我在 JSFiddle 中尝试时，它可以完美运行 http://jsfiddle.net/nvVBa/76/。但是当我在 localhost 中尝试时，用户输入的值不会显示在模态中。

Answer 1

在模态中未显示值的原因是 JS 尚未准备好 DOM，并且您在 HTML 代码上方有脚本，如果您将脚本移动到 HTML 代码下方，它将起作用或使 Js DOM 准备好并将其放在页面上的任何位置。

<script>
$(document).ready(function() {
    $('#submitBtn').click(function () {
        /* when the button in the form, display the entered values in the modal */
        $('#typ').html($('#type').val());
        $('#dat').html($('#date').val());
        $('#pdat').html($('#pdate').val());
        $('#remark').html($('#remarks').val());
    });

    $('#submit').click(function () {
        /* when the submit button in the modal is clicked, submit the form */
        alert('submitting');
        $('#ps_entry').submit();
    });
});
</script>

它会起作用的。