Apologies for the very messy code. I'm confused by where my $().ready(function()
and individual functions should be placed.
What works:
1) $(".calc").change(function()
- this updates a span and divs with data selected from a table populated from a database
2) When the page is loaded, before the $(".calc").change(function()
is called the function addRow(e)
manages to write "hey" to the console log, but fails with ReferenceError: Can't find variable: tbody addRow (furniture-product.php, line 396)
. Once the $(".calc").change(function()
is run, the console log no longer works
What does not work:
1) function addRow(e)
2) function removeRow(e)
I'm certain it's a case of having something small in the wrong place, but I have tried moving parts of the script around but with no success.
$().ready(function () {
"use strict";
var tbody = document.getElementById("the-tbody");
document.getElementById("btn-add").addEventListener("click", addRow, false);
tbody.addEventListener("click", removeRow, false);
var radios = $('input[type=radio]');
radios.on('change', function () {
radios.each(function () {
var radio = $(this);
radio.closest('.article-option')[radio.is(':checked') ? 'addClass' : 'removeClass']('highlight');
});
});
$(".calc").change(function () {
calctotal()
});
});
function addRow(e) {
console.log("hey");
var product_id = $('input[name="product_name"]').val();
var product_price = $('input[name="product_price"]').val();
var row = document.createElement('tr');
row.innerHTML = '<td><input type="hidden" name="item_id[]" value="' + product_id + '"><p>' + name + '</p><input type="hidden" name="price[]" value="' + product_price + '" class="price">£<span id="amount" class="amount">0</span> <span class="remove">[x]</span></td>';
tbody.appendChild(row);
update_amounts();
}
function removeRow(e) {
var elm;
for (elm = e.target; elm !== this; elm = elm.parentNode) {
if (/\bremove\b/.test(elm.className)) {
removeElement(elm.parentNode);
e.stopPropagation();
return;
update_amounts();
}
}
}
function calctotal() {
var total = 0;
var radios = $('input[type=radio]');
radios.each(function () {
var radio = $(this);
radio.closest('.article-option')[radio.is(':checked') ? 'addClass' : 'removeClass']('highlight');
});
$(".calc:checked").each(function () {
var a = this.value.split(",");
total += parseFloat(a[0]);
name = (a[1]);
image = (a[2]);
curtainid = (a[3]);
curtaindesc = (a[4]);
$("span.img").html('<div class="row curtain-img"><img src="images/furniture/' + image + '" class="img-responsive img-rounded" style="border: 5px solid #5f4865"></div>');
$("div#product_name").html('<input type="hidden" name="product_name" value="' + curtainid + '">' + name + '');
$("div#product_desc").html('' + curtaindesc + '');
$("div#product_add").html('<input type="button" id="btn-add" value="Add">');
$("div#product_price").html('<input type="hidden" name="product_price" value="' + total.toFixed(2) + '"><strong>£' + total.toFixed(2) + '</strong>');
});
}
Quite simply the HTML is
<table id="myTable">
<tbody id="the-tbody"></tbody>
</table>
<input type="button" id="btn-add" value="Add">
JS Fiddle: http://jsfiddle.net/pw25p3qt/