[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

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

ZenCart and javascript form calcuations not working?

I have a little calculation routine in javascript that works with a form on a page in ZenCart.. I can't seem to get it to work.  Does anyone have any ideas?

The page can be viewed here:
http://gaultav.com/ZenCart/index.php?main_page=page&id=4

Here's the code for this part of the page:
<script type="text/javascript">
function calcDistance()
{
var height = document.distance.height.value
var distance = height * 8
document.distance.answer.value = Math.round(distance/12*100)/100
}
</script>
<table cellspacing="5" cellpadding="5" background="tableback.jpg" align="center" width="80%" style="">
    <tbody>
        <tr>
            <th align="center" colspan="2"><span style="font-size: large;"><span style="font-family: Times New Roman;">MONITOR VIEWING DISTANCE CALCULATOR</span></span></th>
        </tr>
        <tr>
            <td align="center" colspan="2"><span style="font-size: large;"><span style="font-family: Times New Roman;">Enter the monitor <u>display height</u> in inches, then press the CALCULATE button:</span></span></td>
        </tr>
        <tr>
            <form name="distance">
                <span style="font-size: large;"><span style="font-family: Times New Roman;">                 &nbsp;             </span></span>
            </form>
            <td align="right"><span style="font-size: large;"><span style="font-family: Times New Roman;"><input type="text" name="height" size="6" style="" /></span></span></td>
            <td align="left"><span style="font-size: large;"><span style="font-family: Times New Roman;"><input type="button" class="btn" onmouseover="this.className='btnon'" onmouseout="this.className='btn'" value="Calculate" onclick="javascript:calcDistance();" />&nbsp;</span></span></td>
        </tr>
        <tr>
            <td align="right"><span style="font-size: large;"><span style="font-family: Times New Roman;">Maximum Viewing Distance:</span></span></td>
            <td align="left"><span style="font-size: large;"><span style="font-family: Times New Roman;"><input type="text" name="answer" size="6" />&nbsp;&nbsp;FEET</span></span></td>
        </tr>
    </tbody>
</table>

Open in new window

0
LittleOleMeDesigns
Asked:
LittleOleMeDesigns
1 Solution
 
fsze88Commented:
all the input tag must be included by form tag
<script type="text/javascript">
function calcDistance()
{
var height = document.distance.height.value
var distance = height * 8
document.distance.answer.value = Math.round(distance/12*100)/100
}
</script>
<table cellspacing="5" cellpadding="5" background="tableback.jpg" align="center" width="80%" style="">
    <tbody>
        <tr>
            <th align="center" colspan="2"><span style="font-size: large;"><span style="font-family: Times New Roman;">MONITOR VIEWING DISTANCE CALCULATOR</span></span></th>
        </tr>
        <tr>
            <td align="center" colspan="2"><span style="font-size: large;"><span style="font-family: Times New Roman;">Enter the monitor <u>display height</u> in inches, then press the CALCULATE button:</span></span></td>
        </tr>
        <tr>
            <form name="distance">
                <span style="font-size: large;"><span style="font-family: Times New Roman;">                               </span></span>
            <td align="right"><span style="font-size: large;"><span style="font-family: Times New Roman;"><input type="text" name="height" size="6" style="" /></span></span></td>
            <td align="left"><span style="font-size: large;"><span style="font-family: Times New Roman;"><input type="button" class="btn" onmouseover="this.className='btnon'" onmouseout="this.className='btn'" value="Calculate" onclick="javascript:calcDistance();" /> </span></span></td>
        </tr>
        <tr>
            <td align="right"><span style="font-size: large;"><span style="font-family: Times New Roman;">Maximum Viewing Distance:</span></span></td>
            <td align="left"><span style="font-size: large;"><span style="font-family: Times New Roman;"><input type="text" name="answer" size="6" />  FEET</span></span></td>
            </form>
        </tr>
    </tbody>
</table>

Open in new window

0
 
LittleOleMeDesignsAuthor Commented:
AWESOME!!  I had a feeling it was going to be something simple.. I just couldn't figure it out.  Thank-You!!
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.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now