Find closest value from div inside row

Question

I'm trying to find the value from a form within clicked row form. I'm using this script. I'm able to get the value from form field. But it's giving me the same value and it's only giving me value from first row if clicking any row.

I want to open the form on click of td link inside row with the classname ".followupform" After opening ".followupform" link(form). I want to get the value from fields by clicking on ".updatefollowupstatus" of the current row.

$(".updatefollowupstatus").click(function(e){ 
  var row = $(this).closest('td>.popover-content>form')
  var status= $(row).find(".fformstatus").val();
  var comment= $(row).find(".fformcomment").val();
  var ffid= $(row).find(".fformffid").val();
  alert(ffid);
});


    <td style="text-align:center">
                  <a href="#" class="followupform"><i class="fa fa-edit"></i></a>                           <div class="hide img-rounded popover-content">
                     <strong style="text-align:center">Update Followup Status</strong><span class="pull-right ffclose" style="cursor: pointer;"><i class="fa fa-close"></i></span>
                     <hr>
                      <form class="form-inline" role="form">
                        <div class="form-group">
                          <select class="form-control fformstatus" name="fformstatus">
                            <option value="0">Followups Status</option>
                            <option value="VM">VM</option>
                            <option value="Callback">Callback</option>
                            <option value="Rude">Rude</option>
                            <option value="Done">Done</option>
                          </select>         
                        </div>  
                        <div class="form-group">  
                          <textarea placeholder="Follow up Comment overview" class="form-control fformcomment"></textarea>
                          <input type="text" class="fformffid" hidden="" name="fformffid" value="15">
                        </div>        
                        <div class="form-group">  
                          <div class="btn btn-primary updatefollowupstatus">Update »</div>                                  
                        </div>
                      </form>
</div><!-- Form Content -->
                  </td>

I used all possible way. but I think there is some mistake or other way to do that. My aim is to update feedback of the current row and send value through ajax to process.

Answer 1

Better to use the .parents() method, as form is the parent element of the button clicked.

Try following code.

$(".updatefollowupstatus").click(function(e){ 
   var frm = $(this).parents('form');
   var status= $(frm).find(".fformstatus").val();
   var comment= $(frm).find(".fformcomment").val();
   var ffid= $(frm).find(".fformffid").val();
   alert(ffid);
});

Answer 2

You are using wrong selector in .closest('td>.popover-content>form') in [closest()][1], just use .closest('form') ,

 $(".updatefollowupstatus").click(function(e) { var row = $(this).closest('form'); var status = $(row).find(".fformstatus").val(); var comment = $(row).find(".fformcomment").val(); var ffid = $(row).find(".fformffid").val(); alert(status + ',' + comment + ',' + ffid); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table> <tr> <td style="text-align:center"> <a href="#" class="followupform"><i class="fa fa-edit"></i></a> <div class="hide img-rounded popover-content"> <strong style="text-align:center">Update Followup Status</strong><span class="pull-right ffclose" style="cursor: pointer;"><i class="fa fa-close"></i></span> <hr> <form class="form-inline" role="form"> <div class="form-group"> <select class="form-control fformstatus" name="fformstatus"> <option value="0">Followups Status</option> <option value="VM">VM</option> <option value="Callback">Callback</option> <option value="Rude">Rude</option> <option value="Done">Done</option> </select> </div> <div class="form-group"> <textarea placeholder="Follow up Comment overview" class="form-control fformcomment"></textarea> <input type="text" class="fformffid" hidden="" name="fformffid" value="15"> </div> <div class="form-group"> <div class="btn btn-primary updatefollowupstatus">Update »</div> </div> </form> </div> <!-- Form Content --> </td> </tr> <tr> <td style="text-align:center"> <a href="#" class="followupform"><i class="fa fa-edit"></i></a> <div class="hide img-rounded popover-content"> <strong style="text-align:center">Update Followup Status</strong><span class="pull-right ffclose" style="cursor: pointer;"><i class="fa fa-close"></i></span> <hr> <form class="form-inline" role="form"> <div class="form-group"> <select class="form-control fformstatus" name="fformstatus"> <option value="0">Followups Status</option> <option value="VM">VM</option> <option value="Callback">Callback</option> <option value="Rude">Rude</option> <option value="Done">Done</option> </select> </div> <div class="form-group"> <textarea placeholder="Follow up Comment overview" class="form-control fformcomment"></textarea> <input type="text" class="fformffid" hidden="" name="fformffid" value="16"> </div> <div class="form-group"> <div class="btn btn-primary updatefollowupstatus">Update »</div> </div> </form> </div> <!-- Form Content --> </td> </tr> </table>