SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question display dependant text only when a form radio button is clicked on

    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.

  2. #2
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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:
    PHP Code:
    isset($_POST['checkbox_name']) 
    If it has, grab it's value:
    PHP Code:
    $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:
    PHP Code:
    $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.

    Off Topic:

    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.
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  3. #3
    ..back with a vengeance... Ingoal's Avatar
    Join Date
    May 2002
    Location
    Benningen, Germany
    Posts
    6,260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Last edited by Ingoal; Jun 23, 2008 at 16:12.
    Advisor - Community Team
    CHD-magician + + =
    Some of my sites: [1|2|3|4|5|6|7|8|9|10]
    Newest site: ZZ.GD - t dsn't gt mch shrtr thn tht

  4. #4
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ah, I see what you mean.

    JS is what you want, however don't depend on it for validation.

    As for the JS:
    Code javascript:
    function display(id){
        document.getElementById(id).style.display = '';
    }
    function hide(id){
        document.getElementById(id).style.display = 'none';
    }
    Code html:
    <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>
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  6. #6
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  7. #7
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    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.

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    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 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.

    Code html4strict:
    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>

    Code html4strict:
    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.

    Code html4strict:
    <!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.

    Code 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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 its 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 dont 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 isnt 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 dont 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
    (

    ) ( );

    - that encapsulates the entire function?

    Again that you for you time and efforts!

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by msauer View Post
    I noticed the dependent text is enclosed in paragraph tags and the initial question isnt is there a special reason for this?
    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 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.

    Quote Originally Posted by msauer View Post
    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?
    Yes, in fact best practice dictates that you should put scripts at the bottom for best website performance.

    Quote Originally Posted by msauer View Post
    The last piece I understand what it is doing from your explanation but I dont 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?
    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.

    Quote Originally Posted by msauer View Post
    On the last note is it the
    (

    ) ( );

    - that encapsulates the entire function?
    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:

    Code javascript:
    (function () {
        ...
    })();

    A page about functional javascript has a lot of good information about it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

Bookmarks

Posting Permissions

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