• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 719
  • Last Modified:

How do I disable (grey out) everything between div tags when a No is selected from a drop down

Hi,

I'm creating a webform in php & html. I have a series of questions and related subquestions.
I'd like the subquestion content to be greyed out unless the user selects 'Yes' as the drop down answer to the parent question.

For example,
Question 1) Did the client need support to better manage mental health ?
if the user picks yes from the drop down. The following questions will no longer be greyed out.
Question 1a) Was support given?
Question 1b) Are they better managing their mental health?

The questionnaire is being created in a HTML table.  I thought the best way to do this was to have the subquestions and their related descriptions between div tags. I could then disable the content between the div tags as default and enable if the user answers yes to the parent question.

I've attached a sample of the code, but i've no idea how to disable the table rows and other form selection boxes between the div tags.

thanks.



<h2> Clients Project Outcome Questionnaire </h2>
		<form method="post" name="theForm">  
		
		
		
		
		
		
		<table id="section_e">
		<tr><td class="headerblock" colspan="4">1  Achieve Economic Wellbeing </td></tr>
    	<td width="30">1a)</td>
        <td colspan="2">Did the client need support to maximise their income, including receipt of the correct welfare benefits?</td>
        <td><select id="1a_MaxIncome" name="1a_MaxIncome" class="need" onChange="Javascript:autoSubmit();">
        	
            	<option value="0" '; if ($q1a == '0') {echo ' selected="selected"';} echo '>Missing</option>
            
            	<option value="1" '; if ($q1a == '1') {echo ' selected="selected"';} echo '>Yes</option>
            
            	<option value="2" '; if ($q1a == '2') {echo ' selected="selected"';} echo '>No</option>
            
        </select></td>
    </tr>
    ';
	
	//Question 1a Result
	if ($q1a == '1')
	
  // If $qla is set to 1 (i.e. Yes) enable the content in the DIV tag
<div> //Start div tag
  echo '<tr>
    	<td></td>
    	<td class="userinfo" colspan="2">If No, please go to the next question - Question 1b)</td>
    </tr>
    <tr>
    	<td></td>
    	<td class="userinfo" colspan="2">If Yes, please continue</td>
    </tr>
    <tr>
    	<td></td>
     	<td colspan="2">Actual outcome for the client -<br />
        Has the client now maximised their income, including the receipt of the correct benefits?</td>
        <td><select id="Outcome_1a" name="Outcome_1a" class="outcome">
        	
            	<option value="0">Missing</option>
            
            	<option value="1">Yes</option>
            
            	<option value="2">No</option>
            
        </select></td>
	</tr>
	<tr>
    	<td></td>
    	<td colspan=2>If the outcome did not happen, please provide reasons:</td>
    </tr>
	<tr>
    	<td></td>   
    	<td>Main reason:</td>
		<td>'; 
		
		
		   // Create dropdown Support Need table lookup list
$queryreason1a = "SELECT spOutcomesID, type, description FROM outcomes_linktable tb2
LEFT OUTER JOIN outcome_categories tb3 ON tb2.id = tb3.id
WHERE spOutcomesQuestion = '1a'
ORDER BY spOutcomesID";

$resultreason1a = @mysql_query ($queryreason1a); // Run the query.

echo '<select id="Reason_1a_Primary" name="Reason_1a_Primary" class="reason">';

while($rowreason1a = mysql_fetch_array($resultreason1a, MYSQL_NUM))
{
echo '<option value="'.$rowreason1a[0].'">'.$rowreason1a[1].' -> '.$rowreason1a[2].'</option>';
}

echo '</select></td>
    </tr>
	<tr>
    	<td></td>
    	<td>Second reason (optional):</td>
        <td><select id="Reason_1a_Second" name="Reason_1a_Second" class="reason">';
$resultreason1a = @mysql_query ($queryreason1a); // Run the query.
while($rowreason1a = mysql_fetch_array($resultreason1a, MYSQL_NUM))
{
echo '<option value="'.$rowreason1a[0].'">'.$rowreason1a[1].' -> '.$rowreason1a[2].'</option>';
}

echo '</select></td>
    </tr>
	<tr>
    	<td></td>
    	<td>Third reason (optional):</td>
        <td><select id="Reason_1a_Third" name="Reason_1a_Third" class="reason">';
$resultreason1a = @mysql_query ($queryreason1a); // Run the query.
while($rowreason1a = mysql_fetch_array($resultreason1a, MYSQL_NUM))
{
echo '<option value="'.$rowreason1a[0].'">'.$rowreason1a[1].' -> '.$rowreason1a[2].'</option>';
}

echo '</select></td>
    </tr>';
 
	echo '</div> // end div tag

</table><hr />

Open in new window

0
EICT
Asked:
EICT
  • 7
  • 6
2 Solutions
 
OmniUnlimitedCommented:
You will need to set up javascript to do this and creating a script for you to do that would require some work.

EICT, you need to know that all the experts here at EE volunteer their time to assist you.  We receive absolutely no monetary compensation for what we do.  The only compensation we get are points, and that not all the time.

You are a Premium Service Member with unlimited points to spend.  You should really consider being more generous to those that will help you.
0
 
BardobraveCommented:
What you need here is to use a javascript event on your combo boxes to activate/deactivate the objects related to them.

Following with your example.

When question 1) combo fires it's onChange event, you need to check the value selected. If it's "yes" then you change the enable value of related questions objects.

To disable an element on HTML remember that you need to set it's "disabled" attribute to "disabled"
0
 
OmniUnlimitedCommented:
OK, I've gone ahead and set up a coding example of how you would do this.

Example of possible HTML and PHP:
 
<table><tbody>
			<tr>
	    			<td width="30">1)</td>
        			<td colspan="2">Did the client need support to better manage mental health?</td>
        			<td>
					<select id="support" name="support" class="need" onChange="check_enable(this);">
		            			<option value="0" <?php if ($q1 == '0') echo ' selected="selected"'; ?>>Missing</option>
			            		<option value="1" <?php if ($q1 == '1') echo ' selected="selected"'; ?>>Yes</option>
				            	<option value="2" <?php if ($q1 == '2') echo ' selected="selected"'; ?>>No</option>
				        </select>
				</td>
	    		</tr>
			<tr>
	    			<td class="suboption" width="30">1a)</td>
        			<td class="suboption" colspan="2">Was support given?</td>
        			<td>
					<select id="support1a" name="support1a" class="need" disabled="disabled">
		            			<option value="0" <?php if ($q1a == '0') echo ' selected="selected"'; ?>>Missing</option>
			            		<option value="1" <?php if ($q1a == '1') echo ' selected="selected"'; ?>>Yes</option>
				            	<option value="2" <?php if ($q1a == '2') echo ' selected="selected"'; ?>>No</option>
				        </select>
				</td>
	    		</tr>
			<tr>
	    			<td class="suboption" width="30">1b)</td>
        			<td class="suboption" colspan="2">Are they better managing their mental health?</td>
        			<td>
					<select id="support1b" name="support1b" class="need" disabled="disabled">
		            			<option value="0" <?php if ($q1b == '0') echo ' selected="selected"'; ?>>Missing</option>
			            		<option value="1" <?php if ($q1b == '1') echo ' selected="selected"'; ?>>Yes</option>
				            	<option value="2" <?php if ($q1b == '2') echo ' selected="selected"'; ?>>No</option>
				        </select>
				</td>
	    		</tr>
		</tbody></table>

Open in new window


Example of CSS:
 
td.suboption
{
    color: #CCC;
}

Open in new window


Example of javascript and jQuery:
 
function check_enable(obj) {
	if ($(obj).val() == 1)
		switch ($(obj).attr('id')) {
			case "support" :
				$("#support1a").removeAttr("disabled");
				$("#support2a").removeAttr("disabled");
				$(".suboption").css('color', '#000');
				break;
		}
	} else {
		switch ($(obj).attr('id')) {
			case "support" :
				$("#support1a").attr("disabled", "disabled");
				$("#support2a").attr("disabled", "disabled");
				$(".suboption").css('color', '#CCC');
				break;
		}
	}
}

Open in new window


You would just need to adapt the above code to your needs.
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
EICTAuthor Commented:
Hi OmniUnlimited,

Thanks for your reply.
I've had to add in an extra bracket or two in the Javascript bit and its still coming up with a javascript error on the page on the third line below:

I like what you've done though and the idea of using colour to disable text. I'll have another look tonight. So thanks for putting me in the right direction.


function check_enable(obj)
{
      if($(obj).val() == 1)
      {
              switch ($(obj).attr('id')) {
                  case "support" :
                        $("#support1a").removeAttr("disabled");
                        $("#support2a").removeAttr("disabled");
                        $(".suboption").css('color', '#000');
                        break;
            }
      } else {
            switch ($(obj).attr('id')) {
                  case "support" :
                        $("#support1a").attr("disabled", "disabled");
                        $("#support2a").attr("disabled", "disabled");
                        $(".suboption").css('color', '#CCC');
                        break;
            }
      }
}
0
 
OmniUnlimitedCommented:
Oops, sorry about that.  I was missing the bracket in the if statement, but it looks like you fixed it ok.  What sort of an error are you getting?
0
 
EICTAuthor Commented:
Hi,
I'm getting a javascript syntax error in line 3, char 2 of the function when it runs.

Seems to be something to do with the 'if' statement??  

Thanks.
0
 
OmniUnlimitedCommented:
Do you have jQuery installed?
0
 
EICTAuthor Commented:
Hi OmniUnlimted,

From my understanding I don't. jQuery is new to me, but it looks like it might be worth me learning about.
0
 
OmniUnlimitedCommented:
Hah, that is where the problem is.  I could draw you up some javascript code, but it would be more complicated, and if you are willing to make a small investment of your time, jQuery will make your life a lot easier in the future.

To activate jQuery on your site:
1.  Go to http://jquery.com/ and download jQuery.
2.  Upload jQuery to your server
3.  Next place a <script> tag in the header (between the <head></head> tags) and set the src to the url where your jQuery is located.

For example:
 
<script type='text/javascript' src='http://yoursite.com/jquery/jquery.js?ver=1.6.1'></script>

Open in new window


4. Finally, you will need to place var $ = jQuery.noConflict(); at the beginning of the javascript I gave you so that it looks like this:
 
var $ = jQuery.noConflict();

function check_enable(obj) {
	if ($(obj).val() == 1) {
		switch ($(obj).attr('id')) {
			case "support" :
				$("#support1a").removeAttr("disabled");
				$("#support2a").removeAttr("disabled");
				$(".suboption").css('color', '#000');
				break;
		}
	} else {
		switch ($(obj).attr('id')) {
			case "support" :
				$("#support1a").attr("disabled", "disabled");
				$("#support2a").attr("disabled", "disabled");
				$(".suboption").css('color', '#CCC');
				break;
		}
	}
}

Open in new window


Let me know if you have any problems with this.
0
 
EICTAuthor Commented:
Hi,
I did think about disabling the sub questions and then use javascript like the following to enable it when a value 1 is selected from the drop down.

The problem is I get an error in line 2 stating that ) is expected.


function makeEnable()
{
 if (document.theForm.1a_MaxIncome.value == 1)
   document.theForm.Outcome_1a.disabled=false;
 
}
0
 
OmniUnlimitedCommented:
Yeah, the reason being is that the DOM does not permit id's to start with a number like 1a_Maxincome.
0
 
EICTAuthor Commented:
Thank you for your help. I'm going to downlaod jQuery and spend some time learning it. As it make take a little while for me to finish this and check it all out I'll close the question so you can get your well earned points.

Thanks again
0
 
EICTAuthor Commented:
Thanks for the info about DOM. This helps too.
0
 
OmniUnlimitedCommented:
Thank you EICT.  Let me know if you have any further issues.  They will notify me if you post a related question by clicking on the "ask a related question" link above the comments box.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now