How to select form input elements using JQuery

How to select form input elements using JQuery:

Select Textbox using jQuery – $(‘input:text’)

Select a textbox field using JQuery

$('input:text');
 

Select a textbox value using JQuery

$('input:text').val();
 

Set a textbox value using JQuery

$('input:text').val("New Text");
 
2. Select Password using jQuery – $(‘input:password’)
Select password field using JQuery


$('input:password');
 
Select password value using JQuery


$('input:password').val();
 
Set password value using JQuery


$('input:password').val("New Text");
  

3. Select Textarea using jQuery – $(‘textarea’)
Select a textarea field using JQuery


$('textarea');
 
Select a textarea value using JQuery


$('textarea').val();
 
Set a textarea value using JQuery


$('textarea').val("New Text in Textarea");
 
 
4. Select Radio Buttons using jQuery – $(‘input:radio’)
Select a radio button field using JQuery


$('input:radio');
 
Select value of a selected radio button using JQuery


$('input:radio[name=radiobutton-name]:checked').val();
 
Select first selected radio button using JQuery


$('input:radio[name=radiobutton-name]:nth(0)').attr('checked',true);
 
or 
 
$('input:radio[name=radiobutton-name]')[0].checked = true;



 
5. Select Check Box using jQuery – $(‘input:checkbox’)

Select a checkbox field using JQuery


$('input:checkbox');
 
Check if a chcekbox is checked using JQuery


$('input:checkbox[name=checkboxname]').is(':checked');
 
Set a checkbox to checked using JQuery


$('input:checkbox[name=checkboxname]').attr('checked',true);
 
Set a checkbox to unchecked using JQuery


$('input:checkbox[name=checkboxname]').attr('checked',false);



6. Select File Upload using jQuery – $(‘input:file’)
Select a file input using JQuery


$('input:file');

Select the value of a file input using JQuery


$('input:file').val();


7. Select Hidden Inputbox using jQuery – $(‘input:hidden’)
Select a hidden inputbox using JQuery


$('input:hidden');

Select the value if a hidden input box using JQuery


$('input:hidden').val();

Set the value of hidden text box using JQuery


$('input:hidden').val("New Text");

8. Select dropdown box using jQuery – $(‘select’)
Select a dropdown box using JQuery


$('select')

or

$('#dropdown-id')
 
Select the value if selected dropdown box using JQuery


$('#dropdown-id').val();
 
Set the value of a dropdown box using JQuery


$("#dropdown-id").val("China");



9. Select Submit button using jQuery – $(‘input:submit’)
Select submit button using JQuery


$('input:submit');

10. Select Reset button using jQuery – $(‘input:reset’)
Select the reset button using JQuery


$('input:reset');
 
 
Here is a sample fiddle with working example



Sample Code on Github
(Download and run it as HTML)






    

      

        

  

    
    


        



  


  

        

          
          <html>
        

        

          
          <head>
        

        

          
          <title>jQuery form selector example</title>
        

        

          
          <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous">
        

        

          
          <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
        

        

          
           
        

        

          
          <style type="text/css">
        

        

          
           div{
        

        

          
            padding:16px;
        

        

          
           }
        

        

          
          </style>
        

        

          
          </head>
        

        

          
           <body>
        

        

          
           <h1 class="text-center">How To Select Form Elements using JQuery</h1>
        

        

          
          <form name="testing" action="#">
        

        

          
           <div>
        

        

          
           TextBox : <input class="form-control" type="text" value="This is message from textbox" />
        

        

          
           </div>
        

        

          
           <div>
        

        

          
           Password : <input class="form-control" type="password" value="This is message from password" />
        

        

          
           </div>
        

        

          
           <div>
        

        

          
           TextArea : <textarea class="form-control">This is message from textarea</textarea>
        

        

          
           </div>
        

        

          
           <div>
        

        

          
           Radio : <input class="form-control" name="sex" type="radio" value="Male" checked>Male</input>
        

        

          
            <input class="form-control" name="sex" type="radio" value="Female">Female</input>
        

        

          
           </div>
        

        

          
           <div>
        

        

          
           CheckBox : <input class="form-control" type="checkbox" name="checkme">Check Me</input>
        

        

          
           </div>
        

        

          
           <div>
        

        

          
           File : <input class="form-control" type="file"></input>
        

        

          
           </div>
        

        

          
           <div>
        

        

          
           Hidden : <input type="hidden" value="This is message from hidden"/>
        

        

          
           </div>
        

        

          
           <div>
        

        

          
           Country : <select class="form-control" id="country">
        

        

          
            <option value="China">China</option>
        

        

          
            <option value="United State">United State</option>
        

        

          
            </select>
        

        

          
           </div>
        

        

          
           <div>
        

        

          
           <input type="submit" class="btn btn-primary"></input> <input class="btn btn-default" type="reset"></input>
        

        

          
           </div> 
        

        

          
          </form>
        

        

          
          

        

        

          
          <h2>Selection: <label id="msg"></label></h2>
        

        

          
           
        

        

          
          <button class="btn btn-info" id="text">input:text</button>
        

        

          
          <button class="btn btn-info" id="password">input:password</button>
        

        

          
          <button class="btn btn-info" id="textarea">textarea</button>
        

        

          
          <button class="btn btn-info" id="radio">input:radio</button>
        

        

          
          <button class="btn btn-info" id="checkbox">input:checkbox</button>
        

        

          
          <button class="btn btn-info" id="file">input:file</button>
        

        

          
          <button class="btn btn-info" id="hidden">input:hidden</button>
        

        

          
          <button class="btn btn-info" id="select">select</button>
        

        

          
          <button class="btn btn-info" id="submit">input:submit</button>
        

        

          
          <button class="btn btn-info" id="reset">input:reset</button>
        

        

          
           
        

        

          
          <script type="text/javascript">
        

        

          
          // select various input boxes and get their values
        

        

          
           $("#text, #password, #hidden, #textarea, #file, #submit, #reset").click(function () {
        

        

          
            var str = $(this).text();
        

        

          
            $('input, textarea, select').css("background", "#ffffff");
        

        

          
            $(str).css("background", "#ff0000");
        

        

          
            $('#msg').html($(str).val())
        

        

          
           });
        

        

          
           
        

        

          
           // select radio button values
        

        

          
           $("#radio").click(function () {
        

        

          
              $('input, textarea, select').css("background", "#ffffff");
        

        

          
              $('#msg').html($('input:radio[name=sex]:checked').val());
        

        

          
           });
        

        

          
           
        

        

          
           // select checkbox values
        

        

          
           $("#checkbox").click(function () {
        

        

          
            var str = $(this).text();
        

        

          
            $('input, textarea, select').css("background", "#ffffff");
        

        

          
            if($('input:checkbox[name=checkme]').is(':checked')){
        

        

          
              $('#msg').html("Checkbox is checked");
        

        

          
            }else{
        

        

          
              $('#msg').html("Checkbox is uncheck");
        

        

          
            }  
        

        

          
           });
        

        

          
           
        

        

          
           $("#select").click(function () {
        

        

          
            $('input, textarea, select').css("background", "#ffffff");
        

        

          
            $('#msg').html($('#country').val());
        

        

          
           });
        

        

          
          </script>
        

        

          
          </body>
        

        

          
          </html>
        

  





    


  




      

      

        view raw
        
          jquery-form-selectors.html
        
        hosted with ❤ by GitHub
      

    














































Comments











Post a Comment






























Popular posts from this blog









Fake CVR Generator Denmark





















   What Is Danish CVR   The Central Business Register (CVR) is the central register of the state with information on all Danish companies.  Since 1999, the Central Business Register has been the authoritative register for current and historical basic data on all registered companies in Denmark. Data comes from the companies' own registrations on Virk Report. There is also information on associations and public authorities in the CVR.  As of 2018, CVR also contains information on Greenlandic companies, associations and authorities.  In CVR at Virk you can do single lookups, filtered searches, create extracts and subscriptions, and retrieve a wide range of company documents and transcripts.    Generate Danish CVR For Test (Fake)  Click the button below to generate the valid CVR number for Denmark. You can click multiple times to generate several numbers. These numbers can be used to Test your sofware application that uses CVR, or Testing CVR APIs that Danish Govt provide.   Generate-...








View more »










How To Iterate Dictionary Object





















 Dictionary is a object that can store values in Key-Value pair. its just like a list, the only difference is:  List can be iterate using index(0-n)  but not the Dictionary .   Generally when we try to iterate the dictionary we get below error:   " Collection was modified; enumeration operation may not execute. "  So How to parse a dictionary and modify its values??  To iterate dictionary we must loop through it's keys  or key - value  pair.   Using keys    








View more »










Bing Homepage Quiz: Fun, Win Rewards, and Brain Teasers




















Image







Bing, Microsoft's search engine, has taken interactive engagement to the next level with its captivating feature - the Bing Homepage Quiz. This intriguing daily quiz not only challenges your knowledge but also offers a chance to earn rewards. In this comprehensive guide, we will explore the ins and outs of the Bing Homepage Quiz, including how to play, the different types of quizzes, and how you can earn and use rewards through this engaging feature.   Bing homepage Quiz | Image credit: Windowsreport   How to Play the Bing Homepage Quiz  Playing the Bing Homepage Quiz is simple and enjoyable. Here's how you can get started:   Visit Bing : Open your preferred web browser and navigate to the Bing homepage (bing.com).   Look for the Quiz : On the Bing homepage, keep an eye out for the interactive quiz card. This card is usually located near the bottom of the page and features a captivating image related to the quiz.   Click to Start : Click on the quiz card to begin the quiz. It...








View more »