3 minutes reading time (513 words)

jQuery Basics - Getting Values of Form Inputs Using jQuery

jQuery Basics - Getting Values of Form Inputs Using jQuery

As a web developer how many times we need to get values entered into text-boxes, text-areas or we need to get selected option from a dropdown select list or from radio buttons. As a novice programmer we all struggle with this situation several times.

In this post we are quickly going to cover how to deal with getting entered or selected values from all types of form fields including inputs, textarea & selects.

Below is sample code that shows a form with all types of form fields for input, textarea, selects, radios, checkboxes. And as you type or select options for those fields, selected options or entered text is shown.
To get values we will be using jquery.

 

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" type="text/css" />
	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<style>
		body{margin: 5px;}
		p{color: blue; margin:3px;}
	</style>
</head>

<body>
	<div class="row-fluid">
		<form class="form-horizontal">
			<fieldset>
				<!-- Form Name -->
				<legend> My Form</legend>

				<!-- Text input-->
				<div class="control-group">
					<label class="control-label" for="textinput">Text Input</label>
					<div class="controls">
						<input id="textinput" name="textinput" type="text" placeholder="Start typing" class="input" onkeyup="getVals(this, 'text');">
						<p id="pTextInput"></p>
					</div>
				</div>

				<!-- Textarea -->
				<div class="control-group">
				  <label class="control-label" for="textarea">Text Area</label>
				  <div class="controls">
					<textarea id="textarea" name="textarea" onkeyup="getVals(this, 'textarea');"></textarea>
					<p id="pTextarea"></p>
				  </div>
				</div>

				<!-- Multiple Radios -->
				<div class="control-group">
					<label class="control-label" for="radios">Multiple Radios</label>
					<div class="controls">
						<label class="radio" for="radios-1">
							<input type="radio" name="radios" id="radios-1" value="Yes" onchange="getVals(this, 'radio');">
							Yes
						</label>
						<label class="radio" for="radios-0">
							<input type="radio" name="radios" id="radios-0" value="No" onchange="getVals(this, 'radio');" >
							No
						</label>
						<p id="pRadio"></p>
					</div>
				</div>

				<!-- Multiple Checkboxes -->
				<div class="control-group">
					<label class="control-label" for="checkboxes">Multiple Checkboxes</label>
					<div class="controls">
						<label class="checkbox" for="checkboxes-1">
							<input type="checkbox" name="checkboxes" id="checkboxes-1" value="Yes"  onchange="getVals(this, 'checkbox');" >
							Yes
						</label>
						<label class="checkbox" for="checkboxes-0">
							<input type="checkbox" name="checkboxes" id="checkboxes-0" value="No"  onchange="getVals(this, 'checkbox');" >
							No
						</label>
						<p id="pCheckbox"></p>
				  </div>
				</div>

				<!-- Select Basic -->
				<div class="control-group">
					<label class="control-label" for="selectbasic">Select Basic</label>
					<div class="controls">
						<select id="selectbasic" name="selectbasic" class="input-xlarge" onchange="getVals(this, 'select');">
							<option value="1">Option one</option>
							<option value="2">Option two</option>
						</select>
						<p id="pSelect"></p>
				  </div>
				</div>

				<!-- Select Multiple -->
				<div class="control-group">
					<label class="control-label" for="selectmultiple">Select Multiple</label>
					<div class="controls">
						<select id="selectmultiple" name="selectmultiple" class="input-xlarge" multiple="multiple" onchange="getVals(this, 'multiselect');">
							<option value="1">Option one</option>
							<option value="2">Option two</option>
							<option value="3">Option three</option>
						</select>
						<p id="pMultiSelect"></p>
					</div>
				</div>

			</fieldset>
		</form>
	</div>

	<script>
		function getVals(formControl, controlType) {
			switch (controlType) {
				case 'text':
					// Get the value for a text input
					var value = $(formControl).val();
					$("#pTextInput").text(value);
					break;

				case 'textarea':
					// Get the value for a textarea
					var value = $(formControl).val();
					$("#pTextarea").text(value);
					break;

				case 'radio':
					// Get the value for a radio
					var value = $(formControl).val();
					$("#pRadio").text(value);
					break;

				case 'checkbox':
					// Get name for set of checkboxes
					var checkboxName = $(formControl).attr('name');

					// Get all checked checkboxes
					var value = [];
					$("input[name*='" + checkboxName + "']").each(function () {
						// Get all checked checboxes in an array
						if (jQuery(this).is(":checked")) {
							value.push($(this).val());
						}
					});
					$("#pCheckbox").text(value.join(", "));
					break;

				case 'select':
					// Get the value for a select
					var value = $(formControl).val();
					$("#pSelect").text(value);
					break;

				case 'multiselect':
					// Get all selected options for the multiselect in an array or default to array
					var value = $(formControl).val() || [];
					$("#pMultiSelect").text(value.join(", "));
					break;
			}
		}
	</script>
</body>

 

 

 Using jQuery to get form fields values

 

I hope this helps you to get form field values quickly.

You can refer to jQuery API doc for more http://api.jquery.com/val/

29
Appify your EasySocial website with our smartphone...
Quick2cart brings e-commerce to JReviews

Related Posts