...

View Full Version : How do I change type="checkbox" to type="radio" (and back)



Brian Kessler
08-18-2005, 05:03 PM
I'm currently working on a form which collects order information from a customer.

I want to offer him three choices, rolled, stretched, or framed.

If the custoemr is only ordering a single copy of the product, the choice should be radio buttons since he should only be able to select one.

On the other hand, if the customer is ordering multiple copies, he can receive some of each, in which case the choice should be checkboxes.


I *thought* I figured out a good way to do this, but IE disagreed presenting the following error: "Could not get the type property. This command is not supported."


While I can think of an ineligant work around which would involve including extra input elements that would be hidden and then toggling which would be displayed, I'm hoping to come up with a cleaner solution.

Also, I don't want to simply eliminate the checkboxes/radio-buttons because (a) I am trying to more or less match a paper form, and (b) I'll want the value for processing later.



Here is the relevant portions of the HTML code I am working with:


<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum