How to select an element by name in jQuery

It's very easy to select element by name in jQuery, please take a look at the following HTML code snippet:

<form>
  <input type="text" name="first-name"/><br/>
  <input type="text" name="last-name"/><br/>
  <input type="text" name="email"/><br/>
  <input type="submit" value="Submit">
</form>

There are input elements with the name attribute set to "first-name", "last-name", "email" values. This is a good example of a simple user registration form and is a very popular case in web development.

Now, to select specific elements in jQuery, you can use such statements:

$('input[name="first-name"]')
$('input[name="last-name"]')
$('input[name="email"]')

As example, the following is a code snippet which can be used in real-world applications:

$('input[name="first-name"]').css('background-color', 'red');
$('input[name="first-name"]').css('border', '1px solid black');

Such code block sets both "background-color" and "border" CSS styles for the "first-name" field in the form. You can use it if you want to highlight some field if entered data is not in the expected format.

The syntax of the selector, which is described in this article, can be seen below:

[attribute='value']

Where, "attribute" is a name of any HTML attribute in your code, it can be name, target, href, id or any other attribute.

Also, "value" should contain the desired string that you are looking for.

It means that you can select all elements on a page with a shorter version of selector, here it is:

$('[name="first-name"]').css('background-color', 'green');
$('[name="first-name"]').css('border', '1px solid black');

However, there are many other different types of selectors in jQuery, and each of them will be reviewed below.

[name]

This is the simplest version, it selects all elements with a given attribute name, but with any value.

This is how it will look if made for our simple form:

$('input[name]').css('background-color', 'green');
$('input[name]').css('border', '1px solid black');

[name|="value"]

Such selector will select all elements on a page with a given attribute and a value either equals to a given string or starts with the same string followed by a hyphen character.

This is example of how we can set CSS styles for the "first-name" input field:

$('input[name|="first"]').css('background-color', 'green');
$('input[name|="first"]').css('border', '1px solid black');

[name*="value"]

This selector will select elements with a given attribute and a value containing specified string.

Example is below:

$('input[name*="name"]').css('background-color', 'green');
$('input[name*="name"]').css('border', '1px solid black');

[name~="value"]

Similar as above, this selector will select elements with a given attribute and a value containing specified word, which is delimited by spaces or is a single word.

$('input[name~="first-name"]').css('background-color', 'green');
$('input[name~="first-name"]').css('border', '1px solid black');

[name!="value"]

Such selector can be used to select all elements with a given attribute and a value not equal to specified string.

In the code below, we set CSS styles for all input files, except for the email field.

$('input[name!="email"]').css('background-color', 'green');
$('input[name!="email"]').css('border', '1px solid black');

[name$="value"]

You can use this selector to select elements with a given attribute and a value which ends with a given string.

Here is example:

$('input[name$="name"]').css('background-color', 'green');
$('input[name$="name"]').css('border', '1px solid black');

[name^="value"]

This is an opposite to the previous selector, and it will select all elements with a given attribute and a value which starts with a given string.

Here is example:

$('input[name^="first"]').css('background-color', 'green');
$('input[name^="first"]').css('border', '1px solid black');

[name="value"][name2="value2″]

Such type of selector can be used to select elements that match to all specified filters.

To show how this selector works, we will modify our form and add some CSS classes to it:

<form>
  <input type="text" class="field-input-text" name="first-name"/><br/>
  <input type="text" class="field-input-text" name="last-name"/><br/>
  <input type="text" class="field-input-email" name="email"/><br/>
  <input type="submit" value="Submit">
</form>

Now, you can see example of how to use such selector:

$('input[class="field-input-email"][name="email"]').css('background-color', 'green');
$('input[class="field-input-email"][name="email"]').css('border', '1px solid black');

If you have any additional questions or notes, feel free to leave your comments below.