jQuery – How to select Input Nodes?

In yesterday’s blog posts, we have discussed about Selecting Nodes by Attribute Value in jQuery. If you didn’t read that, I strongly recommend you read it before proceeding with this article. Here is the link jQuery – Selecting Nodes by Attribute Value. In this article, we will go over Selecting Input Nodes in jQuery.

Selecting Input Nodes using jQuery is very useful if you are working with Forms, TextBoxes, TextAreas, Select, etc., through which end users can input data into your application.

How Does Selecting Input Nodes Syntax Look Like?

• A new character syntax $(‘:input’) used for this.
• The above syntax will select all the input elements including Input, Select, TextArea, Button, Image, Radio and more. It will return a collection of input elements.
• $(‘:input[type="radio"]‘) will specifically target RadioButtons on the web page.

Let’s look at an example. In my web page, I have a Form. In that Form, I have 4 input elements. The first one is the input element whose type is text and value is hard-coded to John. The second one is the input element LastNameTextBox whose type is text. The third one is TextArea for Comments. The fourth one is a button whose value is Submit.

Let’s try to find the value of first Input TextBox which is John. $(‘:input’) will give the collection of all the 4 input elements. Assign that value to a variable called inputs. Then input[0].val() will give the value of the first input element which is FirstNameTextBox, whose value is John. Put that in an alert box. So in output, we should get John in the alert box.

But while running the application, we will get nothing as output. So what went wrong here? Let’s analyze it. Go to Developer tools of Google Chrome.

Notice that on the Console tab of Developer Tools, an error is showing – Uncaught TypeError: Object #<an HTMLInputElement> has no method ‘val’.

The problem here is, val() is a jQuery function. In order to get a jQuery function, you have to use jQuery wrapper around the object. So in the 2 lines of code, we should use jQuery wrapper. Let’s modify the code like this and rerun the application.

Now we will get the desired output which is John in the alert box.

As I mentioned earlier, we have 4 input elements in our web page. Let’s try to iterate through each of them and find their values. $(‘:input’).each() is used for this purpose. Here each() function is used to iterate through each of the input elements. Write the code as given below and run the application.

While running the application, we will get value of all the 4 input elements. While clicking on OK button, the value of next input element is displayed. First of all, we will get the value of FirstNameTextBox which is John.

While clicking on OK button, we will get the empty LastNameTextBox value.

Then, we will get the TextArea value.

Finally, the button value which is Submit.

Tomorrow

In tomorrow’s blog post, we will discuss some Additional Selector Features in jQuery.

Reference: Arun Ramachandran (http://BestTEchnologyBlog.Com)

CodeProject