I've made a form with a few items. Each item has a value.
Now my question is, how can I add the values from these items (when you check them) to the total value?
See JSFiddle
<form id="AddValuesForm" action="">
<fieldset id="AddValuesFormPart1">
<legend>Add Values</legend>
<ul>
<li>
<ul id="AddValueList">
<li id="AddValueItem1">
<input id="value1" type="checkbox" name="value1" value="" tabindex="10"/> <label for="value1">Cheesecake</label>
<input class="v1" id="value1" type="text" name="value1" value="1.25" disabled="disabled" maxlength="10"/>
</li>
<li id="AddValueItem2">
<input id="value2" type="checkbox" name="value2" value="" tabindex="20"/> <label for="value2">Banana Pie</label>
<input class="v2" id="value2" type="text" name="value2" value="1.50" disabled="disabled" maxlength="10"/>
</li>
<li id="AddValueItem3">
<input id="value3" type="checkbox" name="value3" value="" tabindex="30"/> <label for="value3">Chocolate Muffin</label>
<input class="v3" id="value3" type="text" name="value3" value="1.00" disabled="disabled" maxlength="10"/>
</li>
</ul>
</li>
<li>
<ul id="AddValueTotalList">
<li id="AddValueTotal">
<label for="total">Total:</label><input class="t" id="total" type="text" name="total" value="0.00" disabled="disabled" maxlength="10"/>
</li>
</ul>
</li>
<li id="ValueSubmit"><input id="AddValuesItem10" type="submit" name="submit" value="Submit Add Values Form" tabindex="100"/></li>
</ul>
</fieldset>
</form>
Note: without the use of jQuery.
This should do it:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<style type="text/css">
ul{list-style-type:none;}
ul#AddValueList{float:left;}
.v1, .v2, .v3
{
width:35px;
text-align:right;
color:#000;
}
.v1{margin:0px 0px 0px 50px;}
.v2{margin:0px 0px 0px 56px;}
.v3{margin:0px 0px 0px 19px;}
.t
{
width:35px;
text-align:right;
color:#000;
margin:20px 0px 0px 118px;
}
#ValueSubmit,
#AddValueTotalList
{
clear:left;
}
#ValueSubmit input{margin:20px 0px 0px 0px;}
</style>
<script type="text/javascript">
var totalcounter = 0;
totaltracker = function (event) {
var targetelement = (typeof event.target != "undefined") ? event.target : event.srcElement;
var multipler = 0;
if (targetelement.checked) {
multipler++;
} else {
multipler--;
}
var targetvalue = document.getElementById(targetelement.id + 'a');
var idtotal = document.getElementById("total");
if (idtotal) idtotal.value = parseFloat(idtotal.value) + (multipler * parseFloat(targetvalue.value));
};
function totalloader () {
var elements = document.getElementsByTagName('INPUT');
for (var i=0; i<elements.length; i++) {
var thisElement = elements[i];
if (thisElement.getAttribute("type") == "checkbox") {
if (typeof thisElement.addEventListener != "undefined") {
thisElement.addEventListener("click", totaltracker, true);
} else if (typeof thisElement.attachEvent != "undefined") {
thisElement.attachEvent("onclick", totaltracker);
}
}
}
}
</script>
<title>Add Values in Form</title>
</head>
<body onLoad="totalloader();">
<form id="AddValuesForm" action="">
<fieldset id="AddValuesFormPart1">
<legend>Add Values</legend>
<ul>
<li>
<ul id="AddValueList">
<li id="AddValueItem1">
<input id="value1" type="checkbox" name="value1" value="" tabindex="10"/>
<label for="value1">Cheesecake</label>
<input class="v1" id="value1a" type="text" name="value1" value="1.25" disabled="disabled" maxlength="10"/>
</li>
<li id="AddValueItem2">
<input id="value2" type="checkbox" name="value2" value="" tabindex="20"/> <label for="value2">Banana Pie</label>
<input class="v2" id="value2a" type="text" name="value2" value="1.50" disabled="disabled" maxlength="10"/>
</li>
<li id="AddValueItem3">
<input id="value3" type="checkbox" name="value3" value="" tabindex="30"/> <label for="value3">Chocolate Muffin</label>
<input class="v3" id="value3a" type="text" name="value3" value="1.00" disabled="disabled" maxlength="10"/>
</li>
</ul>
</li>
<li>
<ul id="AddValueTotalList">
<li id="AddValueTotal">
<label for="total">Total:</label><input class="t" id="total" type="text" name="total" value="0.00" disabled="disabled" maxlength="10"/>
</li>
</ul>
</li>
<li id="ValueSubmit"><input id="AddValuesItem10" type="submit" name="submit" value="Submit Add Values Form" tabindex="100"/></li>
</ul>
</fieldset>
</form>
</body>
</html>
I have changed the id of the disabled value field to more easier equate from the check box to the value to be totaled.
I have added an onload to the body tag.
I have added a script section to do the work.
var t=0;
for (i=1; i<=3; i++) {
t = t + document.getElementById('value' + i).value;
}
document.getElementById('total').value = t;
Please use the code Below
function recalculate(obj, id) {
var total = parseFloat(document.getElementById('total').value);
var amount = parseFloat(document.getElementById(id).value);
if (obj.checked) {
total += amount;
} else {
if (total >= 0) {
total -= amount;
}
}
document.getElementById('total').value = total;
}
</script>
<form id="AddValuesForm" action="">
<fieldset id="AddValuesFormPart1">
<legend>Add Values</legend>
<ul>
<li>
<ul id="AddValueList">
<li id="AddValueItem1">
<input id="value1" type="checkbox" name="value1" value="" tabindex="10" onchange="recalculate(this, 'txtValue1');"/> <label for="value1">Cheesecake</label>
<input class="v1" id="txtValue1" type="text" name="value1" value="1.25" disabled="disabled" maxlength="10"/>
</li>
<li id="AddValueItem2">
<input id="value2" type="checkbox" name="value2" value="" tabindex="20" onchange="recalculate(this, 'txtValue2');"/> <label for="value2">Banana Pie</label>
<input class="v2" id="txtValue2" type="text" name="value2" value="1.50" disabled="disabled" maxlength="10"/>
</li>
<li id="AddValueItem3">
<input id="value3" type="checkbox" name="value3" value="" tabindex="30" onchange="recalculate(this, 'txtValue3');"/> <label for="value3">Chocolate Muffin</label>
<input class="v3" id="txtValue3" type="text" name="value3" value="1.00" disabled="disabled" maxlength="10"/>
</li>
</ul>
</li>
<li>
<ul id="AddValueTotalList">
<li id="AddValueTotal">
<label for="total">Total:</label><input class="t" id="total" type="text" name="total" value="0.00" disabled="disabled" maxlength="10"/>
</li>
</ul>
</li>
<li id="ValueSubmit"><input id="AddValuesItem10" type="submit" name="submit" value="Submit Add Values Form" tabindex="100"/></li>
</ul>
</fieldset>
</form>
Using JQuery JSFIDDLE:
$(document ).ready(function() {
console.log( "ready!" );
$('input[type=checkbox]').click(function() {
if($(this).is(':checked')) {
$('#total').val( parseFloat($('#total').val())+parseFloat($(this).parent().find('input[type=text]').val()));
} else {
$('#total').val( parseFloat($('#total').val())-parseFloat($(this).parent().find('input[type=text]').val()));
}
});
});
Related
HTML
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" /><label for="cat_1">cat_1</label><br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" /><label for="cat_2">cat_2</label><br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" /><label for="cat_3">cat_3</label><br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" /><label for="cat_4">cat_4</label><br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" /><label for="cat_5">cat_5</label><br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" /><label for="cat_6">cat_6</label><br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" /><label for="cat_7">cat_7</label><br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" /><label for="cat_8">cat_8</label><br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" /><label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Javascript
function calcAndShowTotal(){
var total = 0;
$('#catlist :checkbox[checked]').each(function(){
total =+ parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#pricelist :checkbox').click(function(){
calcAndShowTotal();
});
calcAndShowTotal();
I am getting particular value. WHY? I tried sum of total, i tried jquery but no success..
Use $('#catlist :checkbox:checked') selector to select checked check-boxes
[] is used as attribute selector and it could be used as '[type="checkbox"]' but it will not filter checked check-boxes
+ operator is not needed before parseFloat, it has to be total =+
Instead of calling handler, just invoke change handler using .change()
function calcAndShowTotal() {
var total = 0;
$('#catlist :checkbox:checked').each(function() {
total += parseFloat($(this).attr('price')) || 0;
});
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Using Array#reduce
function calcAndShowTotal() {
var total = [].reduce.call($('#catlist :checkbox:checked'), function(a, b) {
return a + +$(b).attr('price') || 0;
}, 0);
$('#total').val(total);
}
$('#catlist :checkbox').change(calcAndShowTotal).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="catlist">
<input type="checkbox" id="cat_1" value="cat_1" price="1.5" />
<label for="cat_1">cat_1</label>
<br/>
<input type="checkbox" id="cat_2" value="cat_2" price="2" />
<label for="cat_2">cat_2</label>
<br/>
<input type="checkbox" id="cat_3" value="cat_3" price="3.5" />
<label for="cat_3">cat_3</label>
<br/>
<input type="checkbox" id="cat_4" value="cat_4" price="4" />
<label for="cat_4">cat_4</label>
<br/>
<input type="checkbox" id="cat_5" value="cat_5" price="5" />
<label for="cat_5">cat_5</label>
<br/>
<input type="checkbox" id="cat_6" value="cat_6" price="6.5" />
<label for="cat_6">cat_6</label>
<br/>
<input type="checkbox" id="cat_7" value="cat_7" price="7" />
<label for="cat_7">cat_7</label>
<br/>
<input type="checkbox" id="cat_8" value="cat_8" price="8" />
<label for="cat_8">cat_8</label>
<br/>
<input type="checkbox" id="cat_9" value="cat_9" price="9.5" />
<label for="cat_9">cat_9</label>
</div>
<input type="text" id="total" value="0" />
Instead of looping you can use change which will respond to and change event on the checkbox. Also you need add or subtract value like this += for addition on -= for subtraction
var _total = 0;
$('input[type="checkbox"]').change(function() {
if($(this).is(':checked')){
_total += parseFloat($(this).attr('price')) || 0;
}
else{
_total -= parseFloat($(this).attr('price')) || 0;
}
$('#total').val(_total);
})
JSFIDDLE
$('input:checkbox').change(function(){
var totalprice=0;
$('input:checkbox:checked').each(function(){
totalprice+= parseFloat($(this).attr('price'));
});
$('#total').val(totalprice)
});
I have a code already working which calculates the sum of the radio buttons. I changed my mind in one of the radio button group and decided to make it a checkbox. When I tick items on the checkbox, the sum returns NaN. What would I add/change in my jquery in order for it to recognize the checkbox value?
Here's my code:
JQuery
< script type = "text/javascript" >
function calcscore() {
$(".calc:checked").each(function() {
score += parseInt($(this).val(), 10);
});
$('#price').text(score.toFixed(2));
$("input[name=sum]").val(score)
}
$().ready(function() {
$(".calc").change(function() {
calcscore()
});
});
< /script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="radio" name="rad1" id="rad1" />
</label>
<input type="hidden" name="rad1" value="100">
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" id="check1" value="200" />
</label>
<input type="hidden" name="check1" value="200">
</li>
<p>Total: PHP <span id="price">0</span>
</p>
Appreciate all the help.
This code code should answer your question:
function calcscore() {
score = 0;
$(".calc:checked").each(function () {
score += Number($(this).val());
});
$("#price").text(score.toFixed(2));
$("#sum").val(score)
}
$().ready(function () {
$(".calc").change(function () {
calcscore()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="radio" name="rad1" id="rad1" value="100" />
</label>
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" id="check1" value="200" />
</label>
</li>
<input type="hidden" name="sum" id="sum" value="0">
<p>Total: PHP <span id="price">0</span>
</p>
for your markup and usecase as it stands now in the question.try this
$('.calc').on('click', function() {
var sum = 0;
$('.calc:checked').each(function() {
sum += Number($(this).parent().next().val())
})
$('#price').text(sum)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="radio" name="rad1" id="rad1" />
</label>
<input type="hidden" name="rad1" value="100">
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" id="check1" value="200" />
</label>
<input type="hidden" name="check1" value="200">
</li>
<p>Total: PHP <span id="price">0</span>
</p>
try this,you dont need hidden fields for values.i removed them and used value property of checkbox.
$('.calc').on('click', function() {
var sum = 0;
$('.calc:checked').each(function() {
sum += Number($(this).val())
})
$('#price').text(sum)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<li>
<label>
<input class="calc" type="checkbox" name="check1" value="100" id="rad1" />
</label>
</li>
<li>
<label>
<input class="calc" type="checkbox" name="check1" value="200" id="check1" value="200" />
</label>
</li>
<p>Total: PHP <span id="price">0</span>
</p>
Validate the radio button list by adding a for loop???
I cannot figure out how to create a for loop to validate my subscriptions for the HTML radio buttons; Free, Basic, Premium.
Line 39 for JS problem.
Line 128 for HTML reference.
See snippet below:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>javascript form validation</title>
<script type="text/javascript">
function checkme() {
//alert("function fires");
var error = "";
if(document.getElementById('myname').value == "") {
error = "Please enter your name.\n";
}
if(document.getElementById('state').selectedIndex==0) {
error += "Please choose a state.\n";
}
if(document.getElementById('address').value== "") {
error += "Please complete address.\n";
}
if(document.getElementById('city').value== "") {
error += "Please complete city.\n";
}
if(document.getElementById('zip').value== "") {
error += "Please complete address.\n";
}
if(document.getElementById('phone').value== "") {
error += "Please enter phone number.\n";
}
if(document.getElementById('email').value== "") {
error += "Please enter email.\n";
}
if(document.getElementById('comments').value== "") {
error += "Please enter comments.\n";
}
if(!document.getElementById('radio')!=null){
error += "Please select subscription.\n";
// ????
}
if(!document.getElementById('terms')!=null){
error += "Please accept terms.\n";
}
// Do not add logic below this comment
if(error=="") {
return true;
}
else {
alert(error);
return false;
}
}
</script>
<!-- styles for form -->
<style type="text/css">
fieldset {width: 400px;}
/* zero ul and li */
fieldset ul, fieldset li{
border:0; margin:0; padding:0; list-style-type:none;
}
/* li is a block level element. give margin bottom for spacing. */
fieldset li
{
margin-bottom: 10px;
}
/* label is a inline element. convert to inline block to prevent wrapping to next line but still apply width. */
fieldset label{
width:140px;
display: inline-block;
}
/* set radio button labels back to default */
label.radios
{
width:100%;
display: inline;
}
/* take lblnotes out of document flow, aligns to top */
#lblnotes {float: left;}
</style>
</head>
<body>
<fieldset>
<legend>Sign-up Form</legend>
<form id="the_form" name="the_form" action="FormProcessor.html" method="get" onsubmit="return checkme();">
<ul>
<li><label for="myname">Name</label>
<input type="text" name="myname" id="myname" size="30" />
</li>
<li><label for="address">Street Address</label>
<input type="text" name="address" id="address" size="30" />
</li>
<li><label for="city">City</label>
<input type="text" name="city" id="city" size="30" />
</li>
<li><label for="state">State</label>
<select name="state" id="state">
<option value="none">choose a state</option>
<option value="MN">Minnesota</option>
<option value="WI">Wisconsin</option>
</select>
</li>
<li><label for="zip">Zip</label>
<input type="text" name="zip" id="zip" size="30" />
</li>
<li><label for="phone">Phone Number</label>
<input type="text" name="phone" id="phone" size="30" />
</li>
<li><label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</li>
<li><label for="comments" id="lblnotes">Commments</label>
<textarea name="comments" id="comments" cols="20" rows="5"></textarea>
</li>
<li><label>Subscription</label> <label for="free" class="radios">Free</label>
<input type="radio" name="subscription" id="free"/>
<label for="basic" class="radios">Basic</label>
<input type="radio" name="subscription" id="basic"/>
<label for="premium" class="radios">Premium</label>
<input type="radio" name="subscription" id="premium"/>
</li>
<li>
<label for="terms">Do you agree to terms?</label>
<input type="checkbox" name="terms" id="terms"/>
</li>
<li><label for="submit"> </label>
<button type="submit" id="submit">Send</button> </li>
</ul>
</form>
</fieldset>
</body>
</html>
You may use the name of the radio button instead:
var radiobuttons = document.getElementsByName(radioButtonName);
for(var opt in radiobuttons ) {
//validate...
}
Simplest approach would be to set required attribute at input, textarea, select elements
var elems = document.forms["the_form"]
.querySelectorAll("input:not([type=submit]), select, textarea");
for (var i = 0; i < elems.length; i++) {
elems[i].setAttribute("required", true)
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>javascript form validation</title>
<script type="text/javascript">
</script>
<!-- styles for form -->
<style type="text/css">
fieldset {width: 400px;}
/* zero ul and li */
fieldset ul, fieldset li{
border:0; margin:0; padding:0; list-style-type:none;
}
/* li is a block level element. give margin bottom for spacing. */
fieldset li
{
margin-bottom: 10px;
}
/* label is a inline element. convert to inline block to prevent wrapping to next line but still apply width. */
fieldset label{
width:140px;
display: inline-block;
}
/* set radio button labels back to default */
label.radios
{
width:100%;
display: inline;
}
/* take lblnotes out of document flow, aligns to top */
#lblnotes {float: left;}
</style>
</head>
<body>
<fieldset>
<legend>Sign-up Form</legend>
<form id="the_form" name="the_form" action="FormProcessor.html" method="get" onsubmit="return checkme();">
<ul>
<li><label for="myname">Name</label>
<input type="text" name="myname" id="myname" size="30" />
</li>
<li><label for="address">Street Address</label>
<input type="text" name="address" id="address" size="30" />
</li>
<li><label for="city">City</label>
<input type="text" name="city" id="city" size="30" />
</li>
<li><label for="state">State</label>
<select name="state" id="state">
<option value="none">choose a state</option>
<option value="MN">Minnesota</option>
<option value="WI">Wisconsin</option>
</select>
</li>
<li><label for="zip">Zip</label>
<input type="text" name="zip" id="zip" size="30" />
</li>
<li><label for="phone">Phone Number</label>
<input type="text" name="phone" id="phone" size="30" />
</li>
<li><label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</li>
<li><label for="comments" id="lblnotes">Commments</label>
<textarea name="comments" id="comments" cols="20" rows="5"></textarea>
</li>
<li><label>Subscription</label> <label for="free" class="radios">Free</label>
<input type="radio" name="subscription" id="free"/>
<label for="basic" class="radios">Basic</label>
<input type="radio" name="subscription" id="basic"/>
<label for="premium" class="radios">Premium</label>
<input type="radio" name="subscription" id="premium"/>
</li>
<li>
<label for="terms">Do you agree to terms?</label>
<input type="checkbox" name="terms" id="terms"/>
</li>
<li><label for="submit"> </label>
<button type="submit" id="submit">Send</button> </li>
</ul>
</form>
</fieldset>
</body>
</html>
You can iterate over the radio buttons with the name subscriptions to find which if any is checked. Check the sample here (getRadioVal function): http://www.dyn-web.com/tutorials/forms/radio/get-selected.php
Updated
i has code ex:
<ul>
<li class="menu-0">
<input class="id" type="text" value="1"/>
</li>
<li class="menu-0">
<input class="id" type="text" value="2"/>
</li>
<li class="menu-0">
<input class="parent_id" type="text" value="2"/>
</li>
<li class="menu-0">
<input class="parent_id" type="text" value="2"/>
</li>
<li class="menu-0">
<input class="id" type="text" value="3"/>
</li>
</ul>
so i want addClass parent-0 to li with condition this li children input class id val() = this li next() children input class parent_id val().
it like
<ul>
<li class="menu-0">
<input class="id" type="text" value="1"/>
</li>
<li class="menu-0 parent-0">
<input class="id" type="text" value="2"/>
</li>
<li class="menu-0 children-parent-0">
<input class="parent_id" type="text" value="2"/>
</li>
<li class="menu-0 children-parent-0">
<input class="parent_id" type="text" value="2"/>
</li>
<li class="menu-0 ">
<input class="id" type="text" value="3"/>
</li>
</ul>
how to made it. thanks :]
Try this code:
$('.menu-0').each(function(){
if($(this).children('input').val() == '2')
{
$(this).addClass('parent-0');
}
});
Or more generic:
$('li').each(function(){
var num = $(this).attr('class').split('-').reverse();
if($(this).children('input').val() == '2')
{
$(this).addClass('parent-'+num[0]);
}
});
I made a form in html and want the user to be able to press submit when some fields are filled. So my button is disabled in the beginning, but for some reason my button doesn't become clickable when things are filled.
This is the form in my html:
<fieldset>
<legend>U gegevens</legend>
<form name="signup" action="index.html" method="post">
<ul>
<li> <label>Naam</label>
<input type="text" name="name" size="30" />
</li>
<li> <label>Voornaam</label>
<input type="text" name="voornaam" size="30" />
</li>
<li> <label>Adress</label>
<input type="text" name="adress" size="30" />
</li>
<li> <label>Gemeente</label>
<input type="text" name="gemeente" size="30" />
</li>
<li> <label>Postcode</label>
<input type="text" name="postcode" size="30" />
</li>
<li>
<p>Ik wens een alternatief facturatieadres <input type="checkbox" id="be1"onclick="if(this.checked){displayFac()}"></p>
</li>
<li style="display:none;" id="fac1"> <label >Adress</label>
<input type="text" size="30" />
</li>
<li style="display:none;" id="fac2"> <label >Gemeente</label>
<input type="text" size="30" />
</li>
<li style="display:none;" id="fac3"> <label>Postcode</label>
<input type="text" size="30" />
</li>
<li>
<p>Ik wens een alternatief leveringsadress <input type="checkbox" id="be2" onclick="if(this.checked){displayLe()}"></p>
</li>
<li style="display:none;" id="le1"> <label >Adress</label>
<input type="text" size="30" />
</li>
<li style="display:none;" id="le2"> <label>Gemeente</label>
<input type="text" size="30" />
</li>
<li style="display:none;" id="le3" > <label>Postcode</label>
<input type="text" size="30" />
</li>
<li><label for="submit"></label>
<button type="submit" id="submit" disabled>Verzenden</button>
</li>
</ul>
</form>
</fieldset>
And this is the javascript i use to check if there is something filled:
function validateForm()
{
while (true){
var a=document.forms["signup"]["name"].value;
var b=document.forms["signup"]["voornaam"].value;
var c=document.forms["signup"]["adress"].value;
var d=document.forms["signup"]["gemeente"].value;
var e=document.forms["signup"]["postcode"].value;
if (a!=null && a!="" && b !=null && b!="" && c!=null && c!= "" && d!=null && d!="" && e!=null && e!="")
{
document.getElementById("submit").disabled=false;
}
}
}
Thanks in advance!
Remove the while loop from validateForms() function and call it on every inputs onblur event and also if the checkbox checked. hope this helps.
try this:
function validateForm()
{
var a=document.forms["signup"]["name"].value;
var b=document.forms["signup"]["voornaam"].value;
var c=document.forms["signup"]["adress"].value;
var d=document.forms["signup"]["gemeente"].value;
var e=document.forms["signup"]["postcode"].value;
if ( a!="" && b!="" && c!= "" && d!="" && e!="")
{
document.getElementById("submit").disabled=false;
}
}