Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I know nothing about Javascript/Jquery etc but using Google and people answers I am using the following to add x number of fields together and showing in a subtotal box.
The following script loops so each time you see a 1 that will increment each loop count. Meaning the totals for each count are displayed, editing any number will only update that section total.
var $form = $('#locations'),
$summands1 = $form.find('.addme1'),
$sumDisplay1 = $('#incoming1');
$form.delegate('.addme1', 'change', function () {
var sum = 0;
$summands1.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
});
$sumDisplay1.val(sum);
$summandsa1 = $form.find('.addmea1'),
$sumDisplaya1 = $('#outgoing1');
});
$form.delegate('.addmea1', 'change', function () {
var sum = 0;
$summandsa1.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
});
$sumDisplaya1.val(sum);
});
This is an example form
<form id="locations" method='post' action=''>Loop 1
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="75" name="" class="addme1">
<input type="text" value="150" name="" class="addmea1">
<br>
<input type="text" value="300" name="" id="incoming1">
<input type="text" value="600" name="" id="outgoing1">
<br>Loop 2
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="75" name="" class="addme2">
<input type="text" value="150" name="" class="addmea2">
<br>
<input type="text" value="300" name="" id="incoming2">
<input type="text" value="600" name="" id="outgoing2">
<br>
<br>
<br>Total :
<input type="text" value="600" name="" id="totalin">
<input type="text" value="1200" name="" id="totalout"><br>
Profit :
<input type="text" value="600" name="" id="profit">
</form>
What I need is a way of adding the incoming1 incoming2 plus any other incomingx values there are and storing in totalin, likewise with outgoing1,2etc then having the profit update with totalout-totalin. So if a value is changed from what they are currently set it will automatically update all the other fields.
Can anyone help with this?
Fiddle here : http://jsfiddle.net/Gt473/3/
Note that loop 2 doesn't work as I am not sure how to repeat the script on jsfiddle but it does work on the html page.
I am not sure what your requirement was.But this is my take on it, the answer I posted mighty not what you are looking for.And also the code below can be written better but that's for you to research.
<form id="locations" method='post' action=''>
<fieldset class="level">
<legend>Loop1</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop2</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop3</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop4</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="level">
<legend>Loop5</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="incoming">
<input type="text" value="" name="" class="outgoing">
<br>
<input type="text" value="" name="" class="subIncoming" disabled>
<input type="text" value="" name="" class="subOutgoing" disabled>
</fieldset>
<fieldset class="total">
<legend>Total</legend>
<label>Incoming</label>
<label>Outgoing</label>
<br>
<input type="text" value="" name="" id="totalIncoming" disabled>
<input type="text" value="" name="" id="totalOutgoing" disabled>
</fieldset>
<fieldset>
<legend>Profit</legend>
<input type="text" value="" name="" id="profit" disabled>
</fieldset>
</form>
var $form = $('#locations'),
$totalIncoming = $('#totalIncoming'),
$totalOutgoing = $('#totalOutgoing'),
$profit = $('#profit');
$form.on('input', '.level input', function () {
var textBoxClass = $(this).attr('class'),
$level = $(this).closest('.level'),
$subTextBox = null,
$totalTextBox = null,
$textBoxes = null,
$subTextBoxes = null,
subSum = 0,
totalSum = 0;
if(textBoxClass === 'incoming'){
$textBoxes = $level.find('.incoming');
$subTextBox = $level.find('.subIncoming');
$totalTextBox = $('#totalIncoming');
$subTextBoxes = $form.find('.subIncoming');
}else{
$textBoxes =$level.find('.outgoing');
$subTextBox = $level.find('.subOutgoing');
$totalTextBox = $('#totalOutgoing');
$subTextBoxes = $form.find('.subOutgoing');
}
$textBoxes.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) subSum += value;
});
$subTextBox.val(subSum);
$subTextBoxes.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) totalSum += value;
});
$totalTextBox.val(totalSum);
$profit.val($totalIncoming.val() - $totalOutgoing.val())
});
Related
I need to write a javascript function that will loop through the input boxes and concatenates the text in each field together and displays the result in the result box. I tried multiple solutions and haven't been able to get any to work, I get that it needs an array of text fields but I can't seem to work it out.
<!DOCTYPE html>
<html>
<body>
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" onClick="myFunction()" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
<script>
function myFunction() {
var fields = [];
}
</script>
</body>
</html>
You can use filter and map
NOTE: I gave the button an ID of "btn"
document.getElementById('btn').addEventListener('click', function() {
const conc = [...document.querySelectorAll('#myform [id^=text]')] // id starts with text
.filter(fld => fld.value.trim() !== "") // not empty
.map(fld => fld.value) // store value
document.getElementById('result').value = conc.join(","); // join with comma
})
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" id="btn" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
In one pass:
document.getElementById('btn').addEventListener('click', function() {
const res = [];
[...document.querySelectorAll('#myform [id^=text]')]
.forEach(fld => { const val = fld.value.trim(); if (val !== "") res.push(val) })
document.getElementById('result').value = res.join(","); // join with comma
})
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" id="btn" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
function myFunction() {
const data = document.querySelectorAll("#myform input[type='text'][id^=text]");
//console.log(data);
var fields = [];
data.forEach(item => {
if (item.value != '') {
fields.push(item.value)
}
})
document.getElementById("result").value = fields.join(",")
}
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" onClick="myFunction()" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
im sorry but i tried everything that's available in the internet but all "solutions" doesnt work.
if the radio button is clicked, the textbox under that radio button will be enabled.else disabled.
pls help me with this.when i click the radio button, the textbox is still disabled.
js
function radioModeOfPayment(x){
if(document.getElementById('mMininum').checked == true){
document.getElementById("mMininum-amount").disabled = false;
document.getElementById("first").disabled = false;
document.getElementById("numMonth-months").disabled = true;
}
if(document.getElementById('numMonth').checked == true){
document.getElementById("numMonth-months").disabled = false;
document.getElementById("mMininum-amount").disabled = true;
document.getElementById("first").disabled = true;
}
}
html
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum" onclick="radioModeOfPayment(this);"> <label class="w3-validate">Minimum Payment</label><br>
<input type="text" class="tlabel" readonly="true" value="Amount"> <input type="text" class="tlabel w3-border" disabled="disabled" id="mMininum-amount" name="mMininum-amount" value=""><br>
<input type="text" class="tlabel" readonly="true" value="Starting Date"> <input type="date" disabled="disabled" id="first" name="sdate"><br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth" onclick="radioModeOfPayment(this);"> <label class="w3-validate">Number of Months</label><br>
<input type="text" class="tlabel" readonly="true" value="Months"> <input type="text" class="tlabel w3-border" readonly="true" id="numMonth-months" name="numMonth-months" value=""><br>
</div>
remove input text readonly attribute
function radioModeOfPayment(x) {
if (document.getElementById('mMininum').checked == true) {
document.getElementById("mMininum-amount").disabled = false;
document.getElementById("first").disabled = false;
document.getElementById("numMonth-months").disabled = true;
}
if (document.getElementById('numMonth').checked == true) {
document.getElementById("numMonth-months").disabled = false;
document.getElementById("mMininum-amount").disabled = true;
document.getElementById("first").disabled = true;
}
}
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum" onclick="radioModeOfPayment(this);">
<label class="w3-validate">Minimum Payment</label>
<br>
<input type="text" class="tlabel" readonly="true" value="Amount">
<input type="text" class="tlabel w3-border" disabled="disabled" id="mMininum-amount" name="mMininum-amount" value="">
<br>
<input type="text" class="tlabel" readonly="true" value="Starting Date">
<input type="date" disabled="disabled" id="first" name="sdate">
<br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth" onclick="radioModeOfPayment(this);">
<label class="w3-validate">Number of Months</label>
<br>
<input type="text" class="tlabel" readonly="true" value="Months">
<input type="text" class="tlabel w3-border" id="numMonth-months" name="numMonth-months" value="">
<br>
</div>
EDIT 2
In Snippet 2 it is exactly the same as OP's layout. By adding nth-of-type, the inputs on the right-side are the only inputs that are enabled and disabled while the ones on the left are unaffected. The attribute disabled and have been removed.
EDIT
Sorry forgot OP wants radio buttons, it works just as well.
Here's a simple CSS only solution.
This uses:
adjacent sibling selector
pointer-events
SNIPPET 1
.chx:checked + input {
pointer-events: none;
}
.chxs:checked ~ input {
pointer-events: none
}
input[name="rad"]:checked + input[type="text"] {
pointer-events: none;
}
<p>This example uses + which affects only the sibling that's immediately after .chx</p>
<input class='chx' type='checkbox'>
<input>
<br/>
<br/>
<p>This example uses ~ which affects all siblings that follow .chxs</p>
<input class='chxs' type='checkbox'>
<input>
<input>
<input>
<br/>
<br/>
<p>Works on radio buttons as well</p>
<fieldset>
<input name='rad' type='radio'>
<input type='text'>
</fieldset>
<fieldset>
<input name='rad' type='radio'>
<input type='text'>
</fieldset>
SNIPPET 2
.w3-radio:checked ~ input:nth-of-type(2n-1) {
pointer-events: none;
}
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum">
<label class="w3-validate">Minimum Payment</label>
<br>
<input type="text" class="tlabel" readonly=true value="Amount">
<input type="text" class="tlabel w3-border" id="mMininum-amount" name="mMininum-amount" value="">
<br>
<input type="text" class="tlabel" readonly=true value="Starting Date">
<input type="date" id="first" name="sdate">
<br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth">
<label class="w3-validate">Number of Months</label>
<br>
<input type="text" class="tlabel" readonly=true value="Months">
<input type="text" class="tlabel w3-border" id="numMonth-months" name="numMonth-months" value="">
<br>
</div>
I have an existing html form which use array to store multiple row values. So I do not have a specific name for the same field for different row. In the PHP page i match the row according to the index.
In the form below, how do I make the button + and - to increase and decrease the value of the quantity of the specific row?
ROW 1
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>`
ROW 2
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>
ROW 3
<input type="text" name="product[]" />
<input type="text" name="price[]" value="" onChange="updatePrice()" />
<input type="text" name="quantity[]" value="" onChange="updatePrice()" />
<input type="button" onclick="inc(this)" value="+"/>
<input type="button" onclick="dec(this)" value="-"/>
In my opinion you first should to numerate items:
<input type="text" name="product[]" />
<input id="price-1" type="text" name="price[]" value="" onChange="updatePrice(1)" /> <!-- row number -->
<input id="qty-1" type="text" name="quantity[]" value="" onChange="updatePrice(1)" />
<input type="button" onclick="inc('qty-1')" value="+"/>
<input type="button" onclick="dec('qty-1')" value="-"/>
Then use javascript to manipulate items:
<script>
function inc(id) {
stepQty(id, +1);
}
function dec(id) {
stepQty(id, -1);
}
function stepQty(id, step) {
var value = $('#'+id).val();
$('#'+id).val(value + step);
}
function updatePrice(id) {
var a = $('#price-'+id).val() || 0;
var b = $('#qty-'+id).val() || 0;
$('#'+id).val(a*b);
}
</script>
So, I am fairly new to JavaScript and I want to create a box for the user to input matrix mxn then parse the input to JS. I know how to create row and column in html, but I have no idea with the JS.
This is what I have so far.
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3">
<input type="text" name="field01" size="3">
<input type="text" name="field02" size="3">
<input type="text" name="field03" size="3">
<br>
<input type="text" name="field10" size="3">
<input type="text" name="field11" size="3">
<input type="text" name="field12" size="3">
<input type="text" name="field13" size="3">
<br>
<input type="text" name="field20" size="3">
<input type="text" name="field21" size="3">
<input type="text" name="field22" size="3">
<input type="text" name="field23" size="3">
<br>
<input type="submit" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info">
</form>
<div id="resultField">
</div>
</div>
</div>
<script type="text/javascript">
function calcJacobian(){
var myArr = document.forms.inputField;
var myControls = myArr.elements['p_id'];
for(var i =0; i<myControls.length; i++){
var aControl = myControls[i];
document.getElementById("resultField").append=aControl;
}
}
</script>
After a few adjustments, the code is displayed below. Note that the variable name_value_array holds a map which store all values from the table, having as the key the input name and as stored value the input value.
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3">
<input type="text" name="field01" size="3">
<input type="text" name="field02" size="3">
<input type="text" name="field03" size="3">
<br>
<input type="text" name="field10" size="3">
<input type="text" name="field11" size="3">
<input type="text" name="field12" size="3">
<input type="text" name="field13" size="3">
<br>
<input type="text" name="field20" size="3">
<input type="text" name="field21" size="3">
<input type="text" name="field22" size="3">
<input type="text" name="field23" size="3">
<br>
<input type="button" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info">
</form>
<div id="resultField">
</div>
</div>
</div>
<script type="text/javascript">
function calcJacobian() {
var myArr = document.forms.inputField;
var myControls = myArr;
var name_value_array = [];
for (var i = 0; i < myControls.length; i++) {
var aControl = myControls[i];
// don't print the button value
if (aControl.type != "button") {
// store value in a map
name_value_array.push(aControl.value, aControl.name);
document.getElementById("resultField").appendChild(document.createTextNode(aControl.value + " "));
}
}
// show map values as a popup
alert(JSON.stringify(name_value_array));
}
</script>
Try the CSS selector string for 'starts with' aka ^= to grab all values with names starting with field, perhaps make it an array so as to save the name value numbers at the same time:
window.calcJacobian = function() {
var myArr = document.querySelectorAll('input[name^="field"]')
for (var i = 0; i < myArr.length; i++) {
var results = "\nfield: " + myArr[i].name.substring(5) + ", value: " + myArr[i].value;
var text = document.createTextNode(results);
document.querySelector('#resultField').appendChild(text);
}
}
#resultField {
white-space: pre-line;
}
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3" />
<input type="text" name="field01" size="3" />
<input type="text" name="field02" size="3" />
<input type="text" name="field03" size="3" />
<br>
<input type="text" name="field10" size="3" />
<input type="text" name="field11" size="3" />
<input type="text" name="field12" size="3" />
<input type="text" name="field13" size="3" />
<br>
<input type="text" name="field20" size="3" />
<input type="text" name="field21" size="3" />
<input type="text" name="field22" size="3" />
<input type="text" name="field23" size="3" />
<br>
<input type="button" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info" />
</form>
<div id="resultField"></div>
</div>
</div>
I have to validate these fields in various ways. What I'm really having trouble with is that I have to output an error message for each field if its blank. There should be an error message next to each control that is null. all error messages need to be presented at the same time. So if there are multiple fields blank, all error messages need to show up when the user clicks the validate button.
<form name="myForm" action="" onsubmit="formValidate()" method="post">
Name: <input type="text" name="name" id="name">
<br>
Email: <input type="text" name="email" id="email">
<br>
Phone: <input type="text" name="area" id="area">-
<input type="text" name="prefix" id="prefix">-
<input type="text" name="suffix" id="suffix">
<br>
Address: <input type="text" name="address" id="address">
<br>
City: <input type="text" name="city" id="city">
State: <select id="state">
<option value="WI">WI</option>
<option value="IL">IL</option>
<option value="MI">MI</option>
</select>
Zip: <input type="text" name="zip" id="zip">
<br>
<input type="radio" name="sex" value="male" id="gender">Male
<input type="radio" name="sex" value="female" id="gender">Female
<br>
<input type="checkbox" name="courses" value="asp" id="asp">ASP.NET
<br>
<input type="checkbox" name="courses" value="java" id="java">Advanced Java
<br>
<input type="checkbox" name="courses" value="php" id="php">PHP
<br>
<input type="submit" value="Validate">
</form>
I've tried adding my own output with appendChild but I couldn't get it to work. I cannot use innerHTML for this, and my overall javascript knowledge is a few years rusty.
Even vague examples will help at this point.
Here's some code:
HTML
<form name="myForm" action="" method="post">
Name: <input type="text" name="name" id="name"/><span id="nameError" class="error"></span>
<br/>
Email: <input type="text" name="email" id="email"/><span id="emailError" class="error"></span>
<br/>
Phone: <input type="text" name="area" id="area"/>-
<input type="text" name="prefix" id="prefix"/>-
<input type="text" name="suffix" id="suffix"/><span id="phoneError" class="error"></span>
<br/>
Address: <input type="text" name="address" id="address"/><span id="addressError" class="error"></span>
<br/>
City: <input type="text" name="city" id="city"/><span id="cityError" class="error"></span>
<br/>
State: <select id="state">
<option value="WI">WI</option>
<option value="IL">IL</option>
<option value="MI">MI</option>
</select>
Zip: <input type="text" name="zip" id="zip"/><span id="zipError" class="error"></span>
<br/>
<input type="radio" name="sex" value="male" id="gender"/>Male
<input type="radio" name="sex" value="female" id="gender"/>Female
<br/>
<input type="checkbox" name="courses" value="asp" id="asp"/>ASP.NET
<br/>
<input type="checkbox" name="courses" value="java" id="java"/>Advanced Java
<br/>
<input type="checkbox" name="courses" value="php" id="php"/>PHP
<br/>
<input id="validate" type="submit" value="Validate"/>
</form>
CSS
.error {
color:red;
font-style:italic;
font-size:90%;
padding-left:3px;
}
JavaScript
window.VALIDATE_MAP = {
'name':'nameError',
'email':'emailError',
'area':'phoneError',
'prefix':'phoneError',
'suffix':'phoneError',
'address':'addressError',
'city':'cityError',
'zip':'zipError'
};
window.BLANK_ERROR_MESSAGE = 'cannot be blank.';
$('#validate').click(function() {
var valid = true;
for (var id in VALIDATE_MAP) {
if (!VALIDATE_MAP.hasOwnProperty(id)) continue;
var errorId = VALIDATE_MAP[id];
var $input = $('#'+id);
var $error = $('#'+errorId);
if ($input.val() === '') {
$error.text(BLANK_ERROR_MESSAGE);
valid = false;
} else {
$error.text('');
} // end if
} // end for
return valid;
});
http://jsfiddle.net/h4cw4hw7/1/