Adrienne wrote:
I am the first to admit that I know bupkis about javascript, except that
sometimes I need it to do something client side that I can't do server
side.
Anyway, here's my problem:
<input type="text" name="ticket" id="ticket">
<input type="text" name="amount" id="amount">
My ASP script defaults ticket to be 30.00 and amount to be 600.00. What
I need is if the visitor puts 50.00 into the ticket field, the amount
field will update to 1000.00 instead of 600.00, in other words, ticket is
5% of amount.
Normally, I would Google and find tutorials or code snippets, but I've
got a deadline. I would really appreciate some help with this.
A sample is provided with the following comments:
1. If the user does not have javascript enabled or available, the script
will not run. In that case, what is the default behaviour (i.e. what is
the HTML)?
2. In the above case, do you have server-side functionality to perform
the same operations? The 'amount' field should be updated by a trip to
the server.
3. Can the user modify either field, or only the 'ticket' field?
4. Have you designed or implemented any client-side validation?
5. What are valid entries to the 'ticket' field? I've made it a number
with two decimal places. A range of numeric patterns and other tips on
validation are provided here:
<URL:http://www.merlyn.demon.co.uk/js-valid.htm#VNP>
5. You *must* have server-side validation. It would be very easy for a
user to send anything they like back to your server, you can't guarantee
that the script will do what you expect it to even if it runs.
6. toFixed() is widely supported but maybe not widely enough for your
users. You may wish to substitute another method for formatting the
output (hints are on the above site).
<script type="text/javascript">
// Test as decimal number with two decimal places
function validDollars( x ) {
return /^\d+\.\d\d$/.test(x);
}
function upDate( inp, outp ){
var d = inp.value;
if (! validDollars( d ) ) {
alert( 'Input must be a dollar amount like 300.00' );
outp.value = '';
} else {
d *= 5;
outp.value = d.toFixed(2);
}
}
</script>
<form action="">
<p>Please enter ticket amount (e.g. 399.95):
$<input type="text" name="ticket" id="ticket" onchange="
upDate(this,this.form.amount)
"><br>
Total amount:
$<input type="text" name="amount" id="amount" readonly>
</p>
</form>
--
Rob
