[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 154
  • Last Modified:

Why did this javascript code break?

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
justmelat
Asked:
justmelat
  • 10
  • 5
  • 2
1 Solution
 
LordOfPortsCommented:
Is it still within the FORM element?
0
 
justmelatAuthor Commented:
yes, still in the form element.
0
 
justmelatAuthor Commented:
it's just a column over, across from another field.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
justmelatAuthor Commented:
if i copy the code back to it's original position, it works.  What is this?
0
 
LordOfPortsCommented:
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
 
hieloCommented:
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
 
justmelatAuthor Commented:
I promise Hielo, nothing, i just copied and pasted.

I'm going to try LordOfPorts idea and see if that shows anything
0
 
hieloCommented:
>>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
 
justmelatAuthor Commented:
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
 
hieloCommented:
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
 
justmelatAuthor Commented:
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
 
justmelatAuthor Commented:
sorry Hielo, I did see yours, I will try it now.  Could you still look at that code please?
0
 
justmelatAuthor Commented:
Wow Hielo, that worked, what was the significance of that multiplier?
0
 
hieloCommented:
>>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
 
justmelatAuthor Commented:
Hielo, thanks so much, you have no idea how I appreciate this.
0
 
justmelatAuthor Commented:
BEyond Superior!!!!
0
 
hieloCommented:
>>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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 10
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now