Link to home
Start Free TrialLog in
Avatar of EICT
EICTFlag for United Kingdom of Great Britain and Northern Ireland

asked on

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

Avatar of OmniUnlimited
OmniUnlimited
Flag of United States of America image

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.
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"
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.
Avatar of EICT

ASKER

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;
            }
      }
}
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?
Avatar of EICT

ASKER

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.
Do you have jQuery installed?
Avatar of EICT

ASKER

Hi OmniUnlimted,

From my understanding I don't. jQuery is new to me, but it looks like it might be worth me learning about.
ASKER CERTIFIED SOLUTION
Avatar of OmniUnlimited
OmniUnlimited
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of EICT

ASKER

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;
 
}
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of EICT

ASKER

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
Avatar of EICT

ASKER

Thanks for the info about DOM. This helps too.
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.