Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Please help. Addition script having issue with IE

  1. #1
    Join Date
    Oct 2005
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Please help. Addition script having issue with IE

    Hi,

    I have an addition script that is suppose to total up a number of inputs. However, it works fine on FF but does not work on IE. I have looked and looked and can not figure out what is the problem. Can some please help me figure out what is causing it.

    The link is http://www.nailsnow.net/members_registration2.shtml

    thank you so much in advance.

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Try the attached code

    Try to use the following type of code for options
    Code:
    <option value="1">1</option>
    In your case the value attribute is not present and IE is unable to find the value in case of FF it takes the text value that comes between <option></option> tags is treated as the value.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This worked:

    Code:
    <script type="text/javascript">
    // <!-- Copyright http://javascript.internet.com -->
    function startCalc(){
      interval = setInterval("calc()",1);
    }
    function calc(){
    var  A1 = document.forms.form1.A1.options[document.forms.form1.A1.selectedIndex].text;
    var  A2 = document.forms.form1.A2.options[document.forms.form1.A2.selectedIndex].text;
    var  A3 = document.forms.form1.A3.options[document.forms.form1.A3.selectedIndex].text; 
    var  A4 = document.forms.form1.A4.options[document.forms.form1.A4.selectedIndex].text;
    var  A5 = document.forms.form1.A5.options[document.forms.form1.A5.selectedIndex].text;
    var  A6 = document.forms.form1.A6.options[document.forms.form1.A6.selectedIndex].text;
    var  A7 = document.forms.form1.A7.options[document.forms.form1.A7.selectedIndex].text;
    var  A8 = document.forms.form1.A8.options[document.forms.form1.A8.selectedIndex].text;
    var  A9 = document.forms.form1.A9.options[document.forms.form1.A9.selectedIndex].text;
    var  A10 = document.forms.form1.A10.options[document.forms.form1.A10.selectedIndex].text;
    var  A11 = document.forms.form1.A11.options[document.forms.form1.A11.selectedIndex].text;
    var  A12 = document.forms.form1.A12.options[document.forms.form1.A12.selectedIndex].text;
    var  A13 = document.forms.form1.A13.options[document.forms.form1.A13.selectedIndex].text;
    var  A14 = document.forms.form1.A14.options[document.forms.form1.A14.selectedIndex].text;
    var  A15 = document.forms.form1.A15.options[document.forms.form1.A15.selectedIndex].text;
    var  A16 = document.forms.form1.A16.options[document.forms.form1.A16.selectedIndex].text;
    var  A17 = document.forms.form1.A17.options[document.forms.form1.A17.selectedIndex].text;
    var  A18 = document.forms.form1.A18.options[document.forms.form1.A18.selectedIndex].text;
    var  A19 = document.forms.form1.A19.options[document.forms.form1.A19.selectedIndex].text;
    var  A20 = document.forms.form1.A20.options[document.forms.form1.A20.selectedIndex].text;   
      document.form1.total1.value = (A1 * 1) + (A2 * 1) + (A3 * 1) + (A4 * 1) + (A5 * 1) + (A6 * 1) + (A7 * 1) + (A8 * 1) + (A9 * 1) + (A10 * 1) + (A11 * 1) + (A12 * 1) + (A13 * 1) + (A14 * 1) + (A15 * 1) + (A16 * 1) + (A17 * 1) + (A18 * 1) + (A19 * 1) + (A20 * 1);
    }
    function stopCalc(){
    clearInterval(interval);
    }
    </script>
    Don't use HTML type comments inside of javascript. Overall, the design of the form and its functions isn't conducive to straightforward coding in IE. The onchange event is better suited to this than the focus and blur pairing with the interval. Onchange could handle just about everything without requiring an interval.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    I would suggest doing this for each calc() set:

    Code:
    function calc() {
    	var sum = 0;
    	for(var i=1; i<=20; i++) {
    		sum += parseInt(document.forms.form1['A'+i].options[document.forms.form1['A'+i].selectedIndex].text);
    		}
    	document.form1.total1.value = sum; 
    	}
    All you have to do is change the "i" limits, "total#", and "calc#()";

    Or better yet, let's just make one master calc() function:
    Code:
    function calc(start, end, totalIndex) {
    	var sum = 0;
    	for(var i=start; i<=end; i++) {
    		sum += parseInt(document.forms.form1['A'+i].options[document.forms.form1['A'+i].selectedIndex].text);
    		}
    	document.form1['total'+totalIndex].value = sum; 
    	}

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Very nice, Trinithis. You inspired me to go ahead and add the events onload:

    Code:
    <script type="text/javascript">
    function calc(start, end, totalIndex) {
    for(var i=start, sum = 0; i<=end; i++) {
    sum += parseInt(document.forms.form1.elements['A'+i].options[document.forms.form1.elements['A'+i].selectedIndex].text);
    }
    document.forms.form1.elements['total'+totalIndex].value = sum; 
    }
    
    onload=function(){
    var  group=[]; group[0]=[];
    for (var i = 0, g=0, els = document.forms.form1.elements; i < els.length; i++)
    if(els[i].tagName.toLowerCase()=='select')
    group[g][group[g].length]=els[i];
    else
    group[g=group.length]=[];
    for (var i = 0, s=1, e=0; i < group.length; i++){
    e=e+group[i].length;
    for (var j = 0; j < group[i].length; j++)
    group[i][j].onfocus=group[i][j].onchange=new Function('calc('+s+','+e+','+[i+1]+')');
    s=s+group[i].length;
    }
    }
    </script>
    This works out well with the example markup minus the events, example group:

    HTML Code:
    <form name="form1" action="cgi-bin/news/maika-register2.pl" method=POST>
    <div align="center"><center><b><u>NEW CLIENT REGISTRATION FORM</u></b><br>Please complete the form below.<br>
    </center></div><div align="center"><center>
    
    <table border="0" width="600" cellspacing="1" cellpadding="0" height="712" >
      <tr>
        <td width="600" colspan="2" height="21">Response Questions:</td>
      </tr>
      <tr>
        <td width="50" height="21" align="right"><select NAME="A1" id="A1">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select></td>
        <td width="550" height="21" align="left"><p align="left">1 - Alcohol</td>
      </tr>
      <tr>
    
        <td width="50" height="21" align="right"><select NAME="A2" id="A2">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select></td>
        <td width="550" height="21"><p align="left">2 - Artificial sweeteners</td>
      </tr>
    
      <tr>
        <td width="50" height="21" align="right"><select NAME="A3" id="A3">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select></td> . . .
    
    
     . . . th="50" height="21" align="right"><select NAME="A19" id="A19">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select></td>
    
        <td width="550" height="21"><p align="left">19 - Water, well</td>
      </tr>
      <tr>
        <td width="50" height="21" align="right"><select NAME="A20" id="A20">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select></td>
        <td width="550" height="21"><p align="left">20 - Diet often for weight control<br></td>
      </tr>
    
    
    
      <tr>
        <td width="50" height="21" align="right"><input readonly type="text" type="text" NAME="total1" size="3">
    </td>
    
        <td width="550" height="21"><p align="left">Sum: This number is the sum of selection 1-20 and will be written to the database in field named "Total1"<br></td>
      </tr>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Oct 2005
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wow, that is very impressive with all the responses. Thank you so much everyone. You guys are awesome.

    I am currious about the onload function. What exactly does that do and how is it a help.

    Thank you.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by vanbao View Post
    Wow, that is very impressive with all the responses. Thank you so much everyone. You guys are awesome.

    I am currious about the onload function. What exactly does that do and how is it a help.

    Thank you.
    It assigns the events to the markup. It has pluses and minuses. On the plus side, as long as you follow the markup template that you have established, no onfocus, onblur or whatever events need to go in the body. On the minus side, if you deviate too far from the markup template that you have established, it will fail.

    Your template basically is:

    HTML Code:
    <form>
    
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <input type="text">
    
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <input type="text">
    
    </form>
    With the form, selects and the inputs numbered and named as you have done, in sequence. You could have as many of the:

    HTML Code:
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <select></select>
    <input type="text">
    in the form as you like as long as you stick to your established naming convention. But, if you start putting other form elements in there, or change the way the elements are named, the onload function and/or the calc function would probably no longer work.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Oct 2005
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John,

    If suppose I want to expand this script and include say another function where the script will take "total1" and divide by a particular predefined number say 120 and convert that to a percentage, would that be possible.

    In other word, each of the sections have a possible maximum total of 120 if a person chooses all 3s. Now ofcourse that is not going to happen so whatever total it turns out as the total for each individual, I want to find out what is the percentage of that total in relate to the maximum total.

  9. #9
    Join Date
    Oct 2005
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John,

    I am assuming that the onload function you added allow me to have just want script and work with more than 1 section which I have. In other word, each section, I have a value name total1, total2, total3, etc. If section one is contains questions 1-20, section two: 21-50, section 3: 51-75, how do I change the i variable in the script to reflect that. I tried changing it but did not get it to work with other sections.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It does it automatically:

    Attachment 1031

    if you follow the general layout and naming template, you could have 50 sections or just one, each with however many selects you like, each with one and only one total, all of them inside of form1 with no other elements in form1. You could have other forms on the page that do other things.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •