jQuery [name*=”value”] Selector

Posted in jQuery Tutorial

Updated on Apr 28, 2024

By Mari Selvan

👁️ 9 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

jQuery empowers web developers with a plethora of tools to manipulate HTML elements with ease. One such tool is the [name*=”value”] selector, which allows for versatile targeting of elements based on their attribute values. Understanding and utilizing this selector effectively can significantly streamline your development process.

In this comprehensive guide, we will explore the potential of the jQuery [name*=”value”] selector through practical examples and clear explanations.

🧠 Understanding [name*=”value”] Selector

The [name*=”value”] selector is designed to select elements whose attribute value contains a specified substring. This provides flexibility in targeting elements based on partial matches within their attribute values.

💡 Syntax

The syntax for the [name*=”value”] selector is straightforward:

syntax.js

Copied

$("[name*=”value”]")

📝 Example

Selecting Elements by Attribute Value:

Suppose you have a set of input fields with various names, and you want to select those whose names contain a specific substring. You can achieve this using the [name*=”value”] selector as follows:
index.html
Copied
```
<input type="text" name="username">
<input type="text" name="email">
<input type="text" name="password">
```
example.js
Copied
```
$("input[name*=’user’]").css("border-color", "green");
```
This will select the input field with the name containing the substring user and apply a green border color to it.
Enhancing Form Validation:

The [name*=”value”] selector is particularly useful in form validation scenarios. For instance, let's say you want to validate all input fields containing the substring email. You can do this dynamically using jQuery:
index.html
Copied
```
<input type="text" name="email_address">
<input type="text" name="alternate_email">
<input type="text" name="phone_number">
```
example.js
Copied
```
$("input[name*=’email’]").keyup(function() {
  // Validation logic here
});
```
This will trigger the validation logic whenever the user types in an input field with a name containing the substring email.
Dynamic Element Manipulation:

You can also dynamically manipulate elements based on their attribute values using the [name*=”value”] selector. For instance, let's change the placeholder text of input fields containing the substring password:
index.html
Copied
```
<input type="password" name="password_field">
<input type="password" name="confirm_password">
```
example.js
Copied
```
$("input[name*=’password’]").attr("placeholder", "Enter your password");
```
This will set the placeholder text to Enter your password for all password input fields.

🎉 Conclusion

The jQuery [name*=”value”] selector offers a powerful mechanism for targeting and manipulating elements based on partial matches within their attribute values. Whether you're selecting elements, enhancing form validation, or dynamically manipulating content, this selector provides a versatile solution.

By mastering its usage, you can significantly enhance the interactivity and functionality of your web applications.