Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to find textareas and makes a border using jQuery?
Overview
For finding any element Jquery provides the best Syntax for the selector, it gives us a one line code for selecting any element from the HTML document. So to find all the textareas in the HTML we will be using the Jquery selector which will select the textareas and then by using the Jquery CSS(Cascading Styles Sheet) manipulation we will be making a border around the textarea. The border makes a User Interface more attractive.
Syntax
The Syntax for selecting and styling any element in Jquery is given below
$(selector).css();
$(selector) − . For selecting any element, class name or id name can be achieved by using the dollar symbol followed up with the name of the selector.
css() − The css() is a Jquery method which is used for styling the DOM elements. We can pass the value as key−value or we can also pass the argument as an object which contains different styling for an element.
Algorithm
Step 1 − Create an index.html file in your text editor and add a HTML boilerplate to it.
Step 2 − Now add the Jquery CDN ( Content Delivery Network ) link to the head tag of the HTML file.
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
Step 3 − Now create some textarea with the label tag.
<label>Skills</label><br> <textarea cols="30" placeholder="Write your technical skills here..."></textarea><br><br> <label>Cover Letter</label><br> <textarea cols="30" placeholder="Cover here..."></textarea><br><br> <label>About yourself</label><br> <textarea cols="30" rows="5" placeholder="Write about yourself..."></textarea><br><br> <label>Give your feedback below</label><br> <textarea cols="30" rows="5" placeholder="Write here..."></textarea><br>
Step 4 − Now create a HTML button to find all the text areas to style them.
<button>Border TextArea</button>
Step 5 − Now add the script tag.
<script></script>
Step 6 − Now create a Jquery selector with a click() function with it to trigger the function.
$("button").click(() => {)})
Step 7 − Now use the Jquery selector Syntax to select the text area.
$("textarea")
Step 8 − Now use the Jquery css() method to style the text areas.
$("textarea").css("border", "2px dashed red");
Step 9 − The borders around the text areas are applied successfully.
Example
In this Example we will be creating a simple layout in which it will contain few entries that will be entered inside the textareas and a button which will trigger a function for finding the textareas. We will be using the Jquery selector Syntax and css() method which is mentioned above.
<html>
<head>
<title> find textarea and make border using jquery </title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
</head>
<body>
<label>Skills</label><br>
<textarea cols="30" placeholder="Write your technical skills here..."></textarea><br><br>
<label>Cover Letter</label><br>
<textarea cols="30" placeholder="Cover here..."></textarea><br><br>
<label>About yourself</label><br>
<textarea cols="30" rows="5" placeholder="Write about yourself..."></textarea><br><br>
<label>Give your feedback below</label><br>
<textarea cols="30" rows="5" placeholder="Write here..."></textarea><br>
<button style="margin-top: 1rem;">Border TextArea</button>
<script>
$("button").click(() => {
$("textarea").css("border", "2px dashed red");
})
</script>
</body>
</html>
The image below shows the Output of the above feature, when a user loads it to the browser it displays text areas such as skills, Cover letter, about yourself and feedback with a button to trigger the function. When a user clicks on the "Border Now" button it triggers the Jquery function and finds all the text areas on the page after getting all the text area, css() method gets triggered and styles the border of all the text areas with red color as you can see in the image below.
Conclusion
This type of feature is used to manipulate the styling of an element or we can use this in any form validation in which if a user enters an inappropriate information in the text areas so the text area styling will be changed and will highlight in the page to show some errors. If we want to pass multiple styling in the css() method then we can pass it through the object as a key−value pair. It can also be used when any entries in the form are not filled before submission.
46 Views
