在Bootstrap MODAL中显示表单输入 [英] Display form input in Bootstrap MODAL

问题描述

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

I need to display the user input from the form into the MODAL. This MODAL will act as a confirmation box before submitting the form. It should be like this:

1. 用户填写表单.
2. 表单已通过验证，可以检查必填字段[entry_check()].
3. 验证后，将打开模式窗口，并显示用户输入以进行确认.
4. 确认后，表格被提交.

1. User fills the form.
2. Form is validated to check required fields [entry_check()].
3. After validation, modal window opens and display the user inputs for confirmation.
4. After confirmation, the form is submitted.

代码

<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中尝试时，用户输入值不会显示在模式中.

It works perfectly when i try it in JSFiddle http://jsfiddle.net/nvVBa/76/. But when I try it in localhost, user input values are not displayed in the modal.

推荐答案

原因是模式中未显示的值是JS不支持DOM，并且脚本位于HTML代码上方，如果将脚本移至HTML代码下方，将可以正常工作或使Js DOM就绪并将其放置在页面上的任何位置.

Reason the value not showing in modal is that JS is not DOM ready and you have script above the HTML code, if you move the script below the HTML code it will work OR make Js DOM ready and put it anywhere on page.

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

它将起作用.

这篇关于在Bootstrap MODAL中显示表单输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！