Question

我已经阅读了几篇Stack Overflow帖子，内容涉及如何无法在<table>或<tr>元素中嵌入多个表单。那正是我想要做的。请参阅底部的图片以获得理想的布局。

有些建议将整个表格包装在form标签中，然后提交整个内容。有些人建议做一些CSS魔术，并在<divs>中格式化整个表格，使其像实际的<table>一样显示；另一些人建议对每种形式制作一个<table>，并在除第一个以外的所有标题上隐藏标题，其他人建议不要使用<form>，而建议使用一些jQuery魔术来检测何时更改行中的任何元素。

在每个部分#Id中，表单上都有一个隐藏字段，ResponseItem的ID（清单和活动的数据），并且我想在表单发布后更新隐藏字段。我有一个类似upsert的控制器操作，如果ItemResponse不存在，则会创建它，如果存在，则会进行更新。两者都返回模型的ID，并且理想情况下会更新隐藏字段。

TLDR：我的代码工作到formTarget.find(".ModelId").val(data["itemResponseId"]);行。当我console.log时，它似乎找到了表单，但是没有更新隐藏字段。我不知所措，无法解决这个问题。

我的<table>和javascript代码（如果有关系的话）：

<table class="table table-hover">
<thead>
    <tr>
        <td></td>
        <td>Activity</td>
        <td>Liked</td>
        <td>Tried</td>
        <td>Inclincation</td>
        <td>Intensity</td>
        <td>Comments</td>
    </tr>
</thead>

<tbody>
    @foreach (var activity in ViewBag.ActivityItems)
    {
        <tr>
            ... partial here ...
        </tr>
    }
</tbody>

JavaScript

$(".itemResponseForm").submit(function (event) {
        //console.log(event);
        event.preventDefault();
        var formTarget = $(event.target);
        $.ajax({
            url: "ItemResponses/CreateOrChangeResponse",
            data: formTarget.serialize(),
            method: 'POST',
            success: function (data) {
                console.log(data);

                //console.log(formTarget.find(".ModelId"));
                console.log(formTarget);
                formTarget.find(".ModelId").val(data["itemResponseId"]);
                console.log(formTarget.find(".ModelId"));
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        })
    });

$("#Liked, #Tried, #Inclination, #Intensity, #Comments").change(function (event) {
        console.log(event);

        var eventJquery = $(event.target);
        var parentForm = eventJquery.closest("form");
        parentForm.submit();
        //console.log(parentForm);
    });

编辑：发布我的部分内容-

    <input type="hidden" asp-for="ChecklistId" value="@Model.ChecklistId" />
<input type="hidden" asp-for="ActivityItemId" value="@Model.ActivityItemId" />
<input type="hidden" asp-for="Id" class="ModelId" value="" />
<td>
    <img src='~/pics/@ViewData["ActivityItemImage"]' style="width: 50px; height: 50px;" />
</td>
<td>
    @ViewData["ActivityItemName"]
</td>
<td class="text-center">
    <input class="form-check-input" asp-for="Liked" style="margin-left: 0em; transform: scale(2);" />
</td>
<td class="text-center">
    <input class="form-check-input" asp-for="Tried" style="margin-left: .15em; transform: scale(2);" />
</td>
<td>
    <select asp-for="Inclination" class="form-control">
        <option value="playing">Playing</option>
        <option value="watching">Watching</option>
        <option value="both">Both</option>
    </select>
</td>
<td>
    <select asp-for="Intensity" class="form-control">
        <option value="0" selected>None</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</td>
<td>
    <input asp-for="Comments" class="form-control" />
</td>
<td>
    <input type="submit" data-value="Save" class="itemResponseButton btn btn-primary">
</td>

如果有人可以指出正确的方向来更新该隐藏字段，我将不胜感激。感谢您的帮助！

Answer 1

table内可以使用多个表单，只要您用form属性装饰每个外部表单元素。像这样的东西。

@foreach(var activity in ViewBag.ActivityItems)
{
   <tr>
      <td>
         <input type="text" name="some-name" form="form:@activity.SomeId" />
      </td>
      <td>
         <select name="some-select" form="form:@activity.SomeId">
            <option value="0">none</option>
         </select>
      </td>
      <td>
         <form method="POST" action="/action/@activity.SomeId" id="form:@activity.SomeId" class="item-form">
            <input type="hidden" name="hiddenId" />
            <input type="submit" value="Submit" />
         </form>
     </td>
   </tr>
}


//js
$('.item-form').submit(function(event){
    event.preventDefault();
    var form = this;
//$.ajax
});

，并且没有外部/包装形式。

jQuery以多种形式分配隐藏值

1 个答案: