Display form input in Bootstrap MODAL

Question

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

Code

<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();
});

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.

Answer 1

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>

And It will work.