jQuery назначает скрытое значение в <table>с несколькими формами

Question

Я прочитал несколько сообщений Stack Overflow о том, как нельзя встраивать несколько форм в элементы <table> или <tr>.Это именно то, что я хочу сделать, хотя.Пожалуйста, посмотрите на изображение внизу для идеального макета.

Некоторые рекомендуют обернуть всю таблицу в тег form и отправить ее целиком.Некоторые рекомендуют использовать магию CSS и отформатировать всю таблицу в <divs>, чтобы она отображалась как фактическая <table>, другие рекомендовали сделать <table> для каждой формы и скрыть заголовок на всех, кроме первой, другие рекомендовали не <form> s и просто некоторая магия jQuery для обнаружения изменения любого элемента в строке.

У меня есть скрытое поле на форме в каждом частичном, #Id, идентификатор ResponseItem (данныедля контрольного списка и активности), и я хочу обновить скрытое поле, когда форма будет опубликована.У меня есть действие контроллера в стиле upsert, которое создает ItemResponse, если он не существует, и обновляет его, если оно существует.Оба возвращают идентификатор модели и в идеале обновляют скрытое поле.

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
});

и без внешней / упаковочной формы.