In the below code .val() returns no result and .length always returns '1' for whatever input typed. Where am I going wrong ?
Below is the HTML file
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href=".3.2/jquery.mobile-1.3.2.min.css" />
<script src=".9.1.min.js"></script>
<script src=".3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<form>
<input type="text" name="my_name" id="my_name" >
<button type="submit" id="submit_btn1" name="submit" >Submit</button>
</form>
</body>
</html>
Below is the Javascript file
<script>
$(function(){
var value = $("#my_name").val();
var name_length=$('#my_name').length;
$('#my_name').keyup(function(){
alert(name_length);
alert(value);
});
});
</script>
In the below code .val() returns no result and .length always returns '1' for whatever input typed. Where am I going wrong ?
Below is the HTML file
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery./mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery./jquery-1.9.1.min.js"></script>
<script src="http://code.jquery./mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<form>
<input type="text" name="my_name" id="my_name" >
<button type="submit" id="submit_btn1" name="submit" >Submit</button>
</form>
</body>
</html>
Below is the Javascript file
<script>
$(function(){
var value = $("#my_name").val();
var name_length=$('#my_name').length;
$('#my_name').keyup(function(){
alert(name_length);
alert(value);
});
});
</script>
-
Working here jsfiddle/9NJ6f have fun with the demo!
:)– Tats_innit Commented Nov 13, 2013 at 1:47 - "name_length" will always return 1 because you are using the element ID in your selector which is always unique in your page – eggward Commented Nov 13, 2013 at 1:48
-
@Tats_innit - no worked
:)... at least for me – Black Sheep Commented Nov 13, 2013 at 1:49
3 Answers
Reset to default 3You are grabbing the val when there is no value. That variable won't automatically update. That's what the keyup function is for:
$('#my_name').keyup(function(){
alert(this.value);
});
As per the length, this is working as intended. Your selector is returning an array of matched elements, and the length of that array is 1.
Edit: Per the ments, if you're actually looking to check the length of your entered value, use this.value.length
This is because when you assign the Element to the variable it has a value of ''. You have to get the Element when the Event occurs instead, like:
$(function(){ // load
var mn = $('my_name');
mn.keyup(function(){
var value = mn.val(), name_length = mn.length;
console.log(value); console.log(name_length);
});
}); // end load
I think you need like this:
HTML:
<form id="form">
<input type="text" name="my_name" id="my_name" />
<input type="submit" value="submit" />
</form>
jQuery: (With submit function)
LIVE DEMO 1
$(document).ready(function(){
$("#form").on("submit", function(){
var inputValue = $("#my_name").val(),
inputLength = $("#my_name").val().length;
alert(inputValue);
alert(inputLength);
return false;
});
});
or with keyup function:
LIVE DEMO 2
$(document).ready(function(){
$("#my_name").on("keyup", function(){
var inputValue = $("#my_name").val(),
inputLength = $("#my_name").val().length;
alert(inputValue);
alert(inputLength);
});
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744223937a4563914.html
评论列表（0条）