0

Using this question as a base, I've been attempting to set up a form using dependent drop down boxes. User selects the info session they want from dropdown box 1, the hidden dropdown box appears with the relevant dates for that (and only that) information session. There's 2 (at first hidden) dropdown boxes, which one gets displayed depends on what the user chooses in the first dropdown box.

It works visually but not so much when trying to post the data. From what I can tell through Firebug, "disabled" isn't changing from "true" at any point, so the form complains that default is not an option. firstChoice options fail, secondChoice options pass through fine.

HTML

<div id="myQuestions">
<select id="QuestionOptions" class="required" name="SESHTYPE">
<option selected="selected" value="Default">Choose information session.</option>
<option value="firstChoice">First One</option>
<option value="secondChoice">Second One</option>
</select>
</div>
<div id="myAnswers">
<div id="firstChoice" disabled="true" style="display: none;">
<select id="mce-INFODATE" name="INFODATE">
<option value="Default">Please choose a date:</option>
<option value="7th March">Thursday, 7th March</option>
<option value="20th March">Wednesday, 20th March</option>
<option value="11th April">Thursday, 11th April</option>
</select>
</div>
<div id="secondChoice" disabled="true" style="display: none;">
<select id="mce-INFODATE" name="INFODATE">
<option value="Default">Please choose a date:</option>
<option value="16th April">Tuesday, 16th April</option>
</select>
</div>

Javascript

    jQuery(document).ready(function($) {
    $('#QuestionOptions').change(function () {
    $('#myAnswers > div').hide().prop("disabled", true);
    $('#myAnswers').find('#' + $(this).val()).show().prop("disabled", false);
    });
    });

Edit: A bit more digging and I've found you can't use disabled on a div as from here; will using children() get me to where I want to be?

Community
  • 1
  • 1
Damien
  • 3
  • 2

1 Answers1

0

First of all, you can't have two selects with the same name and id, they need to be different.

Second, you can't disable a <div>, you can only hide it, but you can disable a <select>. Maybe try something like:

$('#myAnswers > div').hide()
$('#myAnswers select').prop("disabled", true);
var selectedDiv = $('#myAnswers').find('#' + $(this).val());
selectedDiv.show()
selectedDiv.find('select').prop("disabled", false);
sevaor
  • 189
  • 2