如何使用模式中的提交按钮提交我的表单？ (ASP.NET MVC)答案

【问题标题】：How can i submit my form using the submit button in a modal? (ASP.NET MVC)如何使用模式中的提交按钮提交我的表单？ (ASP.NET MVC)
【发布时间】：2020-04-13 20:11:53
【问题描述】：

对于某些人来说，这似乎是一个相当简单的问题，但显然我不知道我在做什么。我有一个提交按钮，它不是“提交”类型，而是打开一个模式，它将他们在“文本”类型的输入框中输入的内容写入用户，在这里用户可以选择关闭模态并修复他们的输入，或继续并提交输入的文本。但是，我坚持如何使用 HTML/JQuery 的组合来执行这个过程（这是一个 MVC 项目）。

我假设这个问题不需要模态代码，我通过使用 cmets 参考了模态代码；

下面是我的表单代码，包含用户输入的文本和打开模式的“提交”按钮的输入：

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

最后，我要说的是非常感谢任何可能帮助我的人。干杯！

【问题讨论】：

这能回答你的问题吗？ Submit a form using jQuery
顺便说一句，你的“提交”按钮不是一个按钮......它是一个链接。你应该把它改成一个按钮。

标签： javascript jquery html asp.net asp.net-mvc

【解决方案1】：

您是否尝试过alert($('#CategoryDescription').val()) 来查看您是否获得了价值？

检查您的 HTML 后，您的输入字段 ID 为 categoryDescription 但在您的脚本中，您正在寻找 id 属性 CategoryDescription。他们不在同一个案子上。

ID 也应该是唯一的，您的标签与您的输入字段具有相同的 ID。

试试下面的代码；

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

【讨论】：