4

I am studying jquery searching box.

I am getting trouble with getting string var from html.

in my html file.

i have..

<header>
  <div id="searchBox">
    <form name="searchForm">
      <div>
        <i class="icon-search icon-large icon-height"></i>
        <input name="searchfield" type="search" size="20" maxlength="30">
      </div>
    </form>
  </div>
</header>

and

in my jquery file i have

$(".icon-search").click(function() {
  var searchstring  = $(this).text('#searchfield');// $('#searchfield');
  searchstring.focus();
  //$('#searchBox').html($('input:searchfield').val());
  alert("searchfield.  " + searchstring +  " hahah");
});

when I clicked to searching some strings.

It shows that Object object instead of some strings.

I am not really sure how to convert object to strings.

Does anybody know how to convert it ?

Gray
  • 7,050
  • 2
  • 29
  • 52
Dc Redwing
  • 1,681
  • 11
  • 32
  • 42

2 Answers2

10

This line of code means nothing:

var searchstring  = $(this).text('#searchfield');// $('#searchfield');

It should indeed be:

var searchstring = $('#searchfield');

Then you'll be able to do:

searchstring.focus();

And retreive the text with .val():

alert("searchfield.  " + searchstring.val() +  " hahah");

.text() gets or sets the text content of a HTML element. It gets a value if it is being invoked without any parameters, and it sets a value if a value is passed to it. So $(this).text('#searchfield') would set the inner text of $(this) (your .icon-search) to the string "#searchfield".

Now, a form element doesn't have an inner text, it has a value, hence .val(), which otherwise works the same way as .text()

alert(myTextbox.val()); // get value
myTextbox.val('test');  // set value

Edit:

Also, $('#searchfield') looks for an element of the ID "searchfield". You should either add id="searchfield" to your textfield, or update your script to

var searchstring = $('input[name=searchfield]');
David Hedlund
  • 128,221
  • 31
  • 203
  • 222
0

Your code access the DOM object.

Try $("#searchfield").attr('value')

You can put any attribute you want in the attr() function and get it. To get its id just use $("#searchfield").attr('id')

Personally I use this a lot than val(), as it causes cross browser problems with some other DOM objects.

afrin216
  • 2,295
  • 1
  • 14
  • 17