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 3 of 3
  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

    Erronious behavior toggling display:none and display:inline

    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.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    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=

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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