Javascript 在引导模式下显示表单输入

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

用户填写表单

验证表单以检查必填字段[

条目\u check（）

]

验证后，模式窗口打开并显示用户输入以供确认

确认后，提交表格

代码

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

当我在JSFiddle中尝试它时，它非常有效

---

. 但当我在localhost中尝试时，用户输入值不会显示在模式中。

在模式中不显示值的原因是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>

$（文档）.ready（函数（）{
$（'#submitBtn'）。单击（函数（）{
/*在窗体中单击按钮时，在模式中显示输入的值*/
$（'#typ'）.html（$（'#type'）.val（））；
$（'#dat'）.html（$（'#date'）.val（））；
$（'pdat'）.html（$（'pdate'）.val（））；
$（'#备注'）.html（$（'#备注'）.val（））；
});
$（“#提交”）。单击（函数（）{
/*单击模式中的“提交”按钮后，提交表单*/
警报（“提交”）；
$（“#ps_条目”）。提交（）；
});
});

---

而且它会工作。

您的本地控制台中是否有任何错误？另一个JS错误可能会停止JS执行，并且不会复制您的值。只有当您能够重现此问题时，我们才能为您提供帮助。只需参考您的浏览器日志，就可以看到出现任何错误

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