Question

我有这个HTML代码

<div class="sub-middle-column">
  <div class="div-header">Grandsire
    <a "#", class="table-control-focus sub-header-table-focus" id="table-control-focus-t" >abc</a>
    <ul class="table-controls hide side-action-items">
      <li>
        <a data-remote="true" data-box-no="1" class="find_or_add_horse" href="#">Find/Add Horse</a>
      </li>
      <li>
        <a href="go_to_next_horse" data-remote="true">Go to the Next Horse</a>
      </li>
    </ul>
  </div>
  <input type="text" name="search" id="search" class="search_horse">
</div>

点击find_or_add_horse链接我希望使用jquery获取文本字段的值。我尝试了父母，孩子和最亲近但无法得到结果。如何获取文本字段的值？

$(document).on('click', '.find_or_add_horse', function(){
  // on clicking on find/add horse link I need the value of text field here
});

Answer 1

试试这个

$(document).on('click', '.find_or_add_horse', function(){
    var value = $('#search').val();
});

JsFiddle

Answer 2

http://jsfiddle.net/jFIT/pyPtW/

您可以使用父元素查找根元素，然后使用该元素上的find来获取输入。

console.log($(this).parents('.sub-middle-column').find('.search_horse').val());

Answer 3

使用.val()：

 $(document).on('click', '.find_or_add_horse', function(){
       alert($('#search').val());
    });

如果你有多个sub-middle-column div，那么试试这个：

 $(document).on('click', '.find_or_add_horse', function(){
       alert($(this).closest('.sub-middle-column').find('.search_horse').val());
    });

Answer 4

.val();用于输入字段，.text()用于其他html容器，例如p，div ..

并且不要忘记$.trim();输入，cos希望你不要在输入文本周围有空格

试试这个：

$(document).on('click', '.find_or_add_horse', function(){
   var inputtextvalue = $.trim($("#search").val());
});

Answer 5

您可以尝试以下代码

$(document).on('click', '.find_or_add_horse', function(){
     var textValue= $('#search').val();
      });

使用jquery获取文本字段的值

5 个答案: