Get Value From Selected Text Boxes Using Jquery
Many times we need ‘all or selected text value’ in our project in ajax action. So here is a simple jquery tutorial to
Get value from all or selected text boxes using jquery.
PROJECT SCREENSHOT
To achieve this task follow these steps.
Step 1:
Create a html file (tip1.html) and paste the following code.
[php]
<html>
<head>
<title>Get value form all or selected text boxes using jquery | Meul Tech </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!– Latest compiled and minified CSS –>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!– Latest compiled and minified Jquery –>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fjquery%2F2.1.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<!– Latest compiled and minified JavaScript –>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.3.0%2Fjs%2Fbootstrap.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>
<div class="container">
<blockquote style="background: #333; color: #fff">
<h2>Get value form all or selected text boxes using jquery</h2>
<small><a href="https://www.mehulprajapati.com" target="_blank">Meul Tech Classes.com</a></small>e>
<div class="row">
<div class="col-md-7">
<div id="form1">
<div class="bigDiv">
<input type="text" id="tb1" class="form-control input-sm" value="ONE" />
<input type="text" id="tb2" class="form-control input-sm" value="TWO"/>
<input type="text" id="tb3" class="form-control input-sm" value="THREE"/>
<input type="text" id="tb4" class="form-control input-sm selected" value="FOUR – selected"/>
<input type="text" id="tb5" class="form-control input-sm" value="FIVE"/>
<input type="text" id="tb6" class="form-control input-sm selected" value="SIX – selected" />
<button class="btn btn-info btn-sm" id="btnAll" title="Click to display text from all boxes">Display All</button>
<button class="btn btn-info btn-sm" id="btnSel" title="Click to display text from boxes with class-selected">Display Selective</button>
Tip: Clicking on the ‘Display Selective’ button retrieves
values from only those TextBoxes which have ‘class=selected’
</div>
</div>
</div>
<div class="col-md-5"> </div>
</div>
</div>
</body>
</html>
[/php]
Its a simple html code. Now we have to add some jquery code for get our requirement.
Step 2.
Add the following jquery code just before closing body tag.
[php]
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%24(function()%20%7B%0A%20%20%20%20%20%20%20%2F%2Fclick%20to%20show%20all%20text%20box%20value%0A%20%20%20%20%20%20%20%20%24(‘%23btnAll’).click(function(e)%20%7B%0A%20%20%20%20%20%20%20%20e.preventDefault()%3B%0A%20%20%20%20%20%20%20%20%24(%22%23para%22).text(”)%0A%20%20%20%20%20%20%20%20.append(%24(%22input%3Atext%22).map(function()%20%7B%0A%20%20%20%20%20%20%20%20return%20%24(this).val()%20%7C%7C%20null%3B%0A%20%20%20%20%20%20%20%20%7D).get().join(%22%0A%20%22))%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%2F%2F%20click%20to%20show%20only%20selected%20text%20box%0A%20%20%20%20%20%20%20%20%24(‘%23btnSel’).click(function(e)%20%7B%0A%20%20%20%20%20%20%20%20e.preventDefault()%3B%0A%20%20%20%20%20%20%20%20%24(%22%23para%22).text(”)%0A%20%20%20%20%20%20%20%20.append(%24(%22input.selected%22).map(function()%20%7B%0A%20%20%20%20%20%20%20%20return%20%24(this).val()%20%7C%7C%20null%3B%0A%20%20%20%20%20%20%20%20%7D).get().join(%22%0A%20%22))%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
[/php]
Finally, our code is ready.
The $map function is a very useful jquery built in function. This function transforms an array into another array by using a filter function and then allows us to access individual items of the array and modify them.
Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- Jquery Scroll Effect Tutorial For One Page Website.
- Jquery Plugin For Image Zoom On Mouse Hover
- Multiple Select DropDown List Tutorial in PHP and Jquery
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:
1. Web Designing Training in Mumbai.
2. Bootstrap Training Course in Mumbai.
4. UI / UX Training.
5. IOS Training Institute in Mumbai.