Search This Blog

How to select form input elements using JQuery

Posted by Team on

How to select form input elements using JQuery:

1. Select TextBox using jQuery – $(‘input:text’)

To select a textbox
$('input:text');
 
To get the textbox value
$('input:text').val();
 
To set the textbox value
$('input:text').val("New Text");
 

2. Select Password using jQuery – $(‘input:password’)

To select a password
$('input:password');
 
To get the password value
$('input:password').val();
 
To set the password value
$('input:text').val("New Text");
  

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

To select a textarea
$('textarea');
 
To get the textarea value
$('textarea').val();
 
To set the textarea value
$('textarea').val("New Text in Textarea");

 

 4. Select Radio Buttons using jQuery – $(‘input:radio’)

To select a radio button
$('input:radio');
 
To get the selected radio button option
$('input:radio[name=radiobutton-name]:checked').val();
 
To select the first radio button option
$('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’)

To select a checkbox
$('input:checkbox');
 
To check whether a checkbox is checked
$('input:checkbox[name=checkboxname]').is(':checked');
 
To check a checkbox
$('input:checkbox[name=checkboxname]').attr('checked',true);
 
To unchecked a checkbox
$('input:checkbox[name=checkboxname]').attr('checked',false);

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

To select a file
$('input:file');
To get the file value
$('input:file').val();

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

To select a hidden value
$('input:hidden');
To get the hidden value
$('input:hidden').val();
To set the hidden value
$('input:hidden').val("New Text");

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

To select a dropdown box
$('select')
or
$('#dropdown-id')
 
To get the selected drop down box value
$('#dropdown-id').val();
 
To set the drop down box value to “China”
$("#dropdown-id").val("China");

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

To select a submit button
$('input:submit');

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

To select a reset button
$('input:reset');
 
 

Here is a sample fiddle with working example


Sample Code on Github

(Download and run it as HTML)




Tags