PDA

View Full Version : Loft Height Calculator

jonaha
12-20-2018, 08:09 PM
1) Script Title: Loft Height Calculator

2) Script URL: https://nationalhomestore.com/Loft-Height-Calculator

3) Describe problem: When The Ceiling Height Increases the above dimensions should increase by the same amount. When it decrease is should
decrease by the same amount.

When a customer enters the Minimum Headroom Above Mattress is should change the quantities based on the defaults.

jonaha
12-20-2018, 08:33 PM
<script>
var mattress = form.mattress.value;
var ceiling = form.ceiling.value;
var above = form.above.value;
var leg691 = 0
var leg692 = 0
var leg831 = 0
var leg832 = 0
var trim691 = 0
var trim692 = 0
var trim831 = 0
var trim832 = 0
var underceiling = (ceiling - above - mattress - 3);

form.under691.value = (69 - 5 - mattress - 3);
if (underceiling < form.under691.value) (form.under691.value = underceiling);
form.under831.value = (83 - 5 - mattress - 3);
if (underceiling < form.under831.value) (form.under831.value = underceiling);
form.under692.value = (69 - 10 - mattress - 3);
if (underceiling < form.under692.value) (form.under692.value = underceiling);
form.under832.value = (83 - 10 - mattress - 3);
if (underceiling < form.under832.value) (form.under832.value = underceiling);

form.a691.value = (ceiling - mattress - 3 - form.under691.value);
form.a831.value = (ceiling - mattress - 3 - form.under831.value);
form.a692.value = (ceiling - mattress - 3 - form.under692.value);
form.a832.value = (ceiling - mattress - 3 - form.under832.value);

leg691 = -(-3 - mattress - 5 - form.under691.value);
leg831 = -(-3 - mattress - 5 - form.under831.value);
leg692 = -(-3 - mattress - 10 - form.under692.value);
leg832 = -(-3 - mattress - 10 - form.under832.value);

trim691 = 69 - leg691;
trim831 = 83 - leg831;
trim692 = 69 - leg692;
trim832 = 83 - leg832;

form.top691.value = leg691 - 5;
form.top831.value = leg831 - 5;
form.top692.value = leg692 - 10;
form.top832.value = leg832 - 10;

minabove30 = "Suggestion: We recommend the Minimum Headroom Above the Mattress is 30 inches.";
mattresszero = "Error: The Mattress Thickness must be greater than zero";
mattress40 = "Error: The Mattress Thickness must be less than 40 inches";

if (mattress < 1) alert(mattresszero); // mattress must be greater than zero
if (mattress > 40) alert(mattress40); // mattress can't be greater then 40

}
</script>

<center>
<form method="POST" id="calcform">

<table bgcolor="#ffffff" width="550" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td><h2>Height Calculator</h2>
<h4>How much headroom will I get?<br />
</tr>
<tr>
<td>
<tbody><tr>
<td valign="top">
<div>
<tr>
<td width="74%">Total Mattress Thickness <a href="#" class="hintanchor" onMouseOver="showhint('Enter the total thickness of the mattress and any mattress topper.', this, event, '200px')" style="text-decoration: none; vertical-align: middle; font-weight: 400;color:#900">[?]</a></td>
<td width="26%"><input name="mattress" size="3" value="8" onFocus="select()" maxlength="2"> inches</td>
</tr>
<tr>
<td>Ceiling Height <a href="#" class="hintanchor" onMouseOver="showhint('We need the ceiling height to calculate how much headroom you will get above and underneath.', this, event, '200px')" style="text-decoration: none; vertical-align: middle; font-weight: 400;;color:#900">[?]</a></td>
<td><input name="ceiling" size="3" value="96" onFocus="select()"> inches</td>
</tr>
<tr>
<td>Minimum Headroom Above Mattress <a href="#" class="hintanchor" onMouseOver="showhint('We recommend a minimum of 30 inches of headroom above.', this, event, '200px')" style="text-decoration: none; vertical-align: middle; font-weight: 400;;color:#900">[?]</a></td>
<td><input name="above" size="3" value="" onFocus="select()"> inches</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
</tr>
</table><br /> <br />

<h2><strong><center>Headroom Above &amp; Underneath the Mattress</center></strong></h2><br />

<tr>
<td colspan="2"><strong>Using Standard Single Or Double Safety Rail. The Triple Safety Rail Will Be The 83 In. Tall Bed</strong></td>
</tr>
<tr>
<td><strong>69" Legs</strong></td>
<td><strong>83" Legs</strong></td>
</tr>
<tr>
<td>Above &nbsp;<input name="a691" value="34" size="3" style="color: rgb(255, 0, 0); font-weight: bold;"></td>
<td>Above &nbsp;<input name="a831" value="20" size="3" style="color: rgb(255, 0, 0); font-weight: bold;"></td>
</tr>
<tr>
<td>Underneath&nbsp;<input name="under691" value="56" size="3" style="color: rgb(255, 0, 0); font-weight: bold;"></td>
<td>Underneath&nbsp;<input name="under831" value="70" size="3" style="color: rgb(255, 0, 0); font-weight: bold;"></td>
</tr>
<tr>
<td>Top of Mattress&nbsp;<input name="top691" value="64" size="3" style="color: rgb(255, 0, 0); font-weight: bold;"></td>
<td>Top of Mattress&nbsp;<input name="top831" value="78" size="3" style="color: rgb(255, 0, 0); font-weight: bold;"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

<tr>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>

<center>
<p><img src="media/cms/html/loft_drawing_text.gif" width="485" border="0" height="339"></p>
<tr>
<td height="33%" align="center" valign="top"><h6>Standard 69" Legs<br />Single Safety Rail<br /><img src="media/cms/html/loft_clear_100x97.jpg" width="100" height="97" alt="Standard 69&quot; Legs with Single Safety Rail"></h6></td>
<td height="33%" align="center" valign="top"><h6>Extra Tall 83" Legs<br />Single Safety Rail<br /><img src="media/cms/html/loft_extratall_100x111.jpg" width="100" height="111" alt="Extra Tall 83&quot; Legs with Single Safety Rail"></h6></td>
<td width="33%" align="center" valign="top"><h6>Standard 69" Legs<br />Youth (Double) Safety Rails<br /><img src="media/cms/html/youth_sdc_1468x1480_small1.jpg" width="100" height="100" alt="Standard 69&quot; Legs with Youth (Double) Safety Rails"></h6></td>
</tr>
</table>
<p>&nbsp;</p>
</center>

</div></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>

</form></center>
<script>
</script>

12-21-2018, 01:04 PM
Hi there jonaha,

you could start by sorting out this coding error...

In the javascript there are 5 instances of form.under692.value, but there
is no form element in the HTML with the attribute name="under692".

jonaha
12-21-2018, 04:03 PM
Hi there jonaha,

you could start by sorting out this coding error...

In the javascript there are 5 instances of form.under692.value, but there
is no form element in the HTML with the attribute name="under692".