In this article we will show you the solution of jQuery select input by name, here we defined input element with name attribute for select input element then css() method used for users verification of whether input element selected or not.
The css() method sets or returns one or more style properties for the selected elements. It returns the specified CSS property value of the FIRST matched element.
Step By Step Guide On jQuery Select Input By Name :-
In html we defined h1 element, button ‘Click Here’ with id attribute and input element with name, id attributes.
In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser.
There we appended click() method on button and within this we specified input element with name attribute, value for select that then which is appends with css() method for change background color to green.
<!DOCTYPE html>
<html>
<head>
<title>Select input element by name</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#ch").click(function(){
$('input[name="nm"]').css("background-color","green");
})
});
</script>
<body>
<h1>Select input tag by Name attribute</h1>
<button id="ch">Click Here</button>
<input type="text" name="nm" id="inp">
</body>
</head>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- We displayed heading ‘Select input tag by Name attribute’ using h1 element, button ‘Click Here’ with id ‘ch’ and input element defined with attributes id ‘inp’, name ‘nm’.
- In script we defined ready() method within that we appended click() method on button ‘Click Here’ by specifying id ‘ch’. There we specified ‘input[name="nm"]’ line where input element selected specifically by ‘name=”nm”’ value.
- Then we need’s to apply some style on that for user identification of selected element so using css() we sets input element’s background color to green.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to select input element by using name attribute in jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see ‘Select input tag by Name attribute’ heading, button ‘Click Here’ and input field.
Now user needs to clicks on button then we can see css style applied on selected input element.
I hope this article on jQuery select input by name helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
