Solved

Why did this javascript code break?

Posted on 2008-10-08
17
145 Views
Last Modified: 2011-10-19
Could some tell what I did wrong please?  I am using the attached javascript code, worked perfectly.  I needed to moved this code:
<td width="25%">Complete in:<br>
            <input type="radio" name="delivery" value="1" checked onclick="calc(this.form)"/>6-10 days<br>
            <input type="radio" name="delivery" value="2" onclick="calc(this.form)"/>3-5 days<br>
            <input type="radio" name="delivery" value="3" onclick="calc(this.form)"/>24 hrs.</td>
      </tr>

to another column near the top of the page.  It was previously under the section of code at the very bottom of the attached code snippet.  When I moved it, it stopped working.  I swear i just cut and pasted and added <br> at the end of the lines.

Can any see what I did wrong?
function calc(theForm) 

{

  var elements = theForm.elements;

  var total = 0;

  

  for(var i=0; i<elements.length; i++)

  {

    var element = elements[i];

    if(element.type == 'checkbox' && element.checked)

    {

        total += parseFloat(element.value);

    }

    else if(element.name=="delivery" && element.checked)

    {

        total *= parseFloat(element.value);

    }

  }

  document.getElementById('Q_51').value = total;

}
 
 

<tr>

            <td><label><?=$QUESTION['Q_52']?></label></td>

           <td>

               <input id="Q_52" type="checkbox" name="Q_52" <?=$onFocus?> <?=checkTheBox("Yes",$ANSWER['Q_52'])?> onclick="calc(this.form);" value="10">

               Concept Packaging&nbsp;&nbsp;

               <input id="Q_53" type="checkbox" name="Q_53" <?=$onFocus?> <?=checkTheBox("Yes",$ANSWER['Q_53'])?> onclick="calc(this.form);" value="20">

               Mechanical Card

               <input id="Q_54" type="checkbox" name="Q_54" <?=$onFocus?> <?=checkTheBox("Yes",$ANSWER['Q_54'])?> onclick="calc(this.form);" value="120">

               Mechanical Card

           </td>

     </tr>

Open in new window

0
Comment
Question by:justmelat
  • 10
  • 5
  • 2
17 Comments
 
LVL 19

Expert Comment

by:LordOfPorts
ID: 22672011
Is it still within the FORM element?
0
 
LVL 1

Author Comment

by:justmelat
ID: 22672031
yes, still in the form element.
0
 
LVL 1

Author Comment

by:justmelat
ID: 22672039
it's just a column over, across from another field.
0
 
LVL 1

Author Comment

by:justmelat
ID: 22672205
if i copy the code back to it's original position, it works.  What is this?
0
 
LVL 19

Expert Comment

by:LordOfPorts
ID: 22672212
The HTML structure might have been affected, try validating it at http://validator.w3.org/ it will show any errors such as unclosed element etc. that might prevent the Javascript from traversing the elements correctly.
0
 
LVL 82

Expert Comment

by:hielo
ID: 22672313
there's nothing wrong on what you posted. Most likely somewhere along the lines you got rid of some id reference or moved it outside the form tag.
0
 
LVL 1

Author Comment

by:justmelat
ID: 22673526
I promise Hielo, nothing, i just copied and pasted.

I'm going to try LordOfPorts idea and see if that shows anything
0
 
LVL 82

Expert Comment

by:hielo
ID: 22674117
>>I promise Hielo, nothing, i just copied and pasted.
I believe you, but bugs happen unintentionally. Try using firebug to see if it reports any js errors that may help you narrow down the problem.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 1

Author Comment

by:justmelat
ID: 22676955
I have tried and checked everything, then i got the idea to just moved the code one line up instead of to the next column to see if it still worked.

so it appears to ONLY work in this order:

<!--check if different -->
     <tr>
            <td><label><?=$QUESTION['Q_52']?></label></td>
           <td>
               <input id="Q_52" type="checkbox" name="Q_52" <?=$onFocus?> <?=checkTheBox("Yes",$ANSWER['Q_52'])?> onclick="calc(this.form);" value="10">
               Concept Packaging&nbsp;&nbsp;
               <input id="Q_53" type="checkbox" name="Q_53" <?=$onFocus?> <?=checkTheBox("Yes",$ANSWER['Q_53'])?> onclick="calc(this.form);" value="20">
               Mechanical Card
               <input id="Q_54" type="checkbox" name="Q_54" <?=$onFocus?> <?=checkTheBox("Yes",$ANSWER['Q_54'])?> onclick="calc(this.form);" value="120">
               Mechanical Card
           </td>
     </tr>
     <!--Complete IN -->
       <tr><td>lskdfalskjfd</td>
       <td>
         Complete in:<br>
            <input type="radio" name="delivery" value="1" checked onclick="calc(this.form)" />6-10 days<br>
            <input type="radio" name="delivery" value="2" onclick="calc(this.form)" />3-5 days<br>
            <input type="radio" name="delivery" value="3" onclick="calc(this.form)" />24 hrs.
         </td></tr>

if i move that <!--Complete IN -->section anywhere else, it breaks.  Can anyone see why?  
0
 
LVL 82

Expert Comment

by:hielo
ID: 22678696
try:
function calc(theForm) 

{

  var elements = theForm.elements;

  var total = 0;

  var multiplier=1;

  for(var i=0; i<elements.length; i++)

  {

    var element = elements[i];

    if(element.type == 'checkbox' && element.checked)

    {

        total += parseFloat(element.value);

    }

    else if(element.name=="delivery" && element.checked)

    {

        multiplier = parseFloat(element.value);

    }

  }

  document.getElementById('Q_51').value = total*multiplier;

}

Open in new window

0
 
LVL 1

Author Comment

by:justmelat
ID: 22678910
ok I have adjusted this code and attached it in the txt file.  Everything is where I need it to appear on the screen.  The deadline calculation does not work.  Can anyone see what I am doing wrong?
deadlineNOtWorking.txt
0
 
LVL 1

Author Comment

by:justmelat
ID: 22678923
sorry Hielo, I did see yours, I will try it now.  Could you still look at that code please?
0
 
LVL 1

Author Comment

by:justmelat
ID: 22678950
Wow Hielo, that worked, what was the significance of that multiplier?
0
 
LVL 82

Accepted Solution

by:
hielo earned 400 total points
ID: 22679165
>>what was the significance of that multiplier?
if the multiplier(delivery) were to be the very first element, then total would have zero when it gets to:
total *= parseFloat(element.value);

and the total would still be zero. Likewise if it were the second element, total would have only the value of the first element and on the next iteration total would be the value of the first element * delivery. Clearly you need to apply the multipliear AFTER all the values have been summed up.

>>so it appears to ONLY work in this order
That "solved" the problem :)

"Seeing" the code in action does make a huge difference.
0
 
LVL 1

Author Comment

by:justmelat
ID: 22679255
Hielo, thanks so much, you have no idea how I appreciate this.
0
 
LVL 1

Author Closing Comment

by:justmelat
ID: 31504378
BEyond Superior!!!!
0
 
LVL 82

Expert Comment

by:hielo
ID: 22679509
>>Hielo, thanks so much
you are welcome.

On another note, looking at the problem you are about to close here:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23753700.html

I noticed you are NOT closing the TD tag.

Speaking of that problem, I noticed you offered 350ptx, yet you are a Premium Service Member which, if I am not mistaken, you have unlimited points - it will NOT cost you any more to offer 20pts than to offer 500pts. Yet, you don't seem to offer maximum points for most of the questions. I'm curious as to what criteria you use to assign points? A lot of experts try to answer questions just to meet their monthly 3000pts/month quota so that they maintain their free membership (I'm not one of them). Hence, to them, it's easier/faster to meet this goal by looking (most likely by using filters) specifically for the 500pt questions. Thus, you may get more prompt replies if you offer maximum points. As a matter of fact, from what I've seen, most Premium S. M. take this approach so they get their problems resolved in timely manner.

NO, I am not complaining.  I have a point or two too many:)
Take it as constructive criticism/advice.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now