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 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    78
    Thanks
    13
    Thanked 3 Times in 3 Posts

    JS Visibility from Radio button..?

    I'm trying to implement a visibility on or off function for extra inputs when a radio button that is "yes" inside a table...

    it's so "Are you married?" "Yes" "No" (no is default checked)
    when you hit yes I want 3 more rows like a collapse or extend feature...within the same table.

    So basically what I want is the table to grow.. If you select "yes" then 3 more rows will be displayed that have other inputs available...

    do I need to construct these extra rows in javascript? or can I referance some html to do something? ..I'm just kinda lost and brain farted out today I think...
    any help much appreciated.

    Thanks!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,239
    Thanks
    203
    Thanked 2,554 Times in 2,532 Posts
    You arre not very specific, but this example should move you forward:-

    Code:
    <html>
    <head>
    <script type = "text/javascript">
    
    var rowCount=1;
    
    function addRow() {
    rowCount++;
    
    var content1='<input type="text" name="text'+rowCount+'A" value = "ABC">';
    var content2='<input type="text" name="text'+rowCount+'B" value = "DEF">';
    var content3='<input type="text" name="text'+rowCount+'C" value = "GHJ">';
    var content4='<input type="text" name="text'+rowCount+'D" value = "KLM">';
    
    tabBody=document.getElementsByTagName("TBODY").item(0);
    row=document.createElement("TR");
    cell1 = document.createElement("TD");
    cell2 = document.createElement("TD");
    cell3 = document.createElement("TD");
    cell4 = document.createElement("TD");
    cell1.innerHTML=content1;
    cell2.innerHTML=content2;
    cell3.innerHTML=content3;
    cell4.innerHTML=content4;
    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    row.appendChild(cell4);
    tabBody.appendChild(row);
    }
    
    function getRows() {
    var x = document.myform.addNewRow.value;
    document.myform.addNewRow.value = 0;
    for (var i = 1; i <=x; i++) {
    addRow('mytable');
    }
    
    }
    
    </script>
    
    </head>
    <body>
    
    <form name = "myform">
    <select name = "addNewRow" id = "addNewRow" onchange = "getRows()">
    <option value="0">Select Number Of Rows To Add</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    </select>
    <br><br>
    
    <table id='mytable'>
    <tbody>
    
    <TR>
    <TD><b>COLUMN 1</b></TD>
    <TD><b>COLUMN 2</b></TD>
    <TD><b>COLUMN 3</b></TD>
    <TD><b>COLUMN 4</b></TD>
    </TR>
    
    <TR>
    <TD><input name="text1A" value = "ABC"></TD>
    <TD><input name="text1B" value = "DEF"></TD>
    <TD><input name="text1C" value = "GHJ"></TD>
    <TD><input name="text1D" value = "KLM"></TD>
    
    </TR>
    
    </tbody>
    </table>
    </form>
    </body>
    </html>

    "Knowledge is of no value unless you put it into practice.” -Anton Chekhov (Russian playwright and master of the modern short story, 1860-1904)

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    78
    Thanks
    13
    Thanked 3 Times in 3 Posts
    Thanks for that!
    it definitely helps me visualize the right track but your right i could've explained better.

    -----> Here is a better look at the form <----

    And on there you'll see the "Are you married?" question pretty close to the top..
    the 3 rows after that(Spous's Name, job, b-day) are the ones I want to hide and show at will of the "Are you Married?" radio buttons.. hope that makes more sense ..
    like if you click the yes button those three rows will show and if you hit no they'll collapse..
    Thanks Again!
    Last edited by joanzn; 02-09-2011 at 10:18 PM.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,239
    Thanks
    203
    Thanked 2,554 Times in 2,532 Posts
    It is far easier to place the three questions in a div which you show/hide according to the radio button selection:

    Code:
    <form name = "myform">
    
    Are you married? <input type = "radio" name = "rad1" onclick = "showDiv()" >Yes
    <input type = "radio" name = "rad1" onclick = "showDiv()" >No
    
    <div id = "mydiv" style="display:none">
    Spouse Name <input type = "text" name = "spname"><br>
    Spouse Job <input type = "text" name = "spjob"><br>
    Spouse Birthday <input type = "text" name ="spbday"><br>
    </div>
    
    </form>
    
    <script type = "text/javascript">
    function showDiv() {
    var f = document.myform;
    f.spname.value = "";  // clear the entries if "No" selected"
    f.spjob.value = "";
    f.spbday.value = "";
    var d = document.getElementById("mydiv");
    d.style.display="none";
    if (document.myform.rad1[0].checked) {  // show div if "Yes" selected
    d.style.display="block";
    }
    }
    </script>

  • Users who have thanked Philip M for this post:

    joanzn (02-10-2011)

  • #5
    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
    Take care. The fact that a form's control is hidden (with display:none or visibility:hidden) does not move him away from the submit query (in case you want to send data to a data base). Whenever you make a control hidden, make sure to make it disabled (and, maybe, give him back his default value). And, when make it visible again, remove its disabled property
    Code:
    form_element.style.display='none';
    form_element.value=form_element.defaultValue;
    form_element.setAttribute('disabled','disabled');
    //
    form_element.style.display='';
    form_element.removeAttribute('disabled');
    Last edited by Kor; 02-10-2011 at 01:57 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    78
    Thanks
    13
    Thanked 3 Times in 3 Posts
    I did exactly wut u said with the div just ended the tbody and table after the radio buttons and started a new table and tbody with the div wrapping it.. THANK YOU!

    I'm dealing with some crapper coded structure (of course) so I've been editing it the best I can along the way trying to get the JS to work. FINALLY!

    THANK YOU AGAIN

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,239
    Thanks
    203
    Thanked 2,554 Times in 2,532 Posts
    Quote Originally Posted by Kor View Post
    Take care. The fact that a form's control is hidden (with display:none or visibility:hidden) does not move him away from the submit query (in case you want to send data to a data base). Whenever you make a control hidden, make sure to make it disabled (and, maybe, give him back his default value). And, when make it visible again, remove its disabled property
    Code:
    form_element.style.display='none';
    form_element.value=form_element.defaultValue;
    form_element.setAttribute('disabled','disabled');
    //
    form_element.style.display='';
    form_element.removeAttribute('disabled');
    Why bother to disable the form fields if they are hidden? Rather do what I have suggested and switch to the default values of "" if the user changes his radio button selection to "no".

  • #8
    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
    Quote Originally Posted by Philip M View Post
    Why bother to disable the form fields if they are hidden? Rather do what I have suggested and switch to the default values of "" if the user changes his radio button selection to "no".
    And what about if some radio buttons are to be hidden? Isn't it better to have a general approach for all kind of elements?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,239
    Thanks
    203
    Thanked 2,554 Times in 2,532 Posts
    Quote Originally Posted by Kor View Post
    And what about if some radio buttons are to be hidden? Isn't it better to have a general approach for all kind of elements?
    Why make up imaginary difficulties? There is no suggestion that the radio buttons are to be hidden.

    But I agree that there is no harm in disabling the textboxes as well as clearing them. It just seems superfluous.


  •  

    Tags for this Thread

    Posting Permissions

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