...

View Full Version : Resolved JS not working in FireFox



longstuff
12-15-2011, 03:58 PM
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-online-step2.aspx?eid=1990&cid=0 but you may need to progress through https://www.doitforcharity.com/book-online.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
12-15-2011, 04:19 PM
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/using-the-innertext-property-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
12-15-2011, 04:30 PM
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
12-15-2011, 04:46 PM
See my revised post #2. But you make it hard to test when you do not include all the code.

longstuff
12-15-2011, 04:46 PM
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
12-15-2011, 04:51 PM
The problem is innerText as I say.

There is no need to use both Number and parseFloat.

longstuff
12-15-2011, 05:01 PM
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
12-15-2011, 07:35 PM
Yes! textContent did it! Amazing, so simple. Thank you so much!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum