Javascript form output

[mands]

Hi guys

Im having a bit of trouble with my form,

I basically want the values from the checkboxes to output to a div, I also want to give the check boxes a numerical value eg:

if monday conference selected that would cost £80
if Tuesday conference selected theat would cost £60

and output a total based on the selections.

its basically confirming the users choices and outputting the total cost to them.

I have made a start already but Ive hit a point where Im absolutely stuck.

Thanks in advance for any help offered xxx

Mands

This is the form

<div class="form">
<h1>Online Bookings</h1>

<form id ="theForm" action="mailto:" method="post" enctype="text/plain" ><table>
<tr><td>
<tr><td>Name:</td><td><input type="text" name="input" id="name" size="50" /></td></tr>
<tr><td>Email Address:</td><td><input size="30" id="txtEmail" name="input" type="text"  /></td></tr>
<tr><td>Tel:</td><td><input size="30" id="txtNumber" name="input" type="text"  /></td></tr></table>
<table>
<tr><td><strong> Conference Attendance</strong></td></tr>

<tr>
<td>Monday</td><td><input type="checkbox" name="conferenceatt" id="confsun" value="I will be attending Monday" /></td></tr><tr>
<td>Tuesday<td><input type="checkbox" name="conferenceatt" id="confmon" value="I will be attending Tuesday" /> </td></tr><tr>
<td>Wednesday<td><input type="checkbox" name="conferenceatt" id="conftue" value="I will be attending Wednesday" /> </td></tr><tr>
<td>Thursday<td><input type="checkbox" name="conferenceatt"  id="confwed" value="I will be attending Thursday" /></td></tr><tr>
<td>Friday<td><input type="checkbox" name="conferenceatt" id="confthur" value="I will be attending Friday" /> </td></tr></table>
<table>
<tr><td><strong>College Accommodation</strong> </td></tr>
<tr>
<td>Sunday Evening</td><td><input type="checkbox" id="collsun" name="Sunday Accommodation" value="Sunday accommodation required" /></td></tr><tr>
<td>Monday Evening</td><td><input type="checkbox" id="collmon" name="Monday Accommodation" value="Monday accommodation required" /></td></tr><tr>
<td>Tuesday Evening</td><td><input type="checkbox" id="colltue" name="Tuesday Accommodation" value="Tuesday accommodation required" /></td></tr><tr>
<td>Wednesday Evening</td><td><input type="checkbox" id="collwed" name="Wednesday Accommodation" value="Wednesday accommodation required" /></td></tr><tr>
<td>Thursday Evening</td><td><input type="checkbox" id="collthur" name="Thursday Accommodation" value="Thursday accommodation required" /></td></tr> </table>

<input type="button" id="write" value="Write" />
<input type="button" id="erase" value="Erase" />

</form>


</div>
<div class="righttext" id="righttext">

</div>

and this is the javascript

window.onload = function(){
	//get the elements we need
	var write = document.getElementById('write');
	var erase = document.getElementById('erase');
	var display = document.getElementById('righttext');
	var name = document.getElementById('name');
	var email = document.getElementById('txtEmail');
	var number = document.getElementById('txtNumber');
	var confs = document.getElementById('confsun');
	var confm = document.getElementById('confmon');
	var conft = document.getElementById('conftue');
	var confw = document.getElementById('confwed');
	var confth = document.getElementById('confthur');
	var colls = document.getElementById('collsun');
	var collm = document.getElementById('collmon');
	var collt = document.getElementById('colltue');
	var collw = document.getElementById('collwed');
	var collth = document.getElementById('collthur');

	//assign the onclick events with their handler functions

	write.onclick = function(){
		var message = '<strong>' + 'You requirements are:' + '</strong>' + '' + 'Name: ' + name.value + '' + 'Email: ' + email.value + '' + 'Tel: ' + number.value ;

		display.innerHTML = message;
		
	};
	


	erase.onclick = function() {
		display.innerHTML = "";
		//clear the form field
		display.value="";
	};

}; //end of window.onload

[gumape]

You can retrieve the state of a checkbox with the checked property:

write.onclick = function() {
			// calculate total
		var total = 0;
		if (confs.checked) {
			total += 100;
		}
		if (confm.checked) {
			total += 80;
		}
			// and so on

		var message = '<strong>' + 'You requirements are:' + '</strong>' + '' +
			'Name: ' + name.value + '' + 
			'Email: ' + email.value + '' + 
			'Tel: ' + number.value + '' + 
			'Total:' + total + '£';

		display.innerHTML = message;
	};

[Taywin]

var write = document.getElementById('write');
	var erase = document.getElementById('erase');
	var display = document.getElementById('righttext');
	var name = document.getElementById('name');
	var email = document.getElementById('txtEmail');
	var number = document.getElementById('txtNumber');
	var confs = document.getElementById('confsun');
	var confm = document.getElementById('confmon');
	var conft = document.getElementById('conftue');
	var confw = document.getElementById('confwed');
	var confth = document.getElementById('confthur');
	var colls = document.getElementById('collsun');
	var collm = document.getElementById('collmon');
	var collt = document.getElementById('colltue');
	var collw = document.getElementById('collwed');
	var collth = document.getElementById('collthur');

Are you sure that these variables will be objects instead of null values? The reason is that you are attempting to obtain all of these variables 'onload' while these elements may or may not be loaded yet? Maybe I am wrong...

[mands]

Thanks gumape!!

Wow thats just what I needed but couldnt see for looking!!!

Very happy I can now amend the rest to suit my needs based on what youve given me!!

Much appreciated

Mands xxx

[Dokemion]

Java is a popular high language computer language that is used all over the world. Even if you are knowledgeable on languages like C and C++, you can undergo java training to make your resume shine in the next interview you appear for.