Form input selector (:input)
In this chapter you will learn:
- Description and Syntax for form input tag selector
- Examples for form input element selector
- Select input element by attribute name
Description and Syntax
$(":input")
selects all form elements (<input>
(all types), <select>
, <textarea>
, <button>
)
Examples
The following code uses the form input selector to get the count of input elements in a form.
<html><!--from ja va 2 s. co m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($(":input").length);
});
</script>
</head>
<body>
<body>
<input type="button" value="Input Button"/>
<input type="checkbox">j ava 2s.com</input>
<input type="checkbox" />
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option<option/></select>
<textarea></textarea>
<button>Button</button>
</body>
</html>
Select input element by attribute name
The following code selects all inputs that don't have the name 'n'.
<html><!-- ja v a2 s. c o m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[name!='n']").val(" not n");
});
</script>
</head>
<body>
<body>
<input type="text" name="newsletter" value="Hot Fuzz" />
</body>
</html>
The following code select input element by name
attribute.
<html>//j a v a 2 s.c om
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[name='ab']").val("ab");
});
</script>
</head>
<body>
<body>
<input name="ab" />
</body>
</html>
Next chapter...
What you will learn in the next chapter:
- Description and Syntax for Form text fields selector
- Examples for form text fields selector
- Select text input element inside a form