Forum Moderators: open
1 participant - 140.40 euros
2 participants - 206.40 euros
3 participants - 272.40 euros
4 participants - 338.40 euros
Is there a way to make the total price appear on a text box below the drop down menu, visible before sending the form to the server? I believe some sort of JS may be of help, but after a couple of hours of search on the net, I'm still looking for a solution.
Another "plus" will be a function tied to the same drop-menu selection that would make appear additional fields related to the additional participants - i.e. selecting 2 participants, a series of 4 additional fields would appear below the main section.
Any help would be greatly appreciated
<script type="text/javascript">
function setNumParticipants( inputId, outputId )
{
var p = document.getElementById( inputId );
var t = document.getElementById( outputId );
if(!p ) return;
if(!t ) return;
switch (p.value)
{
case "1":
// Set total value:
t.value = "140.40";
// Add your function to show/hide other inputs here
break;
case "2":
t.value = "206.40";
// Add your function to show/hide other inputs here
break;
case "3":
t.value = "272.40";
// Add your function to show/hide other inputs here
break;
case "4":
t.value = "338.40";
// Add your function to show/hide other inputs here
break;
}
}
</script>
<select name="numParticipants" onchange="setNumParticipants('numParticipants','total');">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Total: <input type="text" name="total" id="total" readonly="readonly">
There are many possible solutions, but this should get you started.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple Calculator</title>
</head>
<body>
<ul>
<li>1 participant - 140.40 euros</li>
<li>2 participants - 206.40 euros</li>
<li>3 participants - 272.40 euros</li>
<li>4 participants - 338.40 euros</li>
</ul>
<form method="post" action="You_will_still_need_recalculation_server_side.cgi" name="calc" id="calc" onSubmit="return false;">
<p>Select the number of participants and continue.</p>
<select name="num" id="num" onChange="calcForm(this.form);">
<option value="0">Please Select</option>
<option value="1">1 - 140.40 euros</option>
<option value="2">2 - 206.40 euros</option>
<option value="3">3 - 272.40 euros</option>
<option value="4">4 - 338.40 euros</option>
</select>
Total: <strong>$</strong> <input type="text" name="total" id="total" size="6" value="0.00" onfocus="blur();">
<input type="submit" name="submitButton" id="submitButton" onClick="calcForm(this.form,1);" value="Continue >>">
</form>
<script type="text/javascript">
function calcForm(form,submit_it) {
// By making the first element 0, this associates the list precisely with the select list.
// To maintain all you need to do is change this array.
var prices = new Array('0.00','140.40','206.40','272.40','338.40');
var sel = document.getElementById('num'); // The list
var ind = sel.selectedIndex; // What's selected
var total = document.getElementById('total');
total.value = prices[sel[ind].value]; // the correlating value from the array
if (ind == 0) { return; }
if (submit_it) { form.submit(); }
}
</script>
</body>
</html>
Seriously I wouldn't do that for one reason only: what if Javascript is disabled? Your visitor will have no way to access the dynamic content. But there are many methods, among them having the fields in hidden divs
<div id="hidden1"><label for="field1">Field 1</label> <input type="text" name="field1"></div>
And making them visible or not as required. Or, have an empty div and write to it using document.write(). I haven't experimented with these for the reason I mentioned, but it can be done.
