HTML radio buttons

From: 99% of gargoyles look like (MR_BASTARD)11 Feb 2011 15:18
To: milko 71 of 95
I wouldn't bother if I were you, it's trivially easy to circumvent.
EDITED: 11 Feb 2011 15:18 by MR_BASTARD
From: af (CAER)11 Feb 2011 15:25
To: 99% of gargoyles look like (MR_BASTARD) 72 of 95
I prefer i += 1 as I find it more readable, and easier to adjust.
From: milko11 Feb 2011 15:28
To: 99% of gargoyles look like (MR_BASTARD) 73 of 95
well, it's quite easy to add most of the workarounds too. And why would anyone bother? I don't really know why anyone would type it in the first place mind you, so I maybe at an understanding-disadvantage here.
From: 99% of gargoyles look like (MR_BASTARD)11 Feb 2011 16:10
To: af (CAER) 74 of 95
Oddly enough, I find i++ easier to read, although I agree it's less flexible.
From: 99% of gargoyles look like (MR_BASTARD)11 Feb 2011 16:11
To: milko 75 of 95
quote: milko
And why would anyone bother?

To maintain freedom of speech, deny MOD MADNESS, and retain the original meaning. Except I'm not sure what it is.
From: Radio11 Feb 2011 16:18
To: af (CAER) 76 of 95
So would that pull the values from the rows of the table, or would I have to rewrite the table to support the function?
From: af (CAER)11 Feb 2011 17:27
To: Radio 77 of 95
Well as it is you'd have to rewrite the table, but this would take the values from the table itself:
javascript code:
var checkBoxes = document.querySelectorAll("input[type=checkbox]"),
    max = checkBoxes.length,
    i, total = 0, totalWholesale = 0;
 
for (i = 0; i < max; i += 1) {
    if (checkBoxes[i].checked) {
        // Get values directly from table cells.
        total += +checkBoxes[i].parentElement.
            previousElementSibling.innerHTML;
        totalWholesale += +checkBoxes[i].parentElement.
            previousElementSibling.previousElementSibling.innerHTML;
    }
}


edit: just realised the + should be at the start of the variable names, not the end. The + at the start is a forced type conversion; an alternative is to use:
javascript code:
total += parseInt(checkBoxes[i].parentElement.previousElementSibling.innerHTML, 10);


Edit again:
Another thing I thought of was that using jQuery needn't be any hassle - you can just include this line on your page somewhere before your current JS code:
HTML code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>


edit3: oo, jQuery 1.5 is out :O
EDITED: 11 Feb 2011 17:41 by CAER
From: Matt11 Feb 2011 19:12
To: af (CAER) 78 of 95
quote:
edit3: oo, jQuery 1.5 is out


Hooray. I wonder if it breaks as much stuff as 1.3 to 1.4 did.
From: Radio14 Feb 2011 12:35
To: af (CAER) 79 of 95

So what you're saying is that I should remove all the 20 individual inspections of the checkboxes, and replace with just this code? And that it will produce the same page?

 

That doesn't work, and I'm not sure what else I'd need to do.

From: 99% of gargoyles look like (MR_BASTARD)14 Feb 2011 13:51
To: af (CAER) 80 of 95

It's probably just me being anally retentive, but I bloody hate innerHTML, it's not part of the DOM and it's queer.

 

And by "queer" I mean gay and homosexual, not as in "by jove, that's a rum do and no mistake".

 

And by "gay" I mean queer and homosexual, not "having a gay old time, dahling".

 

It's a wonderful thing, this English language malarkey, isn't it?

From: Peter (BOUGHTONP)14 Feb 2011 13:52
To: Radio 81 of 95
If he'd used jQuery it would have worked! ;)

What does the error in the console say?
From: Radio14 Feb 2011 13:58
To: Peter (BOUGHTONP) 82 of 95

Object doesn't support this property or method (line 104, char 1)

 

Line 104 is:
var checkBoxes = document.querySelectorAll("input[type=checkbox]"),

From: Peter (BOUGHTONP)14 Feb 2011 14:09
To: Radio 83 of 95
Are you using an old version of IE?
From: af (CAER)14 Feb 2011 14:53
To: 99% of gargoyles look like (MR_BASTARD) 84 of 95
What would you suggest instead?
From: af (CAER)14 Feb 2011 15:04
To: Radio 85 of 95
Add this code to the top of the <script> section:
javascript code:
var getCheckboxes = function () {
    var i, elements = document.getElementsByTagName("input"),
        max = elements.length,
        result = [];
 
    for (i = 0; i < max; i += 1) {
        if (elements[i].type === "checkbox") {
            result.push(elements[i]);
        }
    }
    return result;
};
Then change the line with the error so it reads:
javascript code:
var checkBoxes = getCheckboxes,
If that still doesn't work, post the code you have and I'll see if I can spot the problem.

Btw, the reason it's best to put all your var declarations at the start of the function is that it helps you get clear in your head what the function needs and does. When you start declaring them inline whenever and wherever, it becomes difficult to remember what does what.
From: 99% of gargoyles look like (MR_BASTARD)14 Feb 2011 15:38
To: af (CAER) 86 of 95
I've kind of lost the plot as to why a table value is being extracted, but if it's associated with a check box I'd be tempted to read the name, value, and checked attributes of the input.
EDITED: 14 Feb 2011 15:39 by MR_BASTARD
From: Radio14 Feb 2011 16:17
To: af (CAER) 87 of 95

Here you go - it now complains that f5 isn't defined (which sort of makes sense as I used to use that to calculate my totals).
I could remove the totaliser line (line 135) but no idea what to put in it's place.

 

As for why I'm reading a value from a table, have a look at the file in IE and it should make more sense. This is about choosing a base product from a choice of 4, and then adding various options.
Radio boxes are used for the initial selection, and then checkboxes for the rest. The total then displays the price for your selection.

Attachments:
From: af (CAER)14 Feb 2011 16:37
To: Radio 88 of 95
Ok that's easy enough - the 'Calculate grand total' lines just need to be changed to this:
javascript code:
var GrandTotal = f1 + total,
    GrandTotalW = w1 + totalWholesale;
Oh and if you want to make Truffy happy and/or stick to the standards, you can change the .innerHTML bits in the loop to .firstChild.nodeValue

edit:
Sorry, I just noticed a mistake I made earlier, too - this line:
code:
var checkBoxes = getCheckboxes,
should read:
code:
var checkBoxes = getCheckboxes(),
Note the brackets - they assign the return value of the function to the variable checkBoxes, rather than assigning it the function itself.
EDITED: 14 Feb 2011 16:40 by CAER
From: af (CAER)14 Feb 2011 16:45
To: 99% of gargoyles look like (MR_BASTARD) 89 of 95
That'd be fine if the checkboxes were created (by hand, I'm guessing) with a value attribute in the first place :)
From: Radio15 Feb 2011 10:11
To: af (CAER) 90 of 95

Still not working. I noticed one error myself, you'd referred to a variable as GrandTotalW rather than GrandWTotal, but then I got this next one:

 

Message: 'parentElement.previousElementSibling.innerHTML' is null or not an object
Line: 126
Char: 9
Code: 0

 

HTML is attached.

 

(by the way, this is why I prefer my method, it may be more long winded and cumbersome, but it's a damn site easier to understand and fix when it goes wrong)

Attachments: