Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Location
    [The] Union [of Earth and Hell], NJ
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I change type="checkbox" to type="radio" (and back)

    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.
    Last edited by Brian Kessler; 08-18-2005 at 05:08 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •