Check a box --> Expand selection options

[Chrex]

Hi guys,

 

Im looking for a propper solution to expand selection options. I want the user to answer a question with "yes" or "no". if the user clicks "yes", there shall appear more selection options. If the user clicks "no" the additional selection options shall not be shown.

The second question in my code shall be hidden, except the user clicks "yes". In this case i dont want the user to click submit, the second question shall appear immediately with the click on "yes".

<form action="checkboxen.php" method="post"><p>Do you have a car?</p>   <input type="checkbox" name="yesno" value="yes">Yes<br/>   <input type="checkbox" name="yesno" value="no"/>NO<br/><p>How many cars do you have?</p>   <input type="checkbox" name="number" value="1"/>ONE<br/>   <input type="checkbox" name="number" value="2"/>TWO<br/>   <input type="checkbox" name="number" value="3"/>THREE<br/>   <input type="submit" value="Submit"/></form>

Im grateful for any ideas, examples and help.

 

Chrex

 

 

[niche]

Have you completed the js tutorials?

 

http://www.w3schools.com/js/default.asp

[Chrex]

Thanks for the hint. Im not familiar with js. Usually I prefer php, but couldnt find an easy and propper solution.

 

Could you tell me where exactly I have to look for "expand selection options" at your recommended link?

Or do I have to start from the very beginning? In this case I would switch to the php forum.

[Ingolme]

What you have to do is use Javascript to listen to an event and then change the visibility of the elements using element.style.display = "none" or element,.style.display = "" (empty string to revert to the default state)

 

This is not a PHP task because you want the page to change without having to reload it.

[Chrex]

Guys, you are great! That was the hint I needed! Here the code from w3schools:

<img id="myImg" src="w3javascript.gif" width="100" height="132"><br><button type="button" onclick="hideElem()">Hide image</button><button type="button" onclick="showElem()">Show image</button><script>function hideElem() {    document.getElementById("myImg").style.visibility = "hidden"; }function showElem() {    document.getElementById("myImg").style.visibility = "visible"; }</script>

There is still one question left. How can I "delete" the white space which appears when I hide the element? I read something about display:none. But I have no idea how to use it. I tried to hide a table....that works....but the following doesnt:

<table class="Table"  display="none" id="abc">

[Ingolme]

Instead of using style.visibility, use style.display as I mentioned in my previous post.

[Chrex]

You are so right! Thanks!

[Chrex]

How can I hide (display="none") the table from the beginning on?

 

1. I tried to edit the ccs of the table. --> The table is always hidden, even by clicking "show".

.Table {    display:none;}

2. I tried to tell the js to hide the table first and by clicking "show" to show the table. --> Table is shown from the beginning on.

<script type="text/javascript">document.getElementById("agbs").style.display = "none";function hideElem() {    document.getElementById("agbs").style.display = "none"; }function showElem() {    document.getElementById("agbs").style.display = ""; }</script>

3. I tried to give js a variable from php. --> I guess that is not possible.

<script type="text/javascript">var ABC ="<?php echo $ABC ?>";if (ABC = ""){    document.getElementById("agbs").style.display = "none";}function hideElem() {    document.getElementById("agbs").style.display = "none"; }function showElem() {    document.getElementById("agbs").style.display = ""; }</script>

[Ingolme]

1. When Javascript sets display to an empty string, the element takes whatever value the CSS was giving, which is "none" in your case. If you want to override the CSS you'll have to set it explicitly to "block", "inline", "table" or whatever type of display the element is supposed to have when it's visible.

 

2. Make sure that the script is being called after the element has loaded. The <script> tag should be further down in the document than the element it is referencing.

 

3. Yes, PHP can send data to Javascript. The reason that script wouldn't work is firstly because of what I said in point 2. Secondly, you're using the assignment operator "=" when you should be using the comparison operator "==" in your if() statement.

[Chrex]

So easy....I took option (2.). It was just the position of the script. Thanks!