I have a form like this
<form action="">
<label for="name">Name</label>
<input type="text" id="name" />
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
var Name = jQuery('#name').val();
jQuery('#name').blur(function() {
console.log(Name);
});
});
</script>
but here when I am entering any values in the input text field it is showing error like
(an empty string). So can someone tell me what is the wrong here? How to solve this?
<input type="text" id="name />
should be
<input type="text" id="name" />
working fiddle: http://jsfiddle.net/TdLH2/
This line:
var Name = jQuery('#name').val();
is a one time operation, setting the value of Name to the value of the input when that code executes. It will not magically update the value of Name when the value of that element changes (why do so many people get the impression that it would?). You'll need to do this:
jQuery(document).ready(function () {
jQuery('#name').blur(function () {
console.log(this.value);
});
});
I've cut out the now pointless Name variable, and just used the element reference (this) directly to get its value property rather than using jQuery functions.
Name variable should be set inside onblur handler:
jQuery('#name').blur(function () {
var Name = jQuery(this).val(); //or this.value
console.log(Name);
});
Try
<form action="">
<label for="name">Name</label>
<input type="text" id="name" />
</form>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery('#name').blur(function () {
var Name = jQuery("#name").val();
jQuery("#name").blur(function()
{
console.log(Name);
});
});
});
</script>
If you want to console.log whatever is typed into the box, you can do:
<script>
jQuery(document).ready(function() {
jQuery('#name').keyup(function() {
var Name = jQuery('#name').val();
console.log(Name);
});
});
</script>
At the moment, you're getting the value of #name on page load, which would be "", an empty string. As nothing has been entered.
actiontags.