Get Value From Selected Text Boxes Using Jquery



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.

<html>
    <head>
        <title>Get value form all or selected text boxes using jquery | TryCatch Classes</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="&lt;script&gt;" title="&lt;script&gt;" />
 
        <!-- 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="&lt;script&gt;" title="&lt;script&gt;" />
    </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="http://www.trycatchclasses.com" target="_blank">TryCatchClasses.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>

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.

<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="&lt;script&gt;" title="&lt;script&gt;" />

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 becaus“You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page TryCatch Classes.

Bonus: We also give training on following topics:

1. Web Designing Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Python Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.