...

View Full Version : Conditional HTML Form Fields Help



jughead47
09-27-2011, 07:11 PM
This is what I'm trying to do.

CONDITIONS:
If a person selects a Friday Class but not a Saturday Class the Total Cost Field will automatically enter $99.

If a person selects a Saturday Class but not a Friday Class the Total Cost Field will automatically enter $99 as well.

If a person selects both a Friday & Saturday Class the Total Cost field will automatically be $159.

I found the following code and so far only have it changing when a Friday class is entered. I have no idea where to go from here. Please help.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

</head>
<body>

<div>
<p><span class="style1">Friday Class:</span>
<select id="fridayClass" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p> <span class="style1">Saturday Class:</span>
<select id="saturdayClass" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
</div>
<div><span class="style1">Total Cost:</span>
<input type="text" id="totalCost"/></div>

<script>
window.onload = function () {
var friday = document.getElementById('fridayClass'),
saturday = document.getElementById('saturdayClass');

friday.onchange = function () {
totalCost.value = '$99.00';
};
};
</script>

xelawho
09-27-2011, 07:24 PM
hmmm...

smells like homework.

the first thing you should do is get the firebug extension for firefox - it will tell you your basic mistakes, like how you are trying to update the value in your text box.

the next thing you should do is look at how changing the selection in the friday list updates the value displayed, and I guess replicate that somehow.

and then maybe you should think about how to fulfill the requirements of your assignment and if you get stuck on something specific, post back.

ironboy
09-27-2011, 07:37 PM
Try:

window.onload = function () {
var $ = function(x){return document.getElementById(x)},
friday = $('fridayClass'),
saturday = $('saturdayClass'),
totalCost = $('totalCost');
friday.onchange = saturday.onchange = function () {
totalCost.value = '$' + [0,99,159][1*(friday.selectedIndex > 0) + 1*(saturday.selectedIndex > 0)] + '.00';
};
};

jughead47
09-27-2011, 09:08 PM
Thank you Iron Boy! That worked great!! Now to study it and see how it works.

Sorry xelawho, not homework, just a graphic designer getting more familiar with web design and coding needing major help with javascript.

xelawho
09-27-2011, 09:30 PM
glad you got it working. and if you are trying to learn, the first two pieces of advice still apply...

jughead47
09-28-2011, 04:30 PM
OK, I've implemented two separate automatic calculations for multiple attendees and have that working. Is it possible to add the two total costs for each attendee into another field? I've been trying some different calculation java scripts I found online but can't get them working. I'm guessing it has something to do with the fact that the two fields I want to add are dynamic? Any help is appreciated.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

</head>
<body>
<div>
<div>
<form name="form">
<p><span class="style1">Friday Class:</span>
<select id="fridayClass" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p> <span class="style1">Saturday Class:</span>
<select id="saturdayClass" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>

<div><span class="style1"> Cost For Attendee 1:</span>
<input type="text" name="sum1" id="totalCost" size="10" readonly="readonly" style="background-color:#E0E0E0; font-weight:bold;" /></div>


<br />
<br />

<div>
<div>
<p><span class="style1">Friday Class:</span>
<select id="fridayClass2" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p> <span class="style1">Saturday Class:</span>
<select id="saturdayClass2" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
</div>
<div><span class="style1"> Cost For Attendee 2:</span>
<input type="text" name="sum2" id="totalCost2" size="10" readonly="readonly" style="background-color:#E0E0E0; font-weight:bold;"/></div>

<div><span class="style1"> <br />
<br />
TOTAL COST:</span>
<input type="text" name="sum" id="totalCostAll"/>
<br />
<br />
<br />
</div>

<script>
window.onload = function () {
var $ = function(x){return document.getElementById(x)},
friday = $('fridayClass'),
saturday = $('saturdayClass'),
totalCost = $('totalCost');
friday.onchange = saturday.onchange = function () {
totalCost.value = '$' + [0,99,159][1*(friday.selectedIndex > 0) + 1*(saturday.selectedIndex > 0)] + '.00';
};
fridayTwo = $('fridayClass2'),
saturdayTwo = $('saturdayClass2'),
totalCostTwo = $('totalCost2');
fridayTwo.onchange = saturdayTwo.onchange = function () {
totalCostTwo.value = '$' + [0,99,159][1*(fridayTwo.selectedIndex > 0) + 1*(saturdayTwo.selectedIndex > 0)] + '.00';
};

totalCostAll = $('totalCostAll');
totalCostAll.value = '$' + (totalCost.value * 1) + (totalCostTwo.value * 1) + '.00';
};
</script>
</form>
</div>
</body>
</html>

ironboy
09-28-2011, 05:05 PM
Here you go:

window.onload = function () {
// Variable declarations and a $-alias for document.getElementById;
var $ = function(x){return document.getElementById(x)},
friday = $('fridayClass'),
saturday = $('saturdayClass'),
totalCost = $('totalCost'),
fridayTwo = $('fridayClass2'),
saturdayTwo = $('saturdayClass2'),
totalCostTwo = $('totalCost2'),
totalCostAll = $('totalCostAll');

// Onchange events for select elements
friday.onchange = saturday.onchange = function () {
totalCost.value = '$' + [0,99,159][1*(friday.selectedIndex > 0) + 1*(saturday.selectedIndex > 0)] + '.00';
calcTotal();
};
fridayTwo.onchange = saturdayTwo.onchange = function () {
totalCostTwo.value = '$' + [0,99,159][1*(fridayTwo.selectedIndex > 0) + 1*(saturdayTwo.selectedIndex > 0)] + '.00';
calcTotal();
};

// A function to calculate the total
var calcTotal = function(){
totalCostAll.value = '$'
+ (totalCost.value.split('$').join('')/1 + totalCostTwo.value.split('$').join('')/1)
+ '.00';
}
};

B.t.w. shouldn't you make the "totalCostAll" field read only :rolleyes:

jughead47
09-28-2011, 06:32 PM
Thank you!

jughead47
09-29-2011, 03:40 PM
ironboy one more requests. This should be the last one! We're wanting to add a third day and multiple classes now.

CONDITIONS:
If a person selects one or multiple Friday Classes OR one or multiple Saturday Classes the cost is $99. (One Day Package $99)
If a person selects one or multiple Friday Classes AND one or multiple Saturday Class the cost is $159. (Two Day Package $159)
If a person then adds a Sunday class we add $39 to the total. (Add Sunday $39)

(EXAMPLES: two Friday classes and a Sunday class would total $138; Two Friday Classes, One Saturday, and Sunday Class would be $198)

I'm getting nowhere with my coding tries today.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />



</head>
<body>
<div>
<div>
<form name="form">
<p><span class="style1">Friday Class:</span>
<select id="fridayClass1-1" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p><span class="style1">Friday Class:</span>
<select id="fridayClass1-2" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p> <span class="style1">Saturday Class:</span>
<select id="saturdayClass1-1" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p><span class="style1">Saturday Class:</span>
<select id="saturdayClass1-2" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p> <span class="style1">Sunday Class:</span>
<select id="sundayClass1" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>

<div><span class="style1"> Cost For Attendee 1:</span>
<input type="text" id="totalCost1" size="10" readonly="readonly" style="background-color:#E0E0E0; font-weight:bold;" /></div>


<br />
<br />

<div>
<div>
<p><span class="style1">Friday Class:</span>
<select id="fridayClass2-1" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p><span class="style1">Friday Class:</span>
<select id="fridayClass2-2" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p> <span class="style1">Saturday Class:</span>
<select id="saturdayClass2-1" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p><span class="style1">Saturday Class:</span>
<select id="saturdayClass2-2" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p> <span class="style1">Sunday Class:</span>
<select id="sundayClass2" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
</div>
<div><span class="style1"> Cost For Attendee 2:</span>
<input type="text" id="totalCost2" size="10" readonly="readonly" style="background-color:#E0E0E0; font-weight:bold;"/></div>

<div><span class="style1"> <br />
<br />
TOTAL COST:</span>
<input type="text" id="totalCostAll" size="10" readonly="readonly" style="background-color:#E0E0E0; font-weight:bold;"/>
<br />
<br />
<br />
</div>

<script>
window.onload = function () {
// Variable declarations and a $-alias for document.getElementById;
var $ = function(x){return document.getElementById(x)},
fridayOneOne = $('fridayClass1-1'),
fridayOneTwo = $('fridayClass1-2'),
saturdayOneOne = $('saturdayClass1-1'),
saturdayOneTwo = $('saturdayClass1-2'),
sundayOne = $('sundayClass1-2'),
totalCostOne = $('totalCost1'),

fridayTwoOne = $('fridayClass2-1'),
fridayTwoTwo = $('fridayClass2-2'),
saturdayTwoOne = $('saturdayClass2-1'),
saturdayTwoTwo = $('saturdayClass2-2'),
sundayTwo = $('sundayClass2'),
totalCostTwo = $('totalCost2'),

totalCostAll = $('totalCostAll');

// Onchange events for select elements
fridayOneOne.onchange = fridayOneTwo.onchange = saturdayOneOne.onchange = function () {
totalCostOne.value = '$' + [0,99,99,159][1*(fridayOneOne.selectedIndex > 0) + 1*(fridayOneTwo.selectedIndex > 0) + 1*(saturdayOneOne.selectedIndex > 0)] + '.00';
calcTotal();
};
fridayTwoOne.onchange = saturdayTwoOne.onchange = function () {
totalCostTwo.value = '$' + [0,99,159][1*(fridayTwoOne.selectedIndex > 0) + 1*(saturdayTwoOne.selectedIndex > 0)] + '.00';
calcTotal();
};

// A function to calculate the total
var calcTotal = function(){
totalCostAll.value = '$'
+ (totalCostOne.value.split('$').join('')/1 + totalCostTwo.value.split('$').join('')/1)
+ '.00';
}
};
</script>
</form>
</div>


</body>
</html>

ironboy
09-29-2011, 11:49 PM
This is the last one ;-)
I've rewritten your code, since it was ill suited for expanding on.
Your rules are a bit unclear to me --> if only Sunday --> 99 ?
However the new rules section in the code should be easy to understand...



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css">
* {margin:0;padding:0;font:13px/130% Verdana, Geneva, sans-serif}
body {margin:20px}
p {padding-bottom:12px}
p.extra {padding-bottom:36px}
label {display:inline-block;width:200px}
select {width:150px}
input.cost {background-color:#E0E0E0; font-weight:bold; width:146px;text-align:right}
</style>
<script type="text/javascript">
onload = function(){

var formatPrice = function(x){
x = (x + .0001) + '';
x = '$' + x.substring(0,x.lastIndexOf('.')+3);
return x
};

var createHTMLandEventHandlers = function(){
// data
var attendees = ['Attendee 1','Attendee 2'];
var selects = ['Friday class*1','Friday class*2','Saturday class*1','Saturday class*2','Sunday class'];
var options = ['','Class 1','Class 2','Class 3'];
// create html
var html = ['<form action="" id="regForm">'];
for(var i = 0 ; i < attendees.length; i++){
for(var j = 0 ; j < selects.length; j++){
html.push('<p><label>' + selects[j].match(/[^\*]*/)[0]
+ ':</label> <select name="' + (attendees[i] + '_' + selects[j]).replace(/\W/g,'') + '">');
for(var k = 0 ; k < options.length; k++){
html.push('<option value="' + options[k] + '">' + options[k] + '</option>');
};
html.push('</select></p>');
};
html.push('<p class="extra"><label>Cost for ' + attendees[i]
+ ':</label><input class="cost" name="' + attendees[i].replace(/\W/g,'')
+ '_cost" type="text" readonly="readonly">');
};
html.push('<p class="extra"><label>TOTAL COST:</label>'
+ '<input class="cost" name="totalCost" type="text" readonly="readonly"></form>');
document.body.innerHTML = html.join('');
// assign event handers to select elements
var sels = document.getElementById('regForm').getElementsByTagName('select');
for(var i = 0; i < sels.length;i++){
sels[i].onchange = function(){calculatePrice(sels)};
};
calculatePrice(sels);
};

var calculatePrice = function(sels){
// collect data about chosen days for all attendees
var days = {Friday:0,Saturday:0,Sunday:0};
var attendees = {}, alabel;
for(var i = 0; i < sels.length; i++){
for(var j in days){
alabel = sels[i].name.split('_')[0];
attendees[alabel] = attendees[alabel] || {};
attendees[alabel][j] = attendees[alabel][j] || 0;
// only add to a day if it is 0, since same price for one or two classes a day
if(sels[i].name.indexOf(j) >= 0 && sels[i].value && attendees[alabel][j] == 0){
attendees[alabel][j]++
}
}
};
// calculate cost and write to form
var f = document.forms.regForm, total = 0;
for(var i in attendees){
// for each attendee
var a = attendees[i];
a.sum = 0;
// rules - pricing for one attendee (each day is either 0 or 1)
a.Friday + a.Saturday + a.Sunday == 1 && (a.sum = 99);
a.Friday + a.Saturday == 2 && (a.sum = 159);
a.Friday + a.Saturday + a.Sunday == 2 && a.Sunday == 1 && (a.sum = 99 + 39);
a.Friday + a.Saturday + a.Sunday == 3 && (a.sum = 159 + 39);
// -- end rules
total += a.sum;
f[i+'_cost'].value = formatPrice(a.sum);
};
f.totalCost.value = formatPrice(total);
};

createHTMLandEventHandlers();
};

</script>
</head>
<body>
</body>
</html>

jughead47
09-30-2011, 01:29 PM
The form is gone. I see how your pushing the html out. But is it possible to do with regular html field inputs like we were previously. The way it is written now, I can't have different classes on different days.

Thank you for all your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum