Question

我有一个显示所有用户的表，每个用户的ID存储在隐藏字段中，我希望能够使用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>
 }

查询功能是：

 <script>
    $('#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。我希望能够在单击按钮时获得每一行的价值，这是我的挑战，我是前端开发的新手。

Answer 1

您不需要添加隐藏的输入，只需在按钮data-id="@del.PayoutId"上使用data attr并将其绑定到id字段如下示例：

foreach (var del in approvedList)
 { 
 <tr>
    <td>@del.CampaignName</td>
    <td>@del.Name</td>                           
    <td>@del.ApprovalStatus</td>                            
    <td>                       
    <div class="row">
      <div class="col-sm-5">
          <input data-id="@del.PayoutId" name="btnApprove" class="btn  btn-success approvebtn" type="button" title="Approve" value="Approve" />
      </div>                                                                
    </div>                                                                                        
  </td>  
</tr>
}

您可以按以下方式处理批准：

$(document).ready(function() {
    $('.approvebtn').click(function (e) {
    $(this).prop("disabled", true);
    console.log("id field value: "+$(this).data('id'));
     // add your code here
    return false;
   });   
 });

您可以使用$(this).data('id')

获得点击ID

如何使用jquery

1 个答案: