从行

时间:2017-05-30 04:08:34

标签: javascript jquery forms jquery-selectors

我试图在点击的行表单中找到表单中的值。我正在使用这个脚本。我能够从表单字段中获取值。但它给了我相同的价值,如果点击任何一行,它只会给我第一行的价值。

我想点击行内的td链接打开表单,其中包含类名" .followupform" 打开" .followupform"链路(形式)。我希望通过点击" .updatefollowupstatus"来获取字段中的值。当前行。

$(".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>

我尽可能地使用了。但我认为有一些错误或其他方式可以做到这一点。我的目标是更新当前行的反馈并通过ajax发送值进行处理。

2 个答案:

答案 0 :(得分:2)

最好使用.parents()方法,因为form是单击按钮的父元素。

请尝试以下代码。

$(".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);
});

答案 1 :(得分:0)

您在[nearest()] [1]的.closest('td>.popover-content>form')中使用了错误的选择器,只需使用.closest('form')

&#13;
&#13;
$(".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);
});
&#13;
<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>
&#13;
&#13;
&#13;