4 Replies - 5910 Views - Last Post: 11 June 2011 - 08:01 AM

#1 jacobairving   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 3
  • Joined: 10-June 11

IE Problem with Javascript driven form

Posted 10 June 2011 - 08:28 PM

The below code works perfect in Firefox but fails in both IE and Chrome

The code handles form elements and simple math calculations to output costs given user input.

When the page loads in IE, All elements and calculations specified within the "onclick" function do not generate.

Therefore, I believe the problem is within the "onclick" function.

If i remove that function and the references to it, the code runs fine in all browsers.

<script type="text/javascript">

function calculate(){

var op1=document.getElementsByName('form[units]');

for(i=0;i<op1.length;i++) {

if (document.getElementById('plans').selectedIndex == 1 && op1[i].checked)
{

document.getElementById('total').value = parseInt(document.getElementById('addontotal').value) +
parseInt(document.getElementById('plans').value)+ parseInt(op1[i].value)*99;

document.getElementById('monthly').value = 
[parseInt(document.getElementById('addontotal').value)+
parseInt(document.getElementById('plans').value) + parseInt(op1[i].value)*99]/12;

}
else if (document.getElementById('plans').selectedIndex == 2 && op1[i].checked)
{
document.getElementById('total').value = 
parseInt(document.getElementById('addontotal').value)+
parseInt(document.getElementById('plans').value) + parseInt(op1[i].value)*149;

document.getElementById('monthly').value = 
[parseInt(document.getElementById('addontotal').value)+
parseInt(document.getElementById('plans').value) + parseInt(op1[i].value)*149]/12;
}
else if (document.getElementById('plans').selectedIndex == 3 && op1[i].checked)
{
document.getElementById('total').value = 
parseInt(document.getElementById('addontotal').value)+
parseInt(document.getElementById('plans').value) + parseInt(op1[i].value)*249;

document.getElementById('monthly').value = [parseInt(document.getElementById('addontotal').value)+ parseInt(document.getElementById('plans').value) + parseInt(op1[i].value)*249]/12;
}
}
}
 
function onclick(){

var sum=0;
var addon=document.getElementsByName('form[addons][]');

for (i = 0; i < addon.length; i++) {
if(addon[i].checked==true) {sum+=Number(addon[i].value);}
}

document.getElementById('addontotal').value=sum.toFixed(2);

}

</script>




Note: The "onclick" function is called with a checkbox's "onchange" event.

I realize the format, syntax and general style is awful but it was a time sensitive issue and i am not a Javascript coder :)

A live example of it is here:
new.danielsair.com/index.php?option=com_rsform&view=rsform&formId=3&Itemid=138

Any help is appreciated. Thank you.

Is This A Good Question/Topic? 0
  • +

Replies To: IE Problem with Javascript driven form

#2 maniacalsounds   User is offline

  • D.I.C Regular
  • member icon

Reputation: 118
  • View blog
  • Posts: 474
  • Joined: 27-June 10

Re: IE Problem with Javascript driven form

Posted 10 June 2011 - 08:44 PM

Sorry, but that link is not a valid link.

And can you give us the code snippet where you called the "onclick()" method?

And, I believe I see a flaw. (However, this may not be true, because I don't really use this selector. I always use getElementById or getElementsByClassName) On line 44, what if you changed the code to this:
var addon = document.getElementsByName("addons");



Does that change anything? Because that creates an array automatically, you don't have to make the thing it searches for an array.
Was This Post Helpful? 0
  • +
  • -

#3 jacobairving   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 3
  • Joined: 10-June 11

Re: IE Problem with Javascript driven form

Posted 10 June 2011 - 09:17 PM

I'm sorry. Here is a link to the form.


Firebug lists the form's name attribute as "form[addons][]" and i assume that unless IE8 has issues with the .getElementsByName handler that it should work it should work - given it's fine in Firefox.

<input type="checkbox" onchange="onclick();" id="addons0" value="12" name="form[addons][]">



That's what i'm using for each checkbox element.
Was This Post Helpful? 0
  • +
  • -

#4 jacobairving   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 3
  • Joined: 10-June 11

Re: IE Problem with Javascript driven form

Posted 10 June 2011 - 09:47 PM

Actually your suggestion has led me to the solution. Apparently the name for the method "onclick" was interfering with other HTML attributes or elements on the page. Simply renaming it got everything going. Thank you :)
Was This Post Helpful? 1
  • +
  • -

#5 maniacalsounds   User is offline

  • D.I.C Regular
  • member icon

Reputation: 118
  • View blog
  • Posts: 474
  • Joined: 27-June 10

Re: IE Problem with Javascript driven form

Posted 11 June 2011 - 08:01 AM

Haha, I'm glad to have helped :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1