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';
});
});
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';
});
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.