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.
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/attrAn 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().
.val() vs .attr('value') - unless I'm missing something, they return the same value (i.e. whatever user puts there), at least for input, live example: jsfiddle.net/xHwwW. Did you mean something else by what you said?
blur event is just a suggestion..prop() vs. .attr() maybe...). Answer Updated.$(document).ready(function () {
$('div.search-input-field').mouseout(function () {
alert($('div.search-input-field input:first').val());
});
});
Plain JS way:
var myValue = document.getElementsByName("search")[0].value;
or
var myValue = document.getElementById("search").value;
Cross browser binding is sometimes problematic, but it's basicly something like:
document.getElementById("search").addEventListener('onmouseout',function () {
var myValue = this.value;
},false);
jQuery way:
var myValue = $('#search').val();
or
var myValue = $('input[name="search"]').val();
binding
$('#search').on('click', function() {var myValue = this.value});
You going to need to implement the mouseout event handler first and then you can use this.value the value of the input and .attr to get the value of any non-standard attribute.
var $search = $('#search');
$search.mouseout(function () {
alert(this.value);
alert(this.name);
});
Further Reading,
$search (OK, I know it's in your demo), but then you're going to repeat $("#search") within the function? Why not use $search again, or, better, just use this.value and this.name?