...

View Full Version : Erronious behavior toggling display:none and display:inline



Brian Kessler
08-18-2005, 07:13 PM
If this HTML and script looks familiar because it's another problem with the same segment of code that I am working on in my last post.

The desired and expected behaviour: if and when the "limited" checkbox is selected, the *_amount textboxes (or more precisely, the containing spans) should become visible for "stretched" and "framed" when they have been selected. They are each set to "display:none;" in a CSS file.

In most regards, the script works perfectly. Except framed_amount only displays if "framed" is checked _after_ "limited" is checked. If "framed" is checked first, "rolled" or "stretched" and then "framed" must be selected for "framed_amount" to work.

Meanwhile, the code for "stretched" (which seems the same to me) works perfectly...



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
</title>
</head>
<body>
<form id="order_form" name="order_form" method="post"
action="process_orderdetails.php">
<table>
<tr>
<td class="option">
<input id="rolled" name="framed" type="radio" value="rolled"
checked="checked"
onclick="javascript:stretched_or_framed(this.value);" />Deliver
Rolled
</td>
<td class="selection">
<div id="rolled_select" name="rolled_select">
</div>
</td>
<td class="quant">
<span id="rolled_quant"></span>
</td>
<td class="cost">
<span id="rolled_cost"><em>Pre~Paid</em></span>
</td>
<td class="total">
<span id="rolled_total"><em>Pre~Paid</em></span>
</td>
</tr>
<tr>
<td class="option">
<input id="stretched" name="framed" type="radio" value="stretched"
onclick="javascript:stretched_or_framed(this.value);reprice();" />Stretched
Canvas
</td>
<td class="selection">
<div id="stretched_select" name="stretched_select">
Gallery wrapped around wood bars
</div>
</td>
<td class="quant">
<span id="stretched_quant"><input id="stretched_amount"
name="stretched_amount" class="opt_quant" width="20px" length="3"
maxlength="3" value="1"
onchange="javascript:validate_numbers('Quantity',this);reprice();" />
</span>
</td>
<td class="cost">
<span id="stretched_cost" name="stretched_cost" default="17.99"
b="21.99" c="29.99">17.99</span>
</td>
<td class="total">
<span id="stretched_total">17.99</span>
</td>
</tr>
<tr>
<td class="option">
<input id="framed" name="framed" type="radio" value="framed"
onclick="javascript:stretched_or_framed(this.value);reprice();" />Custom
Framed
</td>
<td class="selection">
<div id="framed_select" name="framed_select">
<select name="framed_offers">
<option value="black">
Black
</option>
<option value="mahogany">
Mahogany
</option>
<option value="gold">
Gold
</option>
<option value="silver">
Silver
</option>
</select>
</div>
</td>
<td class="quant">
<span id="framed_quant"><input id="framed_amount"
name="framed_amount" class="opt_quant" width="20px" length="3"
maxlength="3" value="1"
onchange="javascript:validate_numbers('Quantity',this);reprice();" />
</span>
</td>
<td class="cost">
<span id="framed_cost" name="framed_cost" default="54.99" b="64.99"
c="74.99">54.99</span>
</td>
<td class="total">
<span id="framed_total">54.99</span>
</td>
</tr>

<tr>
<td class="option">
<input id="limited" name="limited" type="checkbox" value="limited"
onclick="javascript:select_toggle(this);limited_selections();reprice();"
onchange="javascript:select_toggle(this);limited_selections();reprice();" />
Limited Editions
</td>
<td class="selection">
<div id="limited_select" name="limited_select">
Stretching or Frames not included
</div>
</td>
<td class="quant">
<span id="limited_quant"><input id="limited_amount"
name="limited_amount" class="opt_quant" width="20px" length="3"
maxlength="3" value="1"
onchange="javascript:validate_numbers('Quantity',this);reprice();" />
</span>
</td>
<td class="cost">
<span id="limited_cost" name="limited_cost" default="24.99"
b="29.99" c="34.99">24.99</span>
</td>
<td class="total">
<span id="limited_total">24.99</span>
</td>
</tr>
</table>
</form>
</body>
</html>



And here is the javascript function I'm having problems with:

function limited_selections()
{
if (!order_form.limited.checked)
{
if (document.getElementById('stretched') != null)
{
order_form.stretched.type = "radio";
if (!order_form.stretched.checked)
{
stretched_quant.style.display="none";
}
}
if (document.getElementById('framed') != null)
{
order_form.framed.type = "radio";
if (!order_form.framed.checked)
{
framed_quant.style.display="none";
}
}
}
else
{
if (document.getElementById('stretched') != null)
{
order_form.stretched.type = "checkbox";
if (order_form.stretched.checked)
{ stretched_quant.style.display="inline"; }
}
if (document.getElementById('framed') != null)
{
order_form.framed.type = "checkbox";
if (order_form.framed.checked)
{ framed_quant.style.display="inline"; }
}
}
}



Thanks in advance for any / all help!


Sincerely,

-Brian Kessler.

vwphillips
08-18-2005, 10:43 PM
if the style display is set in a class

it will not be recognised by JS conditional

if (........style.display=='.......')

the style must be set by inline style or by JS style.display=

Kor
08-19-2005, 02:29 PM
No, it is not that... I guess that Brian Kessler used the reference improperly


stretched_quant.style.display="none";
should be
document.getElementById('stretched_quant').style.display="none";

and so on



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum