In the previous blog on JQuery we saw - “How to Get Values of Form Inputs Using jQuery”.
In this post we will cover how to set up values for Form Inputs using jQuery for form fields including inputs, textarea, radio, single select list and multi-select list.
Below is sample code that shows a form with all types of form inputs for input, textarea, selects, radios, checkboxes.
Clicking on buttons next to all input fields call jquery code that will setup predefined values into form inputs.
Note: This Blog is targeted towards developers!
Here is code to set form inputs values we will be using jquery
Example uses - jQuery and Boostrap 2 code
<!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" action="">
<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" >
<button type="button" class="btn btn-small" onclick="setVals('textinput', 'text', 'Mom, Was I set up on click?');">Set text in text field</button>
</div>
</div>
<!-- Textarea -->
<div class="control-group">
<label class="control-label" for="textarea">Text Area</label>
<div class="controls">
<textarea id="textarea" name="textarea"></textarea>
<button type="button" class="btn btn-small" onclick="setVals('textarea', 'textarea', 'I am telling you, I was set up on click!');">Set text in textarea field</button>
</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">
Yes
</label>
<label class="radio" for="radios-0">
<input type="radio" name="radios" id="radios-0" value="No">
No
</label>
<button type="button" class="btn btn-small" onclick="setVals('radios', 'radio', 'Yes');">Say 'Yes'</button>
<button type="button" class="btn btn-small" onclick="setVals('radios', 'radio', 'No');">Say 'No'</button>
</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">
Yes
</label>
<label class="checkbox" for="checkboxes-0">
<input type="checkbox" name="checkboxes" id="checkboxes-0" value="No">
No
</label>
<button type="button" class="btn btn-small" onclick="setVals('checkboxes', 'checkbox', 'Yes');">Select 'Yes'</button>
<button type="button" class="btn btn-small" onclick="setVals('checkboxes', 'checkbox', 'No');">Select 'No'</button>
</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">
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
<button type="button" class="btn btn-small" onclick="setVals('selectbasic', 'select', '1');">Select 'Option one'</button>
<button type="button" class="btn btn-small" onclick="setVals('selectbasic', 'select', '2');">Select 'Option two'</button>
</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">
<option value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
</select>
<button type="button" class="btn btn-small" onclick="setVals('selectmultiple', 'multiselect', '1');">Select 'Option one'</button>
<button type="button" class="btn btn-small" onclick="setVals('selectmultiple', 'multiselect', '2');">Select 'Option two'</button>
<button type="button" class="btn btn-small" onclick="setVals('selectmultiple', 'multiselect', '2,3');">Select 'Option two, three'</button>
<button type="button" class="btn btn-small" onclick="setVals('selectmultiple', 'multiselect', '1,2,3');">Select 'Option one, two, three'</button>
</div>
</div>
</fieldset>
</form>
</div>
<script>
function setVals(formControlIdentier, controlType, newVal) {
switch (controlType) {
case 'text':
// Set the value for text input
$('#' + formControlIdentier).val(newVal);
break;
case 'textarea':
// Set the value for textarea
$('#' + formControlIdentier).val(newVal);
break;
case 'radio':
// First reset all radio buttons
$('input[name="' + formControlIdentier + '"]').each(function(){
var kid=$(this); kid.prop('checked', false);
});
// Set the value for radio
$('[name="' + formControlIdentier + '"][value="' + newVal + '"]').prop("checked", true);
break;
case 'checkbox':
// First reset all checkboxes
$('input[name="' + formControlIdentier + '"]').each(function(){
var kid=$(this); kid.prop('checked', false);
});
// Set the value for checkbox
$('[name="' + formControlIdentier + '"][value="' + newVal + '"]').prop("checked", true);
break;
case 'select':
// Set the value for select list
$('#' + formControlIdentier).val(newVal);
break;
case 'multiselect':
// Generate array form new value string
var valsArray = newVal.split(",");
// Set the value for select list
$('#' + formControlIdentier).val(valsArray);
break;
}
return true;
}
</script>
</body>
Above screenshot illustrates all types of fields. I hope you’ll be able to do it yourself easily. If you need any help feel free to comment. :)