I am trying to add the (Demo: Handling Checkbox Group) functionality shown in this website to my movie booking website. My initial value is $0.50 booking fee. But it doesnt seem to be responding when I click the checkbox. I'm hoping a fresh pair of eyes might help spot errors. Also, I'm a super beginner and JavaScript is my Kryptonite.
// check boxes containing ticket price and seat information
echo "<td> <form method=\"post\"action=\"seats.php\"><input type="
. "\"hidden\" name=\"performanceSeat\" value=\"". $row['RowNumber'] . "\">
<input type=\"checkbox\" name=\"performancePrice\" value=". $row['CalculatedPrice'] ." />
</form>
</td>
"</tr>";
}
echo "</table>";
}
else {
echo "0 results";
}
$conn->close();
?>
//Calculated Price should add on here when checkbox is ticked
<p id="totalPrice">
<label>Total: $ <input type="text" name="total" class="num" size="6" value="0.00" readonly="readonly" /></label>
</p>
<form method="post" action="book.php"> Enter Email address: <input type="text" name="email">
<input type="hidden" name ="sell_item_id" value="$_GET[iten_id]"/>
<button type="submit" value="submit"> Add to cart </button>
<button type="submit" value="submit" onclick="function()"> Total up </button>
</form>
<script>
document.getElementById('performancePrice').onclick = function() {
// access properties using this keyword
if ( this.RowNumber ) {
// if checked ...
alert( this.CalculatedPrice);
} else {
echo "nothing ticked";
}
};
// call onload or in script segment below form
function attachCheckboxHandlers() {
// get reference to element containing toppings checkboxes
var el = document.getElementById('performancePrice');
// get reference to input elements in toppings container element
var tops = el.getElementsByTagName('performanceSeat');
// assign updateTotal function to onclick property of each checkbox
for (var i=0, len=tops.length; i<len; i++) {
if ( tops[i].type === 'checkbox' ) {
tops[i].onclick = updateTotal;
}
}
}
// called onclick of toppings checkboxes
function updateTotal(e) {
// 'this' is reference to checkbox clicked on
var form = this.form;
// get current value in total text box, using parseFloat since it is a string
var val = parseFloat( form.elements['total'].value );
// if check box is checked, add its value to val, otherwise subtract it
if ( this.performancePrince ) {
val += parseFloat(this.CalculatedPrice);
} else {
val -= parseFloat(this.CalculatedPrice);
}
// format val with correct number of decimal places
// and use it to update value of total text box
form.elements['total'].value = formatDecimal(val);
}
// format val to n number of decimal places
// modified version of Danny Goodman's (JS Bible)
function formatDecimal(val, n) {
n = n || 2;
var str = "" + Math.round ( parseFloat(val) * Math.pow(10, n) );
while (str.length <= n) {
str = "0" + str;
}
var pt = str.length - n;
return str.slice(0,pt) + "." + str.slice(pt);
}
// in script segment below form
attachCheckboxHandlers();
</script>
Aucun commentaire:
Enregistrer un commentaire