I am new to PHP/JQuery, but am in the early stages of making an online delivery website for my bricks and mortar business. I have created a fiddle to demonstrate my problem here: http://ift.tt/2flc62i
The checkboxes were working fine, I could click away until my heart was content. Then I introduced jQuery etc to achieve collapsable divs and that's where it all went wrong.
The salt and vinegar checkboxes are working ok, but the toppings checkboxes that appear when the customise button is pressed do not work any longer. The currently checked boxes have been already manually checked in the database as test data.
When I remove the js references, these checkboxes are clickable again.
Any ideas?
I have searched around a lot, but any problem people have with checkboxes and jQuery seem to be when they want to use jQuery to check a box. Whereas I just want to be able to click them with the mouse.
Thank you.
<body>
<a href="shopAMSDNA201A.php">Back to menu</a><br/>
<a href="checkout.php">Checkout</a><br/><span id="basketcount">2 `items</span><br/><span id="baskettotal">£6.90</span><br/><div class="divtable"><div class="divtablerow"><div class="divtableheader divtablecell">Item</div><div class="divtableheader divtablecell">Price</div><div class="divtableheader divtablecell">Salt</div><div class="divtableheader divtablecell">Vinegar</div></div><div class="divtablerow"><div class="divtablecell">1/2lb Beef Burger</div><div class="divtablecell" id="productprice127">£5.15</div><div class="divtablecell"><input type="checkbox" name="salt" onclick="updateSaltVinegar('salt',this,488)"/></div><div class="divtablecell"><input type="checkbox" name="vinegar" onclick="updateSaltVinegar('vinegar',this,488)"/></div><div class="divtablecell" id="488"><button data-toggle="collapse" data-target="#customise488">Customise</button></div></div><div class="collapse" data-toggle="collapse" id="customise488"><div class="divtablerow"><div class="divtablecell" ><strong>Choose your toppings</strong></div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',68,this,488,'0',127)" /> 1-Tomato</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',69,this,488,'0',127)" checked /> 1-Lettuce</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',70,this,488,'0',127)" /> 1-Raw Onion</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',71,this,488,'0',127)" /> 1-Fried Onion</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',72,this,488,'0',127)" /> Thousand Island</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',73,this,488,'0',127)" /> Mayo</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',74,this,488,'0',127)" /> Garlic</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',75,this,488,'0',127)" /> Sweet Chilli</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',76,this,488,'0',127)" /> Taco</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',77,this,488,'0',127)" /> Ketchup</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',78,this,488,'0',127)" /> Brown Sauce</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',79,this,488,'0',127)" /> BBQ</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',80,this,488,'0',127)" /> Pepper</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',81,this,488,'0',127)" /> Buffalo</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',82,this,488,'0',127)" /> Relish</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',83,this,488,'0',127)" /> House</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',84,this,488,'0',127)" /> Kebab</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',85,this,488,'0',127)" /> Chipotle</div></div><div class="divtablerow"><div class="divtablecell" ><input type="checkbox" class="freetoppings" name="multinote" onchange="updateMulti('multinoteID',86,this,488,'0',127)" /> Mustard</div></div><div class="divtablerow"><div class="divtablecell"><strong>Paid toppings</strong></div></div><div class="divtablerow"><div class="divtablecell"><input type="checkbox" name="multiproduct" id="multiproduct5" onclick="updateMulti('multiplechoiceproductID',5,this,488,0.25,127)" /> Single Onion Ring - £0.25</div></div><div class="divtablerow"><div class="divtablecell"><input type="checkbox" name="multiproduct" id="multiproduct6" onclick="updateMulti('multiplechoiceproductID',6,this,488,0.25,127)" /> Slice of Cheese - £0.25</div></div><div class="divtablerow"><div class="divtablecell"><input type="checkbox" name="multiproduct" id="multiproduct7" onclick="updateMulti('multiplechoiceproductID',7,this,488,0.45,127)" checked /> Mexican Cheese - £0.45</div></div><div class="divtablerow"><div class="divtablecell"><input type="checkbox" name="multiproduct" id="multiproduct8" onclick="updateMulti('multiplechoiceproductID',8,this,488,0.40,127)" /> Pineapple - £0.40</div></div><div class="divtablerow"><div class="divtablecell"><input type="checkbox" name="multiproduct" id="multiproduct9" onclick="updateMulti('multiplechoiceproductID',9,this,488,0.90,127)" /> Slice of Bacon - £0.90</div></div></div><div class="divtablerow"><div class="divtablecell">Cone of chips</div><div class="divtablecell" id="productprice57">£1.75</div><div class="divtablecell"><input type="checkbox" name="salt" onclick="updateSaltVinegar('salt',this,489)"/></div><div class="divtablecell"><input type="checkbox" name="vinegar" onclick="updateSaltVinegar('vinegar',this,489)"/></div><div class="divtablecell" id="489"></div></div></div>`
</body>
===== JS =====
function updateBasket(id,basketID,addremove)
{
var xmlhttp;
var productID = document.getElementById("ID"+id).value;
var productprice = document.getElementById("saleprice"+id).value;
var addremove = addremove;
var vars = "productID="+productID+"&productprice="+productprice+"&basketID="+basketID+"&addremove="+addremove;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var a = JSON.parse(xmlhttp.responseText);
if (a.productquantity!=0) {
document.getElementById("productquantity"+productID).innerHTML = a.productquantity;
}
else {
document.getElementById("productquantity"+productID).innerHTML = "";
}
if (a.basketcount==1) {
document.getElementById("basketcount").innerHTML = a.basketcount+" item";
}
else {
document.getElementById("basketcount").innerHTML = a.basketcount+" items";
}
if (a.baskettotal==null) {
document.getElementById("baskettotal").innerHTML = "£0.00";
}
else {
document.getElementById("baskettotal").innerHTML = "£"+a.baskettotal;
}
console.log (xmlhttp.responseText);
}
}
xmlhttp.open("POST","updateBasket.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(vars);
}
function updateSaltVinegar (column, cb, bpID) {
//alert (column + ": " + cb.checked);
var column = column;
var xmlhttp;
var vars = "column="+column+"&cb="+cb.checked+"&basketproductID="+bpID;
console.log (vars);
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
console.log (xmlhttp.responseText);
}
}
xmlhttp.open("POST","updateSaltVinegar.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(vars);
}
function updateMulti (column,multiID,cb,bpID,price,pID) {
//alert (column + ": " + cb.checked);
var column = column;
var multiID = multiID;
var price = price;
var pID=pID;
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
// code for IE6, IE5
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if (column=="multiplechoiceproductID") {
var a = JSON.parse(xmlhttp.responseText);
document.getElementById("productprice"+pID).innerHTML = "£"+a.productprice;
document.getElementById("baskettotal").innerHTML = "£"+a.baskettotal;
console.log (xmlhttp.responseText);
}
}
}
var vars = "column="+column+"&multiID="+multiID+"&basketproductID="+bpID+"&price="+price+"&addremove=";
//if cb checked, run add, else run remove
if (cb.checked) {
vars = vars+"add";
}
else {
vars = vars+"remove";
}
vars = vars+"&pID="+pID;
console.log (vars);
xmlhttp.open("POST","updateMulti.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(vars);
}
===== CSS =====
div {
width: 80%;
}
div.divtable {
display: table;
border: 1px solid green;
table-layout: fixed;
}
div.divtablerow {
display: table-row;
border: 1px solid red;
}
div.divtablecell {
display: table-cell;
border: 1px solid blue;
width: 20%;
}
.divtablecell.divtableheader {
font-weight: bold;
border: 1px solid orange;
}
div.topping {
width: 200px;
height: 30px;
background: #999;
float: left;
margin: 0 2px 2px 0;
text-align: center;
padding-top: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div.topping:nth-child(3n+1) {
clear:both;
}
@media all and (max-width: 500px) {
div.topping {
float: none;
}
}
Aucun commentaire:
Enregistrer un commentaire