使用jQuery獲取文本字段的值

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(); 輸入，因為希望您不希望輸入文字周圍有空格

嘗試這個：

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