CODEWITHSUNDEEP
html
Nyaro
Nyaro

Reputation: 177

enabling a textbox on the selectionof a option in the drop down menu in multiple cases

What I want is that the text box is only accessible if a certain option is picked from the drop down menu and i have a html form as below:

<tr>
    <td>a.&nbsp;Did any  of your staff participate in training or orientation sessions related to any aspect of social performance management, during the reporting year? 
    <td >
        <select name="mfi_4_a_i">
            <option>Please choose one.</option>
            <option>Yes</option>
            <option>No</option>
            <option>No, but planning in future</option>
        </select>

        <p>if not,and not planning please explain why not?</p>

        <input type="text" name="mfi_4_a_ii" class="init" disabled="disabled"/>
</tr>

Now when the option No, but planning in future is selected then the textbox must be enabled.This type of dropdown menu has been used many times in this form so i have to enable the textbox in another similar case too so how a single function can be written to do this.Help me out guys.

Upvotes: 1

Views: 780

Answers (1)

Stephan Muller
Stephan Muller

Reputation: 27600

First of all, you should close your td's by adding a </td> to the end of the contents. That way browsers will have less trouble finding the right element if you use javascript.

Also, you will need to add values to your options, so that a form handler knows which has been picked. You could use something like:

<select name="mfi_4_a_i">
    <option>Please choose one.</option>
    <option value="yes">Yes</option>
    <option value="no">No</option>
    <option value="later">No, but planning in future</option>
</select>

You can leave the first one blank because they have to pick something else anyway.

About the textbox, you have to use javascript for this. Do you happen to use jQuery? That would make it easier to handle these things, especially if you re-use it a lot. It can also be done in regular javascript but I'm not sure about the code for it. Here's the solution in jQuery:

$('select').change(function(){
    $input = $(this).parent().find('input');

    if($(this).attr('value') == 'later') {
        $input.removeAttr('disabled');
        $input.focus();
    } else {
       $input.attr('disabled','true');
    }
});

What this does: everytime a select dropdown changes values (something has been picked) it checks whether the option with value later was picked (maybe 'specify' would be more appropriate..). If that's true, it finds the first textbox that's inside the same element as the select. In this case both are at the same level in a td, if your html gets more complicated maybe you have to find another way to look for the nearest textbox. If the input is found, it is set to enabled and the cursor is placed inside so they can start typing immediately.

If another option than 'later' is picked, the textbox is disabled again.

Upvotes: 1

Related Questions