How to select all textareas and textboxes using jQuery?

JavascriptJquery

Javascript Problem Overview


How can I select all textboxes and textareas, e.g:

<input type='text' />

and

<textarea></textarea>

on a page and have the property style.width="90%"; applied to them?

Javascript Solutions


Solution 1 - Javascript

$('input[type=text], textarea').css({width: '90%'});

That uses standard CSS selectors, jQuery also has a set of pseudo-selector filters for various form elements, for example:

$(':text').css({width: '90%'});

will match all <input type="text"> elements. See Selectors documentation for more info.

Solution 2 - Javascript

Password boxes are also textboxes, so if you need them too:

$("input[type='text'], textarea, input[type='password']").css({width: "90%"});

and while file-input is a bit different, you may want to include them too (eg. for visual consistency):

$("input[type='text'], textarea, input[type='password'], input[type='file']").css({width: "90%"});

Solution 3 - Javascript

$("**:**input[type=text], :input[type='textarea']").css({width: '90%'});

Solution 4 - Javascript

names = [];
$('input[name=text], textarea').each(
	function(index){  
		var input = $(this);
		names.push( input.attr('name') );
        //input.attr('id');
	}
);

it select all textboxes and textarea in your DOM, where $.each function iterates to provide name of ecah element.

Solution 5 - Javascript

Simply use $(":input")

Example disabling all inputs (textarea, input text, etc):

$(":input").prop("disabled", true);

<form>
  <textarea>Tetarea</textarea>
  <input type="text" value="Text">
  <label><input type="checkbox"> Checkbox</label>
</form>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAliView Question on Stackoverflow
Solution 1 - JavascriptroryfView Answer on Stackoverflow
Solution 2 - JavascriptTobias BaazView Answer on Stackoverflow
Solution 3 - JavascriptRobView Answer on Stackoverflow
Solution 4 - JavascriptmuniView Answer on Stackoverflow
Solution 5 - JavascriptRoko C. BuljanView Answer on Stackoverflow