Uwakpeter Ответов: 1

Как выполнить итерацию по скрытому значению поля для каждой строки таблицы с помощью jquery

У меня есть таблица, которая отображает всех пользователей, и идентификатор для каждого пользователя хранится в скрытом поле, я хочу иметь возможность получить значение, хранящееся в скрытом событии нажатия кнопки on с помощью Ajax или Jquery.

Что я уже пробовал:

foreach (var del in approvedList)
 {         
   <tr>
    <td>@del.CampaignName</td>
    <td>@del.Name</td>                           
    <td>@del.ApprovalStatus</td>                            
    <td>  
    <div id="hiddenWrapper" class="row">
      <div class="col-sm-5"><input type="hidden" id="id" name="id" value="@del.PayoutId" />
          <input id="btnApprove" name="btnApprove" class="btn  btn-success" type="button" title="Approve" value="Approve" onclick="location.href='@Url.Action("PayoutApproval", "Account", new { id = @del.PayoutId })'" />
      </div>                                                                
    </div>                                                                                        
  </td>
 </tr>
 }


А функция запроса такова :

 $('#btnApprove').click(function () {
    $("#btnApprove").prop("disabled", true);
    console.log("id field value: "+$("#id").val());
    $.ajax({
        url: '/Account/PayoutApproval',
        type: "POST",
        data: JSON.stringify({ id: $("#id").val() }),
        dataType: "json",
        contentType: 'application/json, charset=utf-8',

        success: function (result) {

            if (result.f != null) {
                swal(result.f, "!", "error");
                $("#btnApprove").prop("disabled", false);

            } else {
                swal({
                    title: "Success!",
                    text: result.s,
                    type: "success"
                });
                $('#action').prop('disabled', true).trigger("chosen:updated");
                $("#submitBrdFrm").prop("disabled", true);
                top.location.href = workListUrl;
            }
        }

    });

    return false;
});




Регистрируя значение скрытого поля, я понял, что могу получить значение только для первой строки, последующие строки возвращают null. Я хочу иметь возможность получать значение для каждой строки при нажатии кнопки, это моя задача, я новичок в разработке front end.

1 Ответов

Рейтинг:
7

Richard Deeming

Идентификаторы в HTML - документе должны быть уникальными. Вы присваиваете один и тот же идентификатор скрытому входу в каждой строке. Вы также присваиваете один и тот же идентификатор каждой кнопке.

Там также нет смысла добавлять onclick атрибут к кнопке, если вы просто собираетесь отменить этот обработчик в другом месте.

Измените свой код разметки на:

<input type="hidden" name="id" value="@del.PayoutId" />
<input name="btnApprove" class="btn btn-success" type="button" title="Approve" value="Approve" />

Измените сценарий на:
$(document).on("click", "input[name='btnApprove']", function(e){
    e.preventDefault();
    
    var btn = $(this);
    btn.prop("disabled", true);
    
    var id = btn.closest("tr").find("input[name='id']").val();
    console.log("id field value:", id);
    
    $.ajax({
        url: '/Account/PayoutApproval',
        type: "POST",
        data: JSON.stringify({ id: id }),
        dataType: "json",
        contentType: 'application/json, charset=utf-8',

        success: function (result) {
            if (result.f != null) {
                swal(result.f, "!", "error");
                btn.prop("disabled", false);
            } else {
                swal({
                    title: "Success!",
                    text: result.s,
                    type: "success"
                });
                
                $('#action').prop('disabled', true).trigger("chosen:updated");
                $("#submitBrdFrm").prop("disabled", true);
                top.location.href = workListUrl;
            }
        }
    });
});

Uwakpeter

Спасибо, я действительно ценю это