Jump to content

Check a box --> Expand selection options

Recommended Posts

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.





Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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">
Link to post
Share on other sites

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>
Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...