Question

This is a newb question, but it makes me pulling my hairs:

<div class="search-input-field">
  <input type="text" value="amazon" placeholder="Search" name="search" id="search">
</div>

I would like to get the value of this input when user mouseOut. How can I do this using jQuery/javaScript?

Thank you.

Answer 1

You can use .val() to get the value of a form element:

var value = $('#search').val();

You can also use .attr() to get an attribute for an element:

var placeholderText = $('#search').attr('value');

Docs:

• .val(): http://api.jquery.com/val
• .attr(): http://api.jquery.com/attr

An example of your desired code:

$('#search').on('mouseout', function () {
    alert(this.value);
});

Notice that you can get the value of an input element inside an event handler with this.value which will perform much faster than using $(this).val().

[Suggestion] – If you want to get the value after the user has finished editing the value of the input then I suggest using the blur event (mouseout fires when the user moves the cursor over the element, then away):

$('#search').on('blur', function () {
    alert(this.value);
});

Note that .on() is new in jQuery 1.7 and in this case is the same as using .bind().