Page is a not externally linkable
Fotiman - 9:18 pm on Dec 3, 2010 (gmt 0)
A couple of things to note.
Make sure your logic still relies on server side handling for calculating the values. You can use JavaScript to provide a fast, user friendly client side version, but the results of that should ultimately be ignored by the server and the inputs that generate those results are what the server should focus on. This is to prevent users from modifying the request on the client before sending it to the server.
I would start by creating a form (and form processing page) that could handle the data without JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Dropdowns Change Values</title>
</head>
<body>
<form>
<div>
<select name="product">
<option value="1.23">Product 1</option>
<option value="2.34">Product 2</option>
<option value="3.45">Product 3</option>
</select>
<select name="qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" id="buyBtn" value="Buy">
</div>
</form>
</body>
</html>
In the example above, the server side code would need to process the submitted form values to determine the totals. Next lets add the JavaScript to replace the submit button with a styled link and total. Obviously, this is just a prototype example, but demonstrates how you could get started. I've opted to use jQuery to greatly simplify the code. Note, the HTML markup remains unchanged.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Some very basic CSS. YMMV. */
#total {
font-size: 200%;
font-weight: bold;
}
a#buyBtn {
padding: 1em;
border: 1px solid #000;
color: #fff;
text-decoration: none;
background: #e36c04;
}
</style>
<title>Multiple Dropdowns Change Values</title>
</head>
<body>
<form>
<div>
<select name="product">
<option value="1.23">Product 1</option>
<option value="2.34">Product 2</option>
<option value="3.45">Product 3</option>
</select>
<select name="qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" id="buyBtn" value="Buy">
</div>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Replace the submit button with a place to display the total and a
// stylized link 'button'. Don't forget to add CSS for #total and a#buyBtn.
$('#buyBtn').replaceWith("<span id='total'><\/span><a id='buyBtn' href='#'>Buy<\/a>");
$('#buyBtn').click(function (e) {
e.preventDefault();
$('form').submit();
});
function updateTotal() {
// TODO: add some Math functions to ensure decimal precision
$('#total').html('$' + ($('select[name=product]').val() * $('select[name=qty]').val()));
// This is just to provide a nicer hover experience since our Buy button
// is simply going to trigger the form submit.
$('#buyBtn').get()[0].href = ($('form').attr('action') || '?') + $('form').serialize();
}
// Update the total immediately (using the default select box values)
updateTotal();
// Attach listeners to the select boxes. I could have just defined 1
// listener here using $('select'), since the only select elements in the
// HTML above are the ones I want. But this is more precise.
$('select[name=product]').change(updateTotal);
$('select[name=qty]').change(updateTotal);
});
</script>
</body>
</html>