show and hide

Discussion in 'HTML' started by student4lifer@gmail.com, Sep 10, 2008.

  1. Guest

    Could someone show me how to make the "someFunction()" in javascript
    so that 'Make' and 'Model' appear only if the 'car' checkbox is
    clicked? Thanks.

    ===========

    <table>
    <tr>
    <td></td>
    <td>
    <input name="car" value="T" type="checkbox"
    onclick="someFunction()"> Car
    </td>
    </tr>

    <tr>
    <td>Make:
    </td>
    <td><input id="made" size="20"></td>
    </tr>
    <tr>
    <td>Model:
    </td>
    <td><input id="model" size="20"></td>
    </tr>

    </table>
     
    , Sep 10, 2008
    #1
    1. Advertising

  2. writes:

    > Could someone show me how to make the "someFunction()" in javascript
    > so that 'Make' and 'Model' appear only if the 'car' checkbox is
    > clicked? Thanks.


    JavaScript is off-topic here. Try asking in a JavaScript group, such
    as comp.lang.javascript.

    sherm--

    --
    My blog: http://shermspace.blogspot.com
    Cocoa programming in Perl: http://camelbones.sourceforge.net
     
    Sherm Pendley, Sep 10, 2008
    #2
    1. Advertising

  3. Guest

    On Sep 10, 2:12 pm, Sherm Pendley <> wrote:
    > writes:
    > > Could someone show me how to make the "someFunction()" in javascript
    > > so that 'Make' and 'Model' appear only if the 'car' checkbox is
    > > clicked? Thanks.

    >
    > JavaScript is off-topic here. Try asking in a JavaScript group, such
    > as comp.lang.javascript.
    >
    > sherm--
    >
    > --
    > My blog:http://shermspace.blogspot.com
    > Cocoa programming in Perl:http://camelbones.sourceforge.net


    I got the javascript function() to work on <td> but not on <tr>, once
    I moved the <div> outside the <tr>, it stop working. What am I
    missing? How would one fix this? Below is what I got. Thanks.

    ===========


    <head>
    <script type="text/javascript">
    <!--
    function show(id, checkbox) {
    var visible = (checkbox.checked) ? "block" : "none";
    document.getElementById(id).style.display = visible;
    }
    //-->
    </script>
    </head>

    <table>
    <tr>
    <td></td>
    <td>
    <input name="car" value="T" type="checkbox"
    onclick="show('div1', this)"> Car
    </td>
    </tr>
    <div id="div1">
    <tr>
    <td>Make:
    </td>
    <td><input id="make" size="20"></td>
    </tr>
    <tr>
    <td>Model:
    </td>
    <td><input id="model" size="20"></td>
    </tr>
    </div>
    </table>
     
    , Sep 10, 2008
    #3
  4. writes:

    > On Sep 10, 2:12 pm, Sherm Pendley <> wrote:
    >> writes:
    >> > Could someone show me how to make the "someFunction()" in javascript
    >> > so that 'Make' and 'Model' appear only if the 'car' checkbox is
    >> > clicked? Thanks.

    >>
    >> JavaScript is off-topic here. Try asking in a JavaScript group, such
    >> as comp.lang.javascript.

    >
    > What am I missing?


    The meaning of "off-topic."

    > How would one fix this?


    One would ask in a group where JavaScript is on-topic.

    sherm--

    --
    My blog: http://shermspace.blogspot.com
    Cocoa programming in Perl: http://camelbones.sourceforge.net
     
    Sherm Pendley, Sep 10, 2008
    #4
  5. While the city slept, Sherm Pendley feverishly typed:

    > JavaScript is off-topic here. Try asking in a JavaScript group, such
    > as comp.lang.javascript.
    >


    From http://www.html-faq.com/alt.html/?ontopic

    "Although there are many specialised newsgroups dealing with Javascript,
    CGI, stylesheets, webmastering, questions and discussions about it are still
    welcome in alt.html. You may get a technically better answer in specialised
    newsgroups. Many of the regulars in alt.html are also regulars in these
    specialised groups anyway."

    So, no. Javascript is not off-topic here.

    Cheers,
    Nige

    --
    Nigel Moss | http://www.nigenet.org.uk
    Email not valid. - take the dog out!
    "You're mother ate my dog!", "Not all of him..."
     
    nice.guy.nige, Sep 10, 2008
    #5
  6. Sherm Pendley, Sep 10, 2008
    #6
  7. Roy A. Guest

    On 10 Sep, 22:59, Ben C <> wrote:
    > On 2008-09-10, <> wrote:
    >
    > > On Sep 10, 2:12 pm, Sherm Pendley <> wrote:
    > >> writes:
    > >> > Could someone show me how to make the "someFunction()" in javascript
    > >> > so that 'Make' and 'Model' appear only if the 'car' checkbox is
    > >> > clicked? Thanks.


    [...]

    > Get rid of the div. Put the id on the tr instead, and toggle its display
    > property between "table-row" and "none", rather than between "block" and
    > "none".
    >
    > i.e.:
    >
    >     display = (checkbox.checked) ? "table-row" : "none";
    >     document.getElementById(id).style.display = display;


    IE 6 and IE 7 has no idea of 'table-row', you would be better of using
    an empty string. Then IE can pretend you wanted 'display:block', while
    normal browsers can assume you wantet 'display:table-row', i.e.:

    display = (checkbox.checked) ? "" : "none";

    > That should work, but I haven't tested it, and nothing I say ever works
    > in IE.


    Internet isn't compatible with IE. Internet has to die!

    > You might also want to look at visibility: collapse. I don't know the
    > level of browser support for that either, but in that case you'd be
    > using:
    >
    >     visibility = (checkbox.checked) ? "visible" : "collapse";
    >     document.getElementById(id).style.visibility = visibility;


    IE 6 and IE 7 has no idea of the value 'collapse' for the visibility
    property.

    > And you'd also want to set it on the tr. In any case you have to get rid
    > of the div unless you put in either inside a table-cell or completely
    > outside the table.


    Yes, get rid of the divs. Her is my suggestion:

    <table>
    <tr>
    <td></td>
    <td><input name="car" value="T" type="checkbox"
    onclick="someFunction(this)">Car</td>
    </tr>
    <tr id="make">
    <td>Make:</td>
    <td><input id="made" size="20"></td>
    </tr>
    <tr id="model">
    <td>Model:</td>
    <td><input id="model" size="20"></td>
    </tr>
    </table>

    ....

    <script type="text/javascript">

    var oldonload = window.onload;

    if (typeof oldonload !== 'function') {
    window.onload = someOnloadFunction;
    } else {
    window.onload = function() {
    oldonload();
    someOnloadFunction();
    }
    }

    function someOnloadFunction() {

    document.getElementById("make").style.display = "none";
    document.getElementById("model").style.display = "none";

    }

    function someFunction( checkbox ) {
    display = ( checkbox.checked ) ? "" : "none";
    document.getElementById("make").style.display = display;
    document.getElementById("model").style.display = display;
    }

    </script>

    You might want do the onload part simpler, like:

    <body onload="someOnloadFunction()">

    but that could override other onload functions in external scripts.
     
    Roy A., Sep 11, 2008
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. RA
    Replies:
    1
    Views:
    3,991
  2. Shapper

    Hide and Show Div on Page_Load

    Shapper, May 20, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    12,522
  3. Shapper

    Image Button and Show/Hide Panel

    Shapper, Sep 21, 2005, in forum: ASP .Net
    Replies:
    4
    Views:
    10,301
    Shapper
    Sep 21, 2005
  4. Ather Ali Shaikh

    Q. About Show and Hide Edit and Delete Buttons

    Ather Ali Shaikh, Oct 16, 2003, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    134
    Ather Ali Shaikh
    Oct 16, 2003
  5. ll
    Replies:
    2
    Views:
    653
    Thomas 'PointedEars' Lahn
    May 1, 2008
Loading...

Share This Page