页面上两个不同位置的两个文本 html 文本输入，具有相同的提交 ID答案

【问题标题】：Two text html text inputs in two different places on the page with the same submit id页面上两个不同位置的两个文本 html 文本输入，具有相同的提交 ID
【发布时间】：2016-07-18 13:25:53
【问题描述】：

所以我有一个名为 Index.cshtml 的页面

我在一个 id 为“cvr”的表单中有这个输入：

   @using (Html.BeginForm("SendMailAsACompany", "Contract", null, FormMethod.Post, new { id = "cvr" }))
   {
    <input type="hidden" value=@Html.ViewData.Model.StudentId name="studentId" />
    <input type="hidden" value=@Html.ViewData.Model.CompanyId name="companyId" />
    <input type="hidden" value=@Html.ViewData.Model.ApplicationId name="applicationId"/>


       if (User.Identity.GetUserId() == Html.ViewData.Model.CompanyId)
       {

           <input type="text" name="companyCVR" placeholder="Indsæt CVR-nr."/>
       }

   }

在页面底部，我有上面 id 的提交按钮（“cvr”），我试图在其中添加另外两个表单以传递给控制器（repFirstName 和 repLastName）：

 @if (User.Identity.GetUserId() == Html.ViewData.Model.CompanyId)
         {
            using (Html.BeginForm("SendMailAsACompany", "Contract", null, FormMethod.Post, new { id = "cvr" }))
            {

                    <input type="text" name="repFirstName" placeholder="Indsæt fornavn" />
                    <input type="text" name="repLastName" placeholder="Indsæt lastnavn" />

            }
                    <input type="button" value="Submit" onclick="$('#cvr').submit();" class="btn btn-success" />
          }

但是他们不会传递提交，只会传递第一个值（上面的 CPR）。但是，如果我一开始就拥有所有三个值，它们将成功通过。

我怎样才能在这两个地方都有输入，并且仍然能够提交数据并将数据传递给控制器？我需要两个单独的表单/ID 吗？

【问题讨论】：

ids 应该是唯一的
这是什么意思？第二种形式应该有例如 id "cvr2" 吗？我怎样才能使相同的提交按钮 onclick 来提交它们？
你为什么不把所有东西都放在一个 Html.BeginForm 而不是两个？由于您想同时提交两种形式，这种方法对我来说更有意义。顺便说一句，每个 ID 都应该是唯一的。
讨厌，用一个提交按钮提交多个表单——这真是糟糕的设计，可用性也不是很好
这是不好的可用性。用户如何知道他们必须在屏幕上的两个不同位置输入两个不同的表单，然后它会同时提交所有信息？世界上的每个用户都会期望它们是两个不同的表单，用于两个不同的目的

标签： javascript jquery html forms razor

【解决方案1】：

只需要一个表单，删除第二个表单声明并使用页面底部定义的form attribute将元素与表单关联。

form 属性用于将 input、select 或 textarea 元素与表单（称为表单所有者）相关联。

@if (User.Identity.GetUserId() == Html.ViewData.Model.CompanyId)
{
    <input type="text" name="repFirstName" placeholder="Indsæt fornavn" form="cvr"/>
    <input type="text" name="repLastName" placeholder="Indsæt lastnavn" form="cvr"/>
    <button form="cvr" class="btn btn-success">Submit</button>
}

【讨论】：

提交按钮现在没有任何作用？
用<button form="cvr" class="btn btn-success">Submit</button>尝试一次

【解决方案2】：

如果您生成的 HTML 导致多个具有相同 ID 的元素，那么您有一些像这样的内联 javascript：

<input type="button" value="Submit" onclick="$('#cvr').submit();" />

那么上面的javascript只对第一个#cvr起作用

这就是为什么页面上不能/不能有多个具有相同 ID 的元素的示例。

您必须重构代码以仅使用具有任何给定 ID 的元素。 如果需要多个元素具有相同的绰号，请使用 class - 这样您的 javascript 将变为：

<input type="button" value="Submit" onclick="$('.cvr').submit();" />

您生成的 HTML 将是 class="cvr" 而不是 id="cvr"

或者，您可以确保每个表单使用不同的 ID，例如 id="cvr1"、id="cvr2"、id="cvr3"，然后您的 javascript 可以是：

<input type="button" value="Submit" onclick="$('#cvr1, #cvr2, #cvr3').submit();" />

【讨论】：