submit, onclick and a world of confusion - HTML Forums

DJ_Markstar · 10-27-2009, 11:37 PM

Hi there guys, I'm a newb to forms in Dreamweaver, so any help will be appreciated.

I would like a form on my DJ website that asks the potential customer how many hours they want a disco for, their location and any extras they want to have with the package. The form will then calculate the value of everything and give them a price.

I would like to display this answer only after the visitor clicks on a button, rather than just have the information pop up/recalculate every time the visitor changes something on the form.

Thanks guys!

Vege · 10-28-2009, 04:41 AM

Make the form as you would like it to be.
Then show us that form and we can give you an example how you would do your calculations.

DJ_Markstar · 10-28-2009, 09:36 AM

OK, so the Form uses this code atm

Quote:

<!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>Untitled Document</title>
<script language='JavaScript' type='text/javascript' src='JScript/CalculatedField.js'></script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<p>
<label>Hours of Party
<select name="Hours" id="Hours">
<option>Please Select...</option>
<option value="225">4</option>
<option value="250">5</option>
<option value="300">6</option>
<option value="350">7</option>
</select>
</label>
</p>
<p>
<label>Where are you located?
<select name="Location" id="Location">
<option value="0">Essex</option>
<option value="25">Kent</option>
<option value="50">London</option>
<option value="25">Surrey</option>
</select>
</label>
</p>
<p>
<label>How would you like to customize your disco?
<select name="Extras" id="Extras">
<option value="20">Glowsticks</option>
<option value="50">Dancefloor</option>
</select>
</label>
</p>
<p>
<label>
<input type="button" name="CalculateButton" id="CalculateButton" value="Calculate!" />
</label>
<label>
<input name="displayAnswer" type="text" id="displayAnswer" readonly="readonly" />
</label>
</p>
</form>
<script>
function calcField_form1(){
CalcField.addEquation('form1', 'displayAnswer=Hours+Location+Extras');
}
calcField_form1();
</script>
</body>
</html>

Vege · 10-28-2009, 10:31 AM

Should work but don't have IE in hand to fully test it, works in FF and should be crossbrowser compatible.

HTML Code:

<!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>Untitled Document</title>



<script>
window.onload=function(){



  document.getElementById('CalculateButton').onclick = function()
  {
    var hours = document.getElementById('Hours');
    var location = document.getElementById('Location');
    var extras = document.getElementById('Extras');
    var displayAnswer = document.getElementById('displayAnswer');
    
    
    var selectedhour = hours[hours.selectedIndex].value;
    var selectedlocation = location[location.selectedIndex].value;
    var selectedextras = extras[extras.selectedIndex].value;
    displayAnswer.value = selectedhour+selectedlocation+selectedextras;
    
    
  }
}
</script>


</head>

<body>
<form id="form1" name="form1" method="post" action="">
<p>
<label>Hours of Party
<select name="Hours" id="Hours">
<option value="0">Please Select...</option>
<option value="225">4</option>
<option value="250">5</option>
<option value="300">6</option>
<option value="350">7</option>
</select>
</label>
</p>
<p>
<label>Where are you located?
<select name="Location" id="Location">
<option value="0">Essex</option>
<option value="25">Kent</option>
<option value="50">London</option>
<option value="25">Surrey</option>
</select>
</label>
</p>
<p>
<label>How would you like to customize your disco?
<select name="Extras" id="Extras">
<option value="20">Glowsticks</option>
<option value="50">Dancefloor</option>
</select>
</label>
</p>
<p>
<label>
<input type="button" name="CalculateButton" id="CalculateButton" value="Calculate!" />
</label>
<label>
<input name="displayAnswer" type="text" id="displayAnswer" readonly="readonly" />
</label>
</p>
</form>

</body>
</html>

phatbass · 10-28-2009, 10:45 AM

I guess I'm a bit too late with the solution

...but here it is anyways. It is simpler than Vege's and probably not as clean, but gets the job done. I tried both IE and FF

Code:

<!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>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<p>
<label>Hours of Party
<select name="Hours" id="Hours">
<option>Please Select...</option>
<option value="225">4</option>
<option value="250">5</option>
<option value="300">6</option>
<option value="350">7</option>
</select>
</label>
</p>
<p>
<label>Where are you located?
<select name="Location" id="Location">
<option value="0">Essex</option>
<option value="25">Kent</option>
<option value="50">London</option>
<option value="25">Surrey</option>
</select>
</label>
</p>
<p>
<label>How would you like to customize your disco?
<select name="Extras" id="Extras">
<option value="20">Glowsticks</option>
<option value="50">Dancefloor</option>
</select>
</label>
</p>
<p>
<label>
<input type="button" name="CalculateButton" id="CalculateButton" value="Calculate!" onClick="calcField_form1();"/>
</label>
<label>
<input name="displayAnswer" type="text" id="displayAnswer" readonly="readonly" />
</label>
</p>
</form>
<script>
function calcField_form1(){
result = parseInt(document.form1.Hours.value) + parseInt(document.form1.Location.value) + parseInt(document.form1.Extras.value);
document.getElementById('displayAnswer').value = result;
}
</script>
</body>
</html>

DJ_Markstar · 10-28-2009, 12:36 PM

firstly, just want to apologise for posting in the wrong place to begin with. Newb's eh? lol

Thanks to both Vege and Phatbass, although only Phatbass's works correctly. The one Vege posted displays all the numbers side by side, where Phatbass's calculates the answer. Thanks both of you for the effort you've put in for me!

DJ_Markstar · 10-28-2009, 01:23 PM

Two more quick questions

1. Would it be possible to calculate a group of checkboxes (or another alternative?), but only when they're checked? With my latest attempt, the value is added to the total whether the box is checked or not. Not good!

2. Is it possible to change the way the list/menu looks? They're a bit boring looking by default lol

Thanks again

Vege · 10-28-2009, 01:29 PM

CSS is the key, it can be altered allot but without knowing what you wanna alter it's impossible.

Maybe read this tutorial to get idea what CSS is:
http://www.w3schools.com/Css/default.asp