EICT
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.
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 />
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"
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:
Example of CSS:
Example of javascript and jQuery:
You would just need to adapt the above code to your needs.
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>
Example of CSS:
td.suboption
{
color: #CCC;
}
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;
}
}
}
You would just need to adapt the above code to your needs.
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("disa bled", "disabled");
$("#support2a").attr("disa bled", "disabled");
$(".suboption").css('color ', '#CCC');
break;
}
}
}
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
$("#support2a").removeAttr
$(".suboption").css('color
break;
}
} else {
switch ($(obj).attr('id')) {
case "support" :
$("#support1a").attr("disa
$("#support2a").attr("disa
$(".suboption").css('color
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?
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.
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?
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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_MaxIn come.value == 1)
document.theForm.Outcome_1 a.disabled =false;
}
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_MaxIn
document.theForm.Outcome_1
}
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
Thanks again
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.
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.