I am working a form and it has several questions that contain yes/no option buttons. What I would like to do is when the user selects yes - be able to display another question with a yes/no option as well. The idea is not to show the dependent questions unless the user selects yes.
Help Please, I have tried searches on the internet but I can’t seem to pose the search in a way to receive helpful results. Any suggestions would be greatly appreciated.
Welcome to the forums!
You won’t find any answers unless you specify what server-side language you are using, if any.
If you aren’t using any server-side language - you will need to. There are alot of options - PHP being the most popular and easiest (but it can get very advanced), Java being the hardest, but most paid. ASP.Net is also a good choice.
Each technology processes forms in very different ways. I only program in PHP for web development (I do use Java and C# on the desktop applications, but not on the web side so I can’t say for sure).
So in PHP you would check if it had been sent with the form first, using:
isset($_POST['checkbox_name'])
If it has, grab it’s value:
$value = $_POST['checkbox_name'];
If the option is going into a database, or requires database queries to find specific data for that option, escape it first:
$value = mysql_real_escape_string($value);
The rest depends on what technology you are using.
State that, and the moderators will move this thread to the relevent forum, where you will get better help.
As you are new, I should tell you this: If the forums load slowly, don’t let it put you off sitepoint. It is only a temporary issue, which will be resolved soon. Sitepoint is the best web development forum/community around.
Welcome to the forums, I moved your thread to general development issues until you specify the programming language - then it can be moved again to the respective subforum 
Edit: Moved to JavaScript…
Ingo 
Thank you for the response and tips for the newbie 
- I will be more specific
Eventually this form will be processed by PHP and and the data captured will go into a database using MySQL but definitely not there yet 
The PHP code posted will come in handy when its time to process the form so I will make a note of it - got it get passed the front end of it first, I guess.
So at the moment I am focusing on the front end of the form - quite straight forward but I am stuck. In brief, I wish to show text only when a user clicks on the yes option button.
I am displaying the initial question and I figured out that I can hide the second and third question - which I want to show only if the user clicks yes - by using style=“display:none” in the label for it. These two questions also contain yes/no option buttons. Now I guess I need some client side scripting - ?javascript?? maybe, to tell the form to show it if the user clicks on the yes option - correct?
I hope this is a bit clearer - tough since I am confused myself Again thank you for your time, patience and support.
Ah, I see what you mean.
JS is what you want, however don’t depend on it for validation.
As for the JS:
function display(id){
document.getElementById(id).style.display = '';
}
function hide(id){
document.getElementById(id).style.display = 'none';
}
<option onclick="display(message1);" name="option1" value="yes">Yes</option>
<option onclick="hide(message1);" name="option1" value="no">No</option>
<div id="message1">Hello</div>
Thank you for the response really appreciate it.
Please bare with me as I sort my thoughts out - I somewhat understand what is happening here but I am not getting it.
I am not placing the “div tag” appropriately and that might be why this is not working for me but for all I know I could totally be off. Here is a sample - please point out where I am going wrong.
<head>
<title>Untitled Document</title>
<script type=“text/javascript” >
function display(id){
document.getElementById(id).style.display = ‘’;
}
function hide(id){
document.getElementById(id).style.display = ‘none’;
}
</script>
</head>
<body>
<table>
<tr>
<td><label>The initial question…blah blah.
<input type=“radio” name=“initial_Q” value=“Yes” onclick=“display(message1)”; />Yes</label><label>
<input type=“radio” name=“initial_Q” value=“No” onclick=“hide(message1)”; />No</label></td>
</tr>
<tr>
<td>
<div id =“messsage1”>
<label for = “initial_a” id=“initial_a” style=“display:none”>Initial Question part a…?
<input type=“radio” name=“initial_a” value=“Yes” />Yes
<input type=“radio” name=“initial_a” value=“No” />No</label>
</td>
</tr>
<tr>
<td>
<label for = “initial_b” id=“initial_b” style=“display:none”>Initial Question part b…?
<input type=“radio” name=“initial_b” value=“Yes” />Yes
<input type=“radio” name=“initial_b” value=“No” />No</label>
</div>
</td>
</tr>
</table>
</body>
</html>
This is a bit cleaner but I still can’t get it to work. Thoughts on what I am doing wrong?
<table>
<tr>
<td><label>The initial question…blah blah.
<input type=“radio” name=“initial_Q” value=“Yes” onclick=“display(message1)” />Yes
<input type=“radio” name=“initial_Q” value=“No” onclick=“hide(message1)”/>No</label></td>
</tr>
<tr>
<td>
<div id =“messsage1” style=“display:none”>
<label for = “initial_a” id=“initial_a” >Initial Question part a…?</label>
<input type=“radio” name=“initial_a” value=“Yes” />Yes
<input type=“radio” name=“initial_a” value=“No” />No
<label for = “initial_b” id=“initial_b” >Initial Question part b…?</label>
<input type=“radio” name=“initial_b” value=“Yes” />Yes
<input type=“radio” name=“initial_b” value=“No” />No
</div>
</td>
</tr>
</table>
The closing label tag should not encompass the input elements. Move the closing label tag to the end of the “blah blah” line.
The inline events run functions called display() and hide() that you should check if they exist or not. If they don’t exist then you will need them.
function display(id) {
document.getElementById(id).style.display = '';
}
function hide(id) {
document.getElementById(id).style.display = 'none';
}
The onclick events are passing a variable called message1. I suspect that you want them to pass the string value instead ‘message1’
The identifier for the div is misspelled
The initial options default to Yes, but the area isn’t displayed. Either switch them around so that No is the default option, or place checked=“checked” on the radio input for No.
Now for a bonus. Let’s tidy up the html code, so that we can make further progress with the script.
HTML attributes must not have spaces on either side of the equals sign.
Labels are used to enable visitors to more easily select form elements. When someone clicks on the text for “Yes” the label should activate the yes radio button.
Labels should not be used to surround multiple form elements.
The W3C provide details about the label element, but other places have good information about it too, such as the [URL=“http://webdesign.about.com/od/htmltags/p/bltags_label.htm”]about.com label element page.
Suffice it to say, if the label and form element are separate, the for attribute and matching id attribute are required to link them together. if the form element is inside the label, they are implicitly related without needing the for or id attributes.
So which to use? Let’s compare the two.
The initial question........blah blah.
<label><input type="radio" name="initial_Q" value="Yes" />Yes</label>
<label><input type="radio" name="initial_Q" value="No" />No</label>
The initial question........blah blah.
<input type="radio" name="initial_Q" id="initial_Q_yes" value="Yes" />
<label for="initial_Q_yes">Yes</label>
<input type="radio" name="initial_Q" id="initial_Q_no" value="No" />
<label for="initial_Q_no">No</label>
The id attributes make it easier to target certain parts from javascript, but the html is tidier without the id attributes all over the place and the parts er want to reach are easily accessible via the forms collection.
I’ve taken the liberty of including the code in an XHTML template, with a form identified as “questions” so that we can easily affect things from javascript.
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Test</title>
</head>
<body>
<form id="questions" action="process.php">
<table>
<tr>
<td>
The initial question........blah blah.
<label><input type="radio" name="initial_Q" value="Yes" />Yes</label>
<label><input type="radio" name="initial_Q" value="No" />No</label>
</td>
</tr>
<tr id="message1">
<td>
<p>
Initial Question part a....?
<label><input type="radio" name="initial_a" value="Yes" />Yes</label>
<label><input type="radio" name="initial_a" value="No" />No</label>
</p>
<p>
Initial Question part b....?
<label><input type="radio" name="initial_b" value="Yes" />Yes</label>
<label><input type="radio" name="initial_b" value="No" />No</label>
</p>
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="script.js">
</script>
</body>
</html>
Now we can focus properly on the javascript.
(function () {
function display(id) {
document.getElementById(id).style.display = '';
}
function hide(id) {
document.getElementById(id).style.display = 'none';
}
var frm = document.getElementById('questions');
var qyes = frm.elements.initial_Q[0];
var qno = frm.elements.initial_Q[1];
qyes.onclick = function () {
display('message1');
};
qno.onclick = function () {
hide('message1');
};
qno.click();
qno.onclick();
})();
The last two statements ensure that the no option is selected, and that the event for the no option is fired, ensuring that the section remains hidden when the page loads.
And as a final touch, the whole lot is wrapped in a self-executing anonymous function, which ensures that the environment doesn’t become polluted with functions and variables, helping to keep things nice and clean.
This is great! - I really appreciate the time and effort you put into the breakdown; thanks it is very helpful to a novice like me. I hope it serves another in the same situation. I lost my sanity there for a bit and now it’s starting to find its way back. I have a few comments and or questions below please correctly if I am misinterpreting anything,
In the html, the links were helpful.
I don’t need a div tag – the id can go directly into the table row tag, correct.
I noticed the dependent text is enclosed in paragraph tags and the initial question isn’t – is there a special reason for this?
I thought external links had to be in the head section – but you are using it at the bottom – this is ok to do at any time?
In the external code,
The first 2 functions set the style to display or not to display
The 1st variable listed addresses the form per the name given
The 2nd variable addresses the 1st of the 2 form elements for the initial_Q and puts its value in the variable which in this case is qyes
The 3rd variable addresses the 2nd of the 2 form elements for the initial_Q and puts its value in the variable which in this case is qno
The qyes.onclick is the event that is triggered when yes is clicked – then displaying the dependent questions
The qno.onclick is the event that is triggered when no is clicked – then nothing is displayed or if something is displayed – it will become hidden
The last piece I understand what it is doing from your explanation but I don’t see it. You address the variable qno and use the click() and onclick() but there is nothing in the parenthesis so how is it telling the form to make sure qno element is set to no? and to remain hidden?
On the last note – is it the
(
) ( );
Again that you for you time and efforts!
The paragraphs are to help separate the content onto separate lines.
Some poeple use breaks, some use divs, some use paragraphs. Fights have broken out over which one is considered better.
Myself, I’m paying attention to the upcoming HTML5, which has certain things to say about the div element and [URL=“http://www.w3.org/html/wg/html5/#the-br”]the br element.
Specifically, “Allowing div elements to contain phrasing content makes it easy for authors to abuse div” and “br elements must be used only for line breaks that are actually part of the content, as in poems or addresses”, and also shows good and bad uses of it (separating form elements is abuse of the br element)
The p element is the only one that’s considered suitable for separating form elements.
Yes, in fact best practice dictates that you should put scripts at the bottom for best website performance.
If qno.click() wasn’t there and there was only the qno.onclick() statement, the content would be hidden but the form on the page wouldn’t change, resulting in problems like nothing being selected, or the yes option being selected but with no content showing.
By activating a click on the no option, the onscreen display of the form matches up with the behaviour that we have performed. It might be possible to get away with just having qno.click() occur, but I think I recall there being some browser compatibility issues with just that, so calling both is a “belts and braces” approach, which helps to ensure the desired effect is achieved.
The self-invoking anonymous function provides closure for the variables, so that they are accessible only from within that area itself, which helps to prevent them from being messed with by anything else.
The structure of the self-invoking anonymous function is as follows:
(function () {
...
})();
A page about functional javascript has a lot of good information about it.