Can't manually check checkboxes after referencing JQuery/Bootstrap

Question

I am new to PHP/JQuery/Bootstrap, 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: https://jsfiddle.net/dLukvqyd/

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.


Back to menu

Checkout
2 `items
£6.90
Item
Price
Salt
Vinegar
1/2lb Beef Burger
£5.15
Choose your toppings
 1-Tomato
 1-Lettuce
 1-Raw Onion
 1-Fried Onion
 Thousand Island
 Mayo
 Garlic
 Sweet Chilli
 Taco
 Ketchup
 Brown Sauce
 BBQ
 Pepper
 Buffalo
 Relish
 House
 Kebab
 Chipotle
 Mustard
Paid toppings
 Single Onion Ring - £0.25
 Slice of Cheese - £0.25
 Mexican Cheese - £0.45
 Pineapple - £0.40
 Slice of Bacon - £0.90
Cone of chips
£1.75
`

===== 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;
  }
}

bassxzero · Accepted Answer

Your HTML format gave me cancer. If you format you code in a nice way it makes everything easier including debugging.
Change
to
to fix your checkbox problem.
Mixing HTML and JavaScript markup is a bad practice and makes debugging more difficult. Since you are already including JQuery for Bootstrap I suggest you bind the change event for your checkbox. Example below.

 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(event) {
        //alert (column + ": " + cb.checked);
        var $this = $(this);
        var column = $this.attr('data-column');
        var multiID = $this.attr('data-multiID');
        var bpID = $this.attr('data-bpID');
        var price = $this.attr('data-price');
        var pID = $this.attr('data-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 ( $this.is(':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);
    }
    
    $(document).on('change', '[data-multiID]',updateMulti);

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;
  }
}


    
    

Back to menu

Checkout
2 items
£6.90


    
        Item
        Price
        Salt
        Vinegar
    
    
        1/2lb Beef Burger
        £5.15
        
        
        
        
            
        
    
    
        
            Choose your toppings
        
        
            
                 1-Tomato
            
        
        
            
                1-Lettuce
            
        
        
             1-Raw Onion
            
        
        
             1-Fried Onion
            
        
        
             Thousand Island
            
        
        
             Mayo
            
        
        
             Garlic
            
        
        
             Sweet Chilli
            
        
        
             Taco
            
        
        
             Ketchup
            
        
        
             Brown Sauce
            
        
        
             BBQ
            
        
        
             Pepper
            
        
        
             Buffalo
            
        
        
             Relish
            
        
        
             House
            
        
        
             Kebab
            
        
        
             Chipotle
            
        
        
             Mustard
            
        
        
            Paid toppings
        
        
            
                Single Onion Ring - £0.25
            
        
        
            
                Slice of Cheese - £0.25
            
        
        
             Mexican Cheese - £0.45
            
        
        
            
                Pineapple - £0.40
            
        
        
            
                Slice of Bacon - £0.90
            
        
    
    
        Cone of chips
        £1.75

EDIT 1

https://api.jquery.com/change/ Please see the JQuery docs for more information.

This line makes JQuery listen for the change event for all elements that have a data-multiID attribute. When one of those elements fires a change event then the function updateMulti handles the event. The only argument passed to the change event handler (updateMulti) is an event object.

$(document).on('change', '[data-multiID]',updateMulti);

Inside the event handler this references the object that fired the event. So $this is a JQuery object for the checkbox that was changed.

 var $this = $(this);

If you look back to the HTML markup each checkbox had data attributes. The lines below assign those data attributes to variable from the changed checkbox. So no, you do not need to pass the other arguments to the event handler.

    var column = $this.attr('data-column');
    var multiID = $this.attr('data-multiID');
    var bpID = $this.attr('data-bpID');
    var price = $this.attr('data-price');
    var pID = $this.attr('data-pID');

Can't manually check checkboxes after referencing JQuery/Bootstrap

Answers (1)

Related Questions

Can&#39;t manually check checkboxes after referencing JQuery/Bootstrap

Answers (1)

Related Questions

Can't manually check checkboxes after referencing JQuery/Bootstrap