19
Jul
2012

How to select input type in jQuery

Posted in: jQuery No Comments

jquery_logo
In this tutorial, I will show you how to select all elements of a particular input type in jQuery.

Before I start the tutorial, I want to list all input type attribute which can be used in HTML.

  • text
  • button
  • submit
  • checkbox
  • radio
  • file
  • hidden
  • image
  • password
  • reset

Now we are going to select all button type input format and when any button is clicked an alert box will popup.

step 1:
Make some HTML buttons.

<input type="button" value="Login" />
<input type="button" value="Register" />

step 2:
Call jQuery library

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

step 3:
Now we will add jQuery code in head section and tell it to find input whose attribute (type) is button. And when any button is clicked, popup an alert message.

<script type="text/javascript">
$(document).ready(function() {
$(":button").click(function() {
alert("hey you just clicked a button");
});
});
</script>

Done!!!
Check live demo


Like this you can select any input type and add some cool stuff.

Another way to select particular input type

You can also use like below to select any particular input type in jQuery

<script type="text/javascript">
$(document).ready(function() {
$("input[type='text']")
});
</script>

Select all input type

You can use below code to select all input types.

<script type="text/javascript">
$(document).ready(function() {
$(":input")
});
</script>

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply