Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Firefox vs. IE, NAME vs. ID

Status
Not open for further replies.
Alski1000

Alski1000

Technical User
Nov 13, 2006
10
GB
Hi,

This code works in IE, but not in Firefox. I assume it is the way they handle NAME and ID?

Eventually I need to pass the variables to another page and capture them e.g. alacarte_ABC and alacarte_DEF

Should I be using field.name.indexOf("alacarte_") or something? I only know enough to be dangerous...

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin  This function counts all of the alcarte checkboxes and sums it
function findTotals()
{

	intBoxCount = 0;
	dblTotalCost = 0.0;
	
	chkalacarteGroup = document.getElementsByName('alacarte');
	for(i=0;i<chkalacarteGroup.length;i++) {
	(chkalacarteGroup[i].type=="checkbox")
		if(chkalacarteGroup[i].checked) {
			intBoxCount++;
			dblTotalCost += 5.99;
			
	  }	
	}
	

	document.getElementById('cost').value = dblTotalCost.toFixed(2);
	document.getElementById('clicked').value = intBoxCount;
}
//  End -->


<!-- Begin  This function does a 'Check All/Uncheck All' test
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
(field[i].name.indexOf("alacarte") == 0 && field[i].name!=field.name)
field[i].checked = true;}
checkflag = "true";
return "Uncheck All"; }
else {
for (i = 0; i < field.length; i++) {
(field[i].name.indexOf("alacarte") == 0 && field[i].name!=field.name)
field[i].checked = false; }
checkflag = "false";
return "Check All"; }
}
//  End -->
</script>
</HEAD>

<body>

<center>
<form name=myform action="" method=post>
<input id="alacarte" name="alacarte_ABC" type="checkbox" value="1">ABC<br>
<input id="alacarte" name="alacarte_DEF" type="checkbox" value="1">DEF<br>
<input id="alacarte" name="alacarte" type="checkbox" value="1">GHI<br>
<input id="alacarte" name="alacarte" type="checkbox" value="1">JKL<br>
<input id="alacarte" name="alacarte" type="checkbox" value="1">MNO<br>
<br>
<br>
Total <input size=5 type=text name=clicked id="clicked" value=0 onfocus=blur()><br>
Cost <input size=5 type=text name=cost id="cost" value=0 onfocus=blur()>
<br>
<br>
<input name="button" type=button class="button" onClick="findTotals()" value="Find totals"><br>
<input type=button class="button" value="Check All" onClick="this.value=check(this.form.alacarte)">
</form>
</center>


</body>
</html>
 
Sort by date Sort by votes
what is this?

Code: 
    (chkalacarteGroup[i].type=="checkbox")
        if(chkalacarteGroup[i].checked) {
            intBoxCount++;
            dblTotalCost += 5.99;
            
      }

try changing it to this:

Code: 
    if (chkalacarteGroup[i].type=="checkbox" && chkalacarteGroup[i].checked) {
        intBoxCount++;
        dblTotalCost += 5.99;
    }



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Hi cLFlaVA,

I've adjusted my original code and added your own, but it has the same functionality, that it, it still doesn't work in Firefox

Alski
 
Upvote 0 Downvote
not sure i can tell you what's wrong. this works perfectly for me in firefox:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin  This function counts all of the alcarte checkboxes and sums it
function findTotals()
{

    intBoxCount = 0;
    dblTotalCost = 0.0;
    
    chkalacarteGroup = document.getElementsByName('alacarte');
    for(i=0;i<chkalacarteGroup.length;i++) {
        if (chkalacarteGroup[i].type=="checkbox" && chkalacarteGroup[i].checked) {
            intBoxCount++;
            dblTotalCost += 5.99;
        } 
    }
    

    document.getElementById('cost').value = dblTotalCost.toFixed(2);
    document.getElementById('clicked').value = intBoxCount;
}
//  End -->


<!-- Begin  This function does a 'Check All/Uncheck All' test
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
(field[i].name.indexOf("alacarte") == 0 && field[i].name!=field.name)
field[i].checked = true;}
checkflag = "true";
return "Uncheck All"; }
else {
for (i = 0; i < field.length; i++) {
(field[i].name.indexOf("alacarte") == 0 && field[i].name!=field.name)
field[i].checked = false; }
checkflag = "false";
return "Check All"; }
}
//  End -->
</script>
</HEAD>

<body>

<center>
<form name=myform action="" method=post>
<input id="alacarte" name="alacarte_ABC" type="checkbox" value="1">ABC<br>
<input id="alacarte" name="alacarte_DEF" type="checkbox" value="1">DEF<br>
<input id="alacarte" name="alacarte" type="checkbox" value="1">GHI<br>
<input id="alacarte" name="alacarte" type="checkbox" value="1">JKL<br>
<input id="alacarte" name="alacarte" type="checkbox" value="1">MNO<br>
<br>
<br>
Total <input size=5 type=text name=clicked id="clicked" value=0 onfocus=blur()><br>
Cost <input size=5 type=text name=cost id="cost" value=0 onfocus=blur()>
<br>
<br>
<input name="button" type=button class="button" onClick="findTotals()" value="Find totals"><br>
<input type=button class="button" value="Check All" onClick="this.value=check(this.form.alacarte)">
</form>
</center>


</body>
</html>



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
In Firefox, when you check all 5 boxes, the Total box only adds 3 values up.

In IE, all 5 values are added up.


I'm using:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.0.8) Gecko/20061025 Firefox/1.5.0.8

Could a difference in Firefox versions be the reason?
 
Upvote 0 Downvote
oh ok. well that makes sense, as there are only three that have the name "alacarte". the others are named something else. you'll need to get all elements, then loop through each and check the indexOf, as you suggested above.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
To pass and then use the values in another page, I'd like to name them all in the format:

alacarte_YYY

so that I can easily separate them out the other end. But Firefox doesn't like it.

I've been trying to loop through and use the indexOf method to search for "alacarte_", but I can't get the code right and it keeps failing (I'm still very much learning Javascript so when it fails I have trouble working out where (is there a debugging tool?)).
 
Upvote 0 Downvote
firefox has an error console. tools > javascript console (or tools > error console in 2.x).

does this make things clearer for you?

Code: 
function findTotals()
{

    intBoxCount = 0;
    dblTotalCost = 0.0;
    
    chkalacarteGroup = document.forms['myform'].elements;
    for(i=0;i<chkalacarteGroup.length;i++) {
        if (chkalacarteGroup[i].type=="checkbox" &&
            chkalacarteGroup[i].checked &&
            chkalacarteGroup[i].name.indexOf('alacarte') > -1) {
            intBoxCount++;
            dblTotalCost += 5.99;
        }
    }
    

    document.getElementById('cost').value = dblTotalCost.toFixed(2);
    document.getElementById('clicked').value = intBoxCount;
}



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
This works :) Thank you cLFlaVA

To make this of use to other people, I've gone through and worked out how the function is constructed.

This what the form does:
For each checkbox ticked with the name starting with "alacarte_", times it by 5.99.
Then we ouput that total value and output the number of checkboxes ticked.

This is the function:

function findTotals()
{

intBoxCount = 0;
dblTotalCost = 0.0;

chkalacarteGroup = document.forms['form1'].elements;
for(i=0;i<chkalacarteGroup.length;i++) {
if (chkalacarteGroup.type=="checkbox" &&
chkalacarteGroup.checked &&
chkalacarteGroup.name.indexOf('alacarte_') > -1) {
intBoxCount++;
dblTotalCost += 5.99;

}
}


document.getElementById('cost').value = dblTotalCost.toFixed(2);
document.getElementById('clicked').value = intBoxCount;
}


This is how it is constructed:

intBoxCount = 0;
dblTotalCost = 0.0
set the values for intBoxCount and dblTotalCost to zero

chkalacarteGroup = document.forms['myform'].elements;
place the form elements into the chkalacarteGroup array


for(i=0;i<chkalacarteGroup.length;i++) {
the loop: loops through the 'if statement' below for each element in the chkalacarteGroup array


if (chkalacarteGroup.type=="checkbox" &&
if the form element is a checkbox and ....


chkalacarteGroup.checked &&
and that checkbox is checked and ....


chkalacarteGroup.name.indexOf('alacarte') > -1) {
the name of the checkbox contains the string 'alacarte'

intBoxCount++;
then increment the value of intBoxCount by 1

dblTotalCost += 5.99;
adds the dblTotalCost values in each loop together (like the formula x=x+y )


document.getElementById('cost').value = dblTotalCost.toFixed(2);
document.getElementById('clicked').value = intBoxCount;
outputs the Total cost to two decimal places and outputs the number of markers


 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
181
gmmastros
gmmastros
EEM6498
  • Locked
  • Question
Combine First_Name and Last_Name into Name - Javascript
Replies
1
Views
371
Praveen425188
Praveen425188
amrmnabil
  • Locked
  • Question
Dynamic Control Name Access 1
Replies
2
Views
128
amrmnabil
amrmnabil
waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
170
waubain
waubain
pomt
  • Locked
  • Question
Object Document vs Object HTMLDocument
Replies
0
Views
126
pomt
pomt

Part and Inventory Search

Sponsor

Back
Top