CODEWITHSUNDEEP
javascriptdrop-down-menudisabled-input
Martin
Martin

Reputation: 557

Problem disabling specific select dropdown fields using Javascript

Am working on an application whereby I have some cards that have select dropdown fields. On the Cards I have written a JavaScript logic whereby if the user selected a wife or husband as an option on the any of the cards select drop down, any of the other husband or wife dropdown field should disable.

The problem is the other cards do not disable when I select an option from any card. Basically I want when the user selects wife or husband option on any card, all other husband or wife options on other cards should disable instantly.

I get this error in console:

TypeError: document.querySelectorAll(...).addEventListener is not a function

Markup code

<!-- Card 1 -->
<form method="POST" action="#" id="phase3">
        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
        <!-- Gender -->
        <div class="row registerRelationph3">
            <label class="fm-input"> Relation :</label>
            <select class="fm-input otherMenu" id="relation1" required>
                <option value="Husband"> Husband </option>
                <option value="Wife"> Wife </option>
                <option value="Son"> Son </option>
                <option value="Daughter"> Daughter </option>
            </select>
        </div>
        <!-- END -->

        <!-- DOb -->
        <div class="row">
        <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>
        <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>
        </div>
        <!-- END dob -->
            <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button>
</form>
<!-- End card 1 -->

<!-- Card 2-->
<form method="POST" action="#" id="phase3">
        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
        <!-- Gender -->
        <div class="row registerRelationph3">
            <label class="fm-input otherMenu"> Relation :</label>
            <select class="fm-input" id="relation1" required>
                <option value="Husband"> Husband </option>
                <option value="Wife"> Wife </option>
                <option value="Son"> Son </option>
                <option value="Daughter"> Daughter </option>
            </select>
        </div>
        <!-- END -->

        <!-- DOb -->
        <div class="row">
            <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>
            <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>
        </div>
        <!-- END dob -->
            <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button>
</form>
<!-- End card 2-->

<!-- Card 3-->
<form method="POST" action="#" id="phase3">
        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
        <!-- Gender -->
        <div class="row registerRelationph3">
            <label class="fm-input"> Relation :</label>
            <select class="fm-input otherMenu" id="relation1" required>
                <option value="Husband"> Husband </option>
                <option value="Wife"> Wife </option>
                <option value="Son"> Son </option>
                <option value="Daughter"> Daughter </option>
            </select>
        </div>
        <!-- END -->

        <!-- DOb -->
        <div class="row">
            <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>
            <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>
        </div>
        <!-- END dob -->
            <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button>
</form>
<!-- End card 3-->

Javascript code

document.querySelectorAll('.otherMenu').addEventListener('change', function() {
    var selectedOption = this.value;
    var selectWife = document.querySelectorAll('.otherMenu option[value="Wife"]');
    var selectHusband = document.querySelectorAll('.otherMenu option[value="Husband"]');
        selectWife.forEach(function(option) {
            option.disabled = selectedOption === 'Wife';
        });
        selectHusband.forEach(function(option) {
            option.disabled = selectedOption === 'Husband';
        });
});

Upvotes: 0

Views: 37

Answers (1)

TheBlueOne
TheBlueOne

Reputation: 496

I think you cant add an eventlistener on a list of menus it must be done for each menu

var menus = document.querySelectorAll('.otherMenu');
for (let menu of menus) {
    menu.addEventListener('change', function () {
        var selectedOption = this.value;
        var selectWife = document.querySelectorAll('.otherMenu option[value="Wife"]');
        var selectHusband = document.querySelectorAll('.otherMenu option[value="Husband"]');
        selectWife.forEach(function (option) {
            option.disabled = selectedOption === 'Wife';
        });
        selectHusband.forEach(function (option) {
            option.disabled = selectedOption === 'Husband';
        });
    });
}

Upvotes: 1

Related Questions