Get the value of text field using jquery

Question

I have this html code

<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>

on clicking on find_or_add_horse link I want to get the value of the text field using jquery. I tried parent, child and closest but could not get the result. How can I get the value of text field?

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

sheez, i almost hear people typing the answer faster than me — doniyor
– doniyor, Commented Apr 9, 2014 at 10:39
@doniyor not only posting the answer, later editing it faster than me... — Alok Anand
– Alok Anand, Commented Apr 9, 2014 at 10:41
This question is for the very first time on SO. OP searched and didn't find anything here. Even on the internet. Huh... — Miljan Puzović
– Miljan Puzović, Commented Apr 9, 2014 at 10:43

JF it · Accepted Answer · 2014-04-09 10:39:12Z

2

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

You can use parents to find the root element, then use find on that element to get the input.

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

answered Apr 9, 2014 at 10:39

JF it

2,3833 gold badges23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Navin · Accepted Answer · 2014-04-09 10:40:02Z

2

Try this

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

JsFiddle

edited Apr 9, 2014 at 10:40

Navin

6144 silver badges12 bronze badges

answered Apr 9, 2014 at 10:37

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Comments

Milind Anantwar · Accepted Answer · 2014-04-09 10:38:01Z

1

use .val():

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

if you have multiple sub-middle-column div then try this:

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

answered Apr 9, 2014 at 10:38

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

1 Comment

Satpal Over a year ago

@Anton beat you by 49 seconds

Sajeev · Accepted Answer · 2014-04-09 10:40:02Z

0

You can try the code below

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

answered Apr 9, 2014 at 10:40

Sajeev

1979 bronze badges

Comments

doniyor · Accepted Answer · 2014-04-09 10:45:16Z

0

.val(); is for input fields, .text() for other html containers like p, div..

AND dont forget to $.trim(); the input, cos hopefully you dont want whitespaces around the input text

try this:

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

edited Apr 9, 2014 at 10:45

answered Apr 9, 2014 at 10:38

doniyor

38k62 gold badges183 silver badges272 bronze badges

Collectives™ on Stack Overflow

Get the value of text field using jquery

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related