calculation form problem!
hi there guys, I'm still fairly new to web design, so please bear with me. I need a calculation form that calculates the value of a quote based on the information they provide. I would like my form to only display the quote once the "get quote" button is pressed, and in the text box. I would also like the answer displayed so that it isn't 'editable', because that could be problematic! I know it's only a simple issue, but any help would be great. Thanks in advance!
Code:
<html>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="6">
<tr>
<th width="35%" align="center" scope="col"> </th>
<th width="65%" align="left" scope="col">
<option selected="selected"></option></th>
</tr>
<tr>
<td align="center"> </td>
<td align="left"> </td>
</tr>
<tr>
<td align="center"><label for="typeofparty">Type Of Party</label></td>
<td align="left"><select name="typeofparty" id="typeofparty" onclick="KW_calcForm('total',100,2,'#typeofparty','+','#hoursofparty')">
<option selected="selected">choose...</option>
<option value="0">Birthday Party</option>
<option value="50">Wedding</option>
<option value="0">childrens Party</option>
</select></td>
</tr>
<tr>
<td align="center"><label for="hoursofparty">Hours Of Party</label></td>
<td align="left" onclick="KW_calcForm('total',100,2,'#hoursofparty')"><select name="hoursofparty" id="hoursofparty" onclick="KW_calcForm('total',100,2,'#typeofparty','+','#hoursofparty','+','#DJ')">
<option selected="selected">Choose...</option>
<option value="100">1</option>
<option value="150">2</option>
<option value="200">3</option>
<option value="225">4</option>
<option value="250">5</option>
</select></td>
</tr>
<tr>
<td align="center"><label for="chooseyourdj">Choose your DJ</label></td>
<td align="left"><select name="chooseyourdj" id="chooseyourdj" onclick="KW_calcForm('total',100,2,'#typeofparty','+','#hoursofparty','+','#chooseyourdj')">
<option selected="selected">choose...</option>
<option value="75">Mark</option>
<option value="25">Frances</option>
<option value="1">Loserface</option>
</select></td>
</tr>
<tr>
<td align="center"><label for="location">Location of Function</label></td>
<td align="left"><select name="location" id="location">
<option>Choose...</option>
<option value="0">Essex</option>
<option value="0">Kent</option>
<option value="50">London</option>
</select></td>
</tr>
<tr>
<td align="center"><label for="total">Total</label></td>
<td align="left"><input name="total" type="text" id="total" onclick="KW_calcForm('VarTotal',100,2,'#typeofparty','+','#hoursofparty','+','#chooseyourdj','+','#location')" value="£" /></td>
</tr>
<tr>
<td align="center"><label for="clear"></label></td>
<td align="left"><label for="submit"></label>
<label for="getquote"></label>
<input type="submit" name="getquote" id="getquote" value="Get Quote!" onclick="compute(this.form)"/>
</td>
</tr>
</table>
</body>
</html>
Re: calculation form problem!
First off, form validation should NEVER be done on the client-side...that's way too big of a security risk. It should always be done on the server-side (PHP, ASP.NET, JSP, etc.).
Now, to display the information as non-editable on the client-side you can do two things. 1. Not display it in a text <input> tag, but instead in some sort of <div>. 2. You can specify the readonly property of the <input>tag.
Since you're new to web development...if you haven't yet been through W3School's XHTML tutorial, I highly suggest you do that before proceeding with your work. Also, you might want to look through their JavaScript section as well.
Re: calculation form problem!
Quote:
First off, form validation should NEVER be done on the client-side...that's way too big of a security risk. It should always be done on the server-side (PHP, ASP.NET, JSP, etc.).
C-mon! Both are necessary. Client-side to avoid unnecessary connections to the server just because some user missed a letter or something. And server-side for those who like to abuse webforms.
Client-side validation has proved to be the only input validation needed in most of cases when talking about intranet and office software. One of the proofs is that almost any modern webapp framework has extensive modules that generate javascript validation code for forms.
While in public applications a developer should keep to server-side validation, of course. There is always a guy who just loves to screw up all your js/html code and make your server/database submit to to his evil will.
Re: calculation form problem!
Of course I know that...I'm referring to the security aspect of form validation.
