Forums

Javascript form executes depending on HTML around it?

Permalink
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:
<FORM>
   <script type="text/javascript" src="http://exrx.net/concrete5.6/js/onerepmax.js"></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>
Viewing 15 lines of 20 lines. View entire code block.


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">
      <form>
<script type="text/javascript" src="http://exrx.net/concrete5.6/js/onerepmax.js"></script>
<table id="onerep" class="StackTable">
<tbody>
<tr>
<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>
</tr>
<tr>
<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>
Viewing 15 lines of 20 lines. View entire code block.


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