I am facing an issue where my checkboxes seem irrelevant. When processing my form text shows up for unchecked boxes. I want the end result to only show the ticked boxes. There is too much information showing in my results.
Or would it be easier to ditch checkboxes and use a drop list, if so how would I be able to assign the price to each drop box item? Checkboxes was my alternative to this idea and I seem to still be having trouble
Thanks in advance
Here is my html:
<html>
<head>
<title>Movie Ticket Prices</title>
<!-- script src="movie.js" type="text/javascript"></script -->
<script src="movie.js" type="text/javascript"></script>
<noscript>Your browser does not support JavaScript!</noscript>
</head>
<body>
<form name="form1">
<div> Choose a movie:
<select name="movie" id="movie">
<option value="Never say never">Never say never</option>
<option value="Hop">Hop</option>
<option value="Rio">Rio</option>
</select>
</div>
<div> Choose a Day:
<select name="day" id="day">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
</select>
</div>
<div>
Name: <input type="text" name="textbox" id="textbox" value="" />
</div>
<div>
<label> <input type="checkbox" id="CAtickets" value="10" checked />Child tickets: </label>
How many: <input type="text" id="CA" value="0" size="3" />
<br>
<label> <input type="checkbox" id="SAtickets" value="20" checked />Adult tickets: </label>
How many: <input type="text" id="SA" value="0" size="3" />
<br>
<label> <input type="checkbox" id="SPtickets" value="18" checked />Concession tickets: </label>
How many: <input type="text" id="SP" value="0" size="3" />
<br>
<label> <input type="checkbox" id="FAtickets" value="30" checked />First Class Adult tickets: </label>
How many: <input type="text" id="FA" value="0" size="3" />
<br>
<label> <input type="checkbox" id="FCtickets" value="20" checked />First Class Child tickets: </label>
How many: <input type="text" id="FC" value="0" size="3" />
<br>
<label> <input type="checkbox" id="B1tickets" value="20" checked />Beanbag 1 Person tickets: </label>
How many: <input type="text" id="B1" value="0" size="3" />
<br>
<label> <input type="checkbox" id="B2tickets" value="25" checked />Beanbag 2 person tickets: </label>
How many: <input type="text" id="B2" value="0" size="3" />
<br>
<label> <input type="checkbox" id="B3tickets" value="30" checked />Beanbag 3 person tickets: </label>
How many: <input type="text" id="B3" value="0" size="3" />
<br>
<p><input type="button" value="Purchase" onclick="printPrice()" />
</div>
</form>
<div id="inserts"> </div>
Here is my javascript:
function printPrice() {
var movie = document.getElementById("movie").value;
var day = document.getElementById("day").value;
var name = document.getElementById("textbox").value;
var CA = document.getElementById("CA").value * 1;
var SA = document.getElementById("SP").value * 1;
var SP = document.getElementById("SP").value * 1;
var FA = document.getElementById("FA").value * 1;
var FC = document.getElementById("FC").value * 1;
var B1 = document.getElementById("B1").value * 1;
var B2 = document.getElementById("B2").value * 1;
var B3 = document.getElementById("B3").value * 1;
var total = 0;
var sentence = "";
var price = document.getElementById('CAtickets').value * CA;
sentence += name + "<br>purchased "+CA+" Child ticket(s) to \"";
sentence += day +'<br>';
sentence += movie + "\" for $";
sentence += price;
total += price;
price = document.getElementById('SAtickets').value * SA;
sentence += "<br>and "+SA+" Adult ticket(s) to \"";
sentence += day +'<br>';
sentence += movie + "\" for $";
sentence += price +'<br>';
total += price;
price = document.getElementById('SPtickets').value * SP;
sentence += "<br>and "+SP+" Concession ticket(s) to \"";
sentence += day +'<br>';
sentence += movie + "\" for $";
sentence += price +'<br>';
total += price;
price = document.getElementById('FAtickets').value * FA;
sentence += "<br>and "+FA+" First Class Adult ticket(s) to \"";
sentence += day +'<br>';
sentence += movie + "\" for $";
sentence += price +'<br>';
total += price;
price = document.getElementById('FCtickets').value * FC;
sentence += "<br>and "+FC+" First Class Child ticket(s) to \"";
sentence += day +'<br>';
sentence += movie + "\" for $";
sentence += price +'<br>';
total += price;
price = document.getElementById('B1tickets').value * B1;
sentence += "<br>and "+B1+" Beanbag 1 to \"";
sentence += day +'<br>';
sentence += movie + "\" for $";
sentence += price +'<br>';
total += price;
price = document.getElementById('B2tickets').value * B2;
sentence += "<br>and "+B2+" Beanbag 2 to \"";
sentence += day +'<br>';
sentence += movie + "\" for $";
sentence += price +'<br>';
total += price;
price = document.getElementById('B3tickets').value * B3;
sentence += "<br>and "+B3+" Beanbag 3 to \"";
sentence += day +'<br>';
sentence += movie + "\" for $";
sentence += price +'<br>';
total += price;
sentence += "<br>";
sentence += 'Total cost: $'+total;
document.getElementById("inserts").innerHTML=sentence;
}
Aucun commentaire:
Enregistrer un commentaire