Solved

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

Posted on 2011-09-02
14
650 Views
Last Modified: 2013-12-13
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
Comment
Question by:EICT
  • 7
  • 6
14 Comments
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36472408
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
 
LVL 19

Expert Comment

by:Bardobrave
ID: 36472428
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
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36472538
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
 

Author Comment

by:EICT
ID: 36484699
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
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36484727
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
 

Author Comment

by:EICT
ID: 36487109
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
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36487131
Do you have jQuery installed?
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:EICT
ID: 36487644
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
 
LVL 17

Accepted Solution

by:
OmniUnlimited earned 250 total points
ID: 36487752
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
 

Author Comment

by:EICT
ID: 36487755
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
 
LVL 17

Assisted Solution

by:OmniUnlimited
OmniUnlimited earned 250 total points
ID: 36487769
Yeah, the reason being is that the DOM does not permit id's to start with a number like 1a_Maxincome.
0
 

Author Comment

by:EICT
ID: 36487771
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
 

Author Comment

by:EICT
ID: 36487773
Thanks for the info about DOM. This helps too.
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36487781
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

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now