Как я могу отправить свою форму, используя кнопку отправки в модальном режиме? (ASP. NET MVC)

Question

Для некоторых это может показаться довольно простым вопросом, но, очевидно, я понятия не имею, что я делаю. У меня есть кнопка отправки, которая не относится к типу 'submit', вместо этого она открывает модальное окно, которое пишет пользователю, что они ввели в поле ввода типа 'text', здесь у пользователя есть выбор закрытия модальный и фиксирующий их ввод, или ведение и отправка введенного текста. Тем не менее, я застрял на том, как я мог бы выполнить этот процесс, используя комбинацию HTML / JQuery (это проект MVC).

Я предполагаю, что для этого вопроса код модальности не требуется, я сделал ссылку на модал с помощью комментариев;

Ниже приведен код, который я имею для формы, содержащей вводимые данные как для введенного пользователем текста, так и для кнопки «отправить», которая открывает модальное окно:

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

}

Далее, у меня есть код jQuery, который предположительно необходим для выполнения дополнительных функций, и в конечном счете, отправка формы:

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

Кроме того, модал не отображает введенный пользователем текст либо ... поэтому я теряюсь в том, как это сделать ..

Как В дополнение к вышеупомянутой информации, я решил включить код, используемый для модального, поскольку я чувствовал, что, возможно, он предоставит некоторую полезную информацию ...

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

Наконец, все, что я должен сказать, это Огромное спасибо всем, кто потенциально может мне помочь с этим. Ура!

Answer 1

Вы пытались alert($('#CategoryDescription').val()) проверить, получаете ли вы значение?

После проверки HTML идентификатор поля ввода будет categoryDescription , но в вашем скрипте вы ищем атрибут id CategoryDescription . Они не относятся к одному и тому же случаю.

Идентификаторы также должны быть уникальными, ваш ярлык имеет тот же идентификатор, что и поле ввода.

Попробуйте код ниже;

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