Javascript form executes depending on HTML around it?

I started a thread related to this issue a few weeks ago and thought I had resolved the issue. However, I've now changed the way I am building my page, and now the javascript form I want to execute doesn't work. In the previous, working example, I hard-coded the form open/close tags into the page type because my form was spread out across several blocks. Here is the relevant code for that page:
   <script type="text/javascript" src=""></script>
      <div class="col-md-5 col-sm-5 col-lg-5">
         <div id="blockStyle362Main39" class=" ccm-block-styles" >
<p><input id="calculator-input" type="text" name="WeightLifted" /> Weight Lifted</p>
<p><input id="calculator-input" type="text" name="RepsPerformed" /> Reps Performed</p>
<p><input onclick="calc(this.form)" type="button" value="Calculate" /><input type="reset" name="Reset" value="Reset" /></p></div>      </div>
      <div class="col-md-5 col-sm-5 col-lg-5">
      <div id="ccm-layout-wrapper-699" class="ccm-layout-wrapper"><div id="ccm-layout-main2-33-1" class="ccm-layout ccm-layout-table  ccm-layout-name-Main2-Layout-1 "><div class="ccm-layout-row ccm-layout-row-1"><div class="ccm-layout-33-col-1 ccm-layout-cell ccm-layout-col ccm-layout-col-1 first" style="width:100%">   <div id="blockStyle365Main2Layout1Cell140" class=" ccm-block-styles" >
<p><input id="calculator-input" type="text" name="OneRepMax" /> One-rep max</p></div></div><div class="ccm-spacer"></div></div></div></div><div id="ccm-layout-wrapper-700" class="ccm-layout-wrapper"><div id="ccm-layout-main2-32-2" class="ccm-layout ccm-layout-table  ccm-layout-name-Main2-Layout-2 "><div class="ccm-layout-row ccm-layout-row-1"><div class="ccm-layout-32-col-1 ccm-layout-cell ccm-layout-col ccm-layout-col-1 first" style="width:50%"><p><input id="calculator-input" type="text" name="A" /> 50% 1 RM</p>
<p><input id="calculator-input" type="text" name="B" /> 55% 1 RM</p>
<p><input id="calculator-input" type="text" name="C" /> 60% 1 RM</p>
<p><input id="calculator-input" type="text" name="D" /> 65% 1 RM</p>
<p><input id="calculator-input" type="text" name="E" /> 70% 1 RM</p></div><div class="ccm-layout-32-col-2 ccm-layout-cell ccm-layout-col ccm-layout-col-2 last" style="width:49.99%"><p><input id="calculator-input" type="text" name="F" /> 75% 1 RM</p>
<p><input id="calculator-input" type="text" name="G" /> 80% 1 RM</p>

On the second build of the page, I've added the form tags via the WYSIWIG editor since everything is included in a single block. Now the code doesn't execute. Here is the code for that page:

<div class="col-md-9 col-sm-9 col-lg-9">
<script type="text/javascript" src=""></script>
<table id="onerep" class="StackTable">
<td rowspan="2">
<p><input class="calculator-input" type="text" name="WeightLifted" /> Weight Lifted</p>
<p><input class="calculator-input" type="text" name="RepsPerformed" /> Reps Performed</p>
<p> </p>
<input class="calculator-input" type="button" value="Calculate" /><input class="calculator-input" type="reset" name="Reset" value="Reset" /></td>
<td colspan="2" align="CENTER"><center><input class="calculator-input" type="text" name="OneRepMax" /> One-rep max</center></td>
<td width="33%"><input class="calculator-input" type="text" name="A" /> 50% 1 RM<input class="calculator-input" type="text" name="B" /> 55% 1 RM<input class="calculator-input" type="text" name="C" /> 60% 1 RM<input class="calculator-input" type="text" name="D" /> 65% 1 RM<input class="calculator-input" type="text" name="E" /> 70% 1 RM</td>

Can anyone spot an error, or lend some insight into this issue? The only thing I can spot is that the second page (the non-working one) encloses the code in a div with a "row" class, but I don't know why this should effect the execution of the script.

Any help would be much appreciated. If you need more info, I'll be glad to supply it.


EDIT: if anyone stumbles across this thread, I figured out the problem, and it's silly. Turns out, it's helpful to include "onclick="calc(this.form)"" in your form. :p

View Replies: