get value of input inside table with custom attribute

I am trying to get value of input which is inside input inside td but the one with specific LogId and set the value to inputs

that’s my coede:

<tr role="row" class="odd" style="cursor: pointer;"  data-toggle="modal" data-target="#modal-detail"
                         onclick="openDetailModel('<%= searchtrans.getLogId()%>')">
<td class="">
<input type="hidden" logId="<%= searchtrans.getLogId() %>" id="bRequest" value="<%=searchtrans.getBRequest()%>" >
<input type="hidden" logId="<%= searchtrans.getLogId() %>" id="bResponse" value="<%= searchtrans.getBResponse() %>">
<input type="hidden" logId="<%= searchtrans.getLogId() %>" id="sRequest" value="<%= searchtrans.getSRequest()%>" >
<input type="hidden" logId="<%= searchtrans.getLogId() %>" id="sResponse" value="<%=searchtrans.getSResponse()%>">
 </td>
</tr>
            

and that is the JavaScript code I tried:

function openDetailModel(detailVal){
        var value = detailVal;
  
       var bRequest =  $("td #bRequest[logId ='" + value + "']").val();
       var bResponse = $("#bResponse[logId ='" + value + "']").val();
       var sRequest = $('#sRequest').val();
       var sResponse= $('#sResponse').val();

       
       document.getElementById('modelBRequest').value = bRequest;
       document.getElementById('modelBResponse').value = bResponse;
       document.getElementById('modelSRequest').value = sRequest;
       document.getElementById('modelSResponse').value = sResponse;
          
        }

I tried many approaches, but nothing worked.

Answer

Thanks alot to @ScottMarcus after following his steps

that is my html after edit :

<tr role="row" class="odd" style="cursor: pointer;"  data-toggle="modal" data-target="#modal-detail"
                     onclick="openDetailModel('<%= searchtrans.getLogId()%>')">
<td class="">
<article  data-logId="<%= searchtrans.getLogId() %>" id="bRequest" data-value="<%=searchtrans.getBRequest()%>" >
 <article  data-logId="<%= searchtrans.getLogId() %>" id="bResponse" data-value="<%= searchtrans.getBResponse() %>">
<article  data-logId="<%= searchtrans.getLogId() %>" id="sRequest" data-value="<%= searchtrans.getSRequest()%>" >
<article  data-logId="<%= searchtrans.getLogId() %>" id="sResponse" data-value="<%=searchtrans.getSResponse()%>">
</td>
</tr>

and my Js code :

function openDetailModel(detailVal){
        var value = detailVal;
        const input = document.querySelector("#bRequest[data-logId ='" + value + "']");

        const input2 = document.querySelector("#bResponse[data-logId ='" + value + "']");

        const input3 = document.querySelector("#sRequest[data-logId ='" + value + "']");

        const input4 = document.querySelector("#sResponse[data-logId ='" + value + "']");

       var bRequest =  input.dataset.value;
       var bResponse = input2.dataset.value;
       var sRequest = input3.dataset.value;
       var sResponse= input4.dataset.value;


       $('#modelRequest').val(bRequest);
       $('#modelBResponse').val(bResponse);
      $('#modelSRequest').val(sRequest);
       $('#modelSResponse').val(sResponse);

        }

Leave a Reply

Your email address will not be published. Required fields are marked *