CodingHTML radio buttons

 

Press Ctrl+Enter to quickly submit your post
Quick Reply  
 
 
  
 From:  Peter (BOUGHTONP)  
 To:  Radio      
38188.81 In reply to 38188.79 
If he'd used jQuery it would have worked! ;)

What does the error in the console say?
0/0
 Reply   Quote More 

 From:  Radio   
 To:  Peter (BOUGHTONP)     
38188.82 In reply to 38188.81 

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

 

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

My life is hard, I suffer lots
0/0
 Reply   Quote More 

 From:  Peter (BOUGHTONP)  
 To:  Radio      
38188.83 In reply to 38188.82 
Are you using an old version of IE?
0/0
 Reply   Quote More 

 From:  af (CAER)  
 To:  99% of gargoyles look like (MR_BASTARD)     
38188.84 In reply to 38188.80 
What would you suggest instead?
0/0
 Reply   Quote More 

 From:  af (CAER)  
 To:  Radio      
38188.85 In reply to 38188.82 
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.
0/0
 Reply   Quote More 

 From:  99% of gargoyles look like (MR_BASTARD)  
 To:  af (CAER)     
38188.86 In reply to 38188.84 
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.

bastard by name, bastard by nature

0/0
 Reply   Quote More 

 From:  Radio   
 To:  af (CAER)     
38188.87 In reply to 38188.85 

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.

My life is hard, I suffer lots

Attachments:
PL3.htm

0/0
 Reply   Quote More 

 From:  af (CAER)  
 To:  Radio      
38188.88 In reply to 38188.87 
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.
0/0
 Reply   Quote More 

 From:  af (CAER)  
 To:  99% of gargoyles look like (MR_BASTARD)     
38188.89 In reply to 38188.86 
That'd be fine if the checkboxes were created (by hand, I'm guessing) with a value attribute in the first place :)
0/0
 Reply   Quote More 

 From:  Radio   
 To:  af (CAER)     
38188.90 In reply to 38188.88 

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)

My life is hard, I suffer lots

Attachments:
PL3.htm

0/0
 Reply   Quote More 

 From:  af (CAER)  
 To:  Radio      
38188.91 In reply to 38188.90 
Once again, it's an issue with IE, in this case not supporting the previousElementSibling property. Change it to previousSibling and it works fine. I've only tried it in IE8, dunno about 7 or 6.
0/0
 Reply   Quote More 

 From:  Radio   
 To:  ALL
38188.92 
I'm only worried about 8, and all seems to work fine now - thanks.
My life is hard, I suffer lots
0/0
 Reply   Quote More 

 From:  Radio   
 To:  ALL
38188.93 
Using the function supplied earlier, some of the numbers coming in are in the thousands, and have helpfully been formatted to include comma separators.
I found a snippet of javascript that removes commas, but it doesn't seem to work. Anyone care to have a go at explaining what I've done wrong this time? ;-)

javascript code:
<script type="text/javascript">
//Get the values from the table when checkboxes are checked
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;
    DeleteComma(result);
};


javascript code:
<script type="text/javascript">
function DeleteComma(num) {
var temp1 = 0;
var xarray = num.split(",");
if ( xarray[2] != null ) {
   temp1 = xarray[0]+xarray[1]
+xarray[2]; return temp1 } 
else if ( xarray[1] != null ) {
          temp1 = xarray[0]
+xarray[1]; return temp1}
       else
{temp1 = xarray[0]; return temp1 }         
}
</script>
My life is hard, I suffer lots
0/0
 Reply   Quote More 

 From:  af (CAER)  
 To:  Radio      
38188.94 In reply to 38188.93 
Um, that seems like a vastly over-complex function just for removing commas from a string.
javascript code:
var deleteCommas = function (num) {
    return (num + "").replace(/,/g, "");
};

But aside from that, you're calling DeleteComma() on the result of a function that generates a list of checkboxes. There are no commas to delete from such a list. Moreover, you'e calling it after the function has returned, so it never actually gets exectuted.

edit:
Looking over the code, the bit you need to change is this loop:
javascript code:
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;
    }
}
Change it to this:
javascript code:
var element, deleteCommas;
 
deleteCommas = function (num) {
    return (num + "").replace(/,/g, "");
}; 
 
for (i = 0; i < max; i += 1) {
    if (checkBoxes[i].checked) {
        element = checkBoxes[i].parentElement.previousSibling;
        total += +deleteCommas(element.innerHTML);
 
        element = element.previousSibling;
        totalWholesale += +deleteCommas(element.innerHTML);
    }
}


edit again:
Actually to make it even more resilient, you could change deleteCommas() to:
javascript code:
stripNonNumeric = function (num) {
    return (num + "").replace(/[^0-9.]/g, "");
};
That way it would remove things like currency symbols or extra spaces or whatnot - anything that isn't a digit or a .
0/0
 Reply   Quote More 

 From:  Radio   
 To:  af (CAER)     
38188.95 In reply to 38188.94 
Cheers - much appreciated once again!
My life is hard, I suffer lots
0/0
 Reply   Quote More 

Reply to All    
 

1–20  …  41–60  61–80  81–95

Rate my interest:

Adjust text size : Smaller 10 Larger

Beehive Forum 1.5.2 |  FAQ |  Docs |  Support |  Donate! ©2002 - 2024 Project Beehive Forum

Forum Stats