For a variety of reasons I want to change the code below to look out for data attributes rather than a class called "mygroup".

HTML

<select id="apply">
    <option value="email">Email</option>
    <option value="website">Website</option>
</select>
<input type="text" class="input" id="email" placeholder="[email protected]" data-id="application"/>
<input type="text" class="input" id="website" placeholder="www.example" data-id="application"/>
<textarea class="input" rows="4" cols="50" placeholder="text*" data-id="applicationdetails"></textarea>

JS

// Apply Fields
function applyField() {
    $(document).on('change', '#apply',function() {
        var selected = $(this).find(':selected').val(),
            elem = $("#"+selected);
        $(".mygroup").addClass('hidden');
        elem.removeClass('hidden');
    });
    $("#apply").trigger('change');
};

FIDDLE

How do I change the code above apply to data-id of "application" rather than using the class "mygroup". For bonus points can anyone tell me how to clear the content of the field that is being hidden and also disable it?

For a variety of reasons I want to change the code below to look out for data attributes rather than a class called "mygroup".

HTML

<select id="apply">
    <option value="email">Email</option>
    <option value="website">Website</option>
</select>
<input type="text" class="input" id="email" placeholder="[email protected]" data-id="application"/>
<input type="text" class="input" id="website" placeholder="www.example." data-id="application"/>
<textarea class="input" rows="4" cols="50" placeholder="text*" data-id="applicationdetails"></textarea>

JS

// Apply Fields
function applyField() {
    $(document).on('change', '#apply',function() {
        var selected = $(this).find(':selected').val(),
            elem = $("#"+selected);
        $(".mygroup").addClass('hidden');
        elem.removeClass('hidden');
    });
    $("#apply").trigger('change');
};

FIDDLE

How do I change the code above apply to data-id of "application" rather than using the class "mygroup". For bonus points can anyone tell me how to clear the content of the field that is being hidden and also disable it?

• javascript
• jquery

Share Improve this question Follow edited Jul 11, 2013 at 9:54 Thirumalai murugan 5,92488 gold badges3434 silver badges5454 bronze badges asked Jul 11, 2013 at 9:51 J.ZilJ.Zil 2,44988 gold badges4646 silver badges8282 bronze badges 1

• possible duplicate of how to select data-id and data-action in jQuery – revolver Commented Jul 11, 2013 at 9:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You simply refer to it as $('[data-id="application"]').

As for the clearing and disabling, use .prop() and .val(''):

$('[data-id="application"]').addClass('hidden').prop('disabled', true).val('');
elem.removeClass('hidden').prop('disabled', false);

DEMO

Try to use the attribute selector, ie all elements with attribute data-id instead of having class myClass

function applyField() {
    $(document).on('change', '#apply',function() {
        var selected = $(this).find(':selected').val(),
            elem = $("#"+selected);
        $("input[data-id]").addClass('hidden');
        elem.removeClass('hidden');
    });
    $("#apply").trigger('change');
};

jQuery(function($){
    applyField();
});

Demo: Fiddle