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,569
    Thanks
    3
    Thanked 515 Times in 502 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
    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
    •