How can i submit my form using the submit button in a modal? (ASP.NET MVC)

Question

This may seem like a fairly simple question for some, but clearly i have no idea what i am doing. I have a submit button, which is not of type 'submit', instead it opens up a modal, which writes to the user what they have typed within the input box of type 'text', here the user has the choice of closing the modal and fixing their input, or carrying on and submitting the inputted text. However, i am stuck on how i would carry this process out using a combination of HTML/JQuery (This is an MVC project).

I am assuming the modals code is not necessary for this question, i have made reference to the modal through the use of comments;

Below is the code i have for the form, containing the inputs for both the user entered text and the "submit" button which opens up the modal:

@using (Html.BeginForm("Category", "Category", FormMethod.Post))
{

    <form id="formField">

        <label id="CategoryDescription">Description</label>

        <input id="categoryDescription" type="text" name="categoryDescription" /> <!-- User input box -->

        <input type="button" value="submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" /> <!-- "Submit button which opens modal-->

    </form>

}

Further below, i have the jQuery code which is supposedly necessary for carrying out the additional functionality, and ultimately the submitting of the form:

<script>
    $('#submitBtn').click(function () { /* id of button in form which opens modal
        /* when the button in the form, display the entered values in the modal */
        $('#modalDescription').text($('#CategoryDescription').val());
    });

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

Furthermore, the modal fails to display the user entered text either.. so i am lost on how to do that as well..

As an addition to the above mentioned information, i decided to include the code used for the modal as i felt that maybe it would provide some useful information...

<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?
                <table class="table">
                    <tr>
                        <th>Description</th>
                        <td id="modalDescription"></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>

Finally, all i have to say is a massive thanks to anyone who could potentially help me with this. Cheers!

Answer 1

Have you tried alert($('#CategoryDescription').val()) to see if you're getting the value?

Upon checking your HTML, your input field id is categoryDescription but in your script, you are looking for the id attribute CategoryDescription . They aren't on the same case.

IDs should also be unique, your label has the same ID as your input field.

Try the code below;

// change this to CategoryDescriptionLabel
<label id="CategoryDescriptionLabel">Description</label>

// change this to CategoryDescription (case sensitive)
<input id="CategoryDescription" type="text" name="categoryDescription" />

// keep as is
$('#modalDescription').text($('#CategoryDescription').val());