Resolved JS not working in FireFox

[longstuff]

Hi, I'm new to JS and been thrown in at the deepend as our developer has just left! You are dealing with a total newbie!

I have the following script that is not working in FF but is fine in Chrome and IE can anyone tell me what is wrong with it please?!

function showTotalCost(val)
{
 if(val=='yes')
 {
 if(document.getElementById('secondaryeventtype').value == 'adventure')
{
document.getElementById('totalcost').innerText = Number(parseFloat(document.getElementById('cost').value) + 100).toFixed(2) + ' (including insurance)';
 }
 else
 {
 document.getElementById('totalcost').innerText = Number(parseFloat(document.getElementById('cost').value) + 27).toFixed(2) + ' (including insurance)';
}
}
 else
{
document.getElementById('totalcost').innerText = document.getElementById('cost').value;
 }
}

function calculateGroupMembers()
{
var iMultiplier;
if(document.getElementById('txtGroup1Firstname').value != '' || document.getElementById('txtGroup1Surname').value != '' || document.getElementById('txtGroup1Email').value != '')
{
iMultiplier=2;
}
if(document.getElementById('txtGroup2Firstname').value != '' || document.getElementById('txtGroup2Surname').value != '' || document.getElementById('txtGroup2Email').value != '')
{
iMultiplier=3;
}
 if(document.getElementById('txtGroup3Firstname').value != '' || document.getElementById('txtGroup3Surname').value != '' || document.getElementById('txtGroup3Email').value != '')
{
 iMultiplier=4;
}
if(document.getElementById('txtGroup4Firstname').value != '' || document.getElementById('txtGroup4Surname').value != '' || document.getElementById('txtGroup4Email').value != '')
{
iMultiplier=5;
}
if(document.getElementById('txtGroup5Firstname').value != '' || document.getElementById('txtGroup5Surname').value != '' || document.getElementById('txtGroup5Email').value != '')
{
 iMultiplier=6;
}
document.getElementById('totalcost').innerText = Number(parseFloat(document.getElementById('cost').value) * iMultiplier).toFixed(2) + ' (inc group members)';
}

It is fired from an onblur event in the div below once the chkbox is ticked, the link to the page is https://www.doitforcharity.com/book-...eid=1990&cid=0 but you may need to progress through https://www.doitforcharity.com/book-....aspx?eid=1990 first:

 
<div id="pnlGroupBooking">
<label class="boldfieldlabel" for="chkGroupBooking">Do you wish to book for others too? </label>
<input id="chkGroupBooking" type="checkbox" language="javascript" onclick="__doPostBack('chkGroupBooking','')" checked="checked" name="chkGroupBooking">
(you may book up to 5 additional people)
<div id="pnlGroupBookingNames" style="border: 1px solid LightGrey; width: 500px;" styles="padding:10px;">
<strong>Group Member Names</strong>
<br>
<p>
</p>
<p>
</p>
<p style="vertical-align: top;">
<strong>1) </strong>
<input id="txtGroup1Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup1Firstname">
<input id="txtGroup1Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup1Surname">
<input id="txtGroup1Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup1Email">
<br>
<strong>2) </strong>
<input id="txtGroup2Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup2Firstname">
<input id="txtGroup2Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup2Surname">
<input id="txtGroup2Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup2Email">
<br>
<strong>3) </strong>
<input id="txtGroup3Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup3Firstname">
<input id="txtGroup3Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup3Surname">
<input id="txtGroup3Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup3Email">
<br>
<strong>4) </strong>
<input id="txtGroup4Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup4Firstname">
<input id="txtGroup4Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup4Surname">
<input id="txtGroup4Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup4Email">
<br>
<strong>5) </strong>
<input id="txtGroup5Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup5Firstname">
<input id="txtGroup5Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup5Surname">
<input id="txtGroup5Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup5Email">
</p>
</div>
</div>

Thanks!

[Philip M]

Have you tried using your error console or Firebug? That would expose the problem.

Firefox does not support the innerText property. Instead, it supports the textContent property.
http://blog.coderlab.us/2005/09/22/u...-with-firefox/

Or use innerHTML if the elements are spans or divs as opposed to textboxes or textareas

I see no elements named "cost" and "totalcost".

if(document.getElementById('txtGroup1Firstname').value != ''
Be aware that single space or a ? will pass the validation.


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

[longstuff]

Hi, I have installed firebug but it's not really helping me find the problem which I presume is down to me not knowing how to use it properly or debug JS properly!

I understand that if(document.getElementById('txtGroup1Firstname').value != '' will validate with anything, which is fine for the moment.

Thanks

[Philip M]

See my revised post #2. But you make it hard to test when you do not include all the code.

[longstuff]

So Firebug is telling me that the var iMultiplier is undefined, how do I go about defining it?

I assumed that

{
iMultipler=x;
}

Was the definition in the script?

[Philip M]

The problem is innerText as I say.

There is no need to use both Number and parseFloat.

[longstuff]

Sorry, I thought I was including all the code! I think I have now added the element with cost and totalcost to my original posting and used the correct code tags for you.

Thank you for the link, I'll look into innerTEXT/HTML etc.

Cheers!

[longstuff]

Yes! textContent did it! Amazing, so simple. Thank you so much!!