I am working on a test and bumped into a problem.
How do I make a .js script that only enables button when all fields are checked.
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q1" value="1" id="q1"></td>
<td><input type="radio" name="q1" value="2" id="q1"></td>
<td><input type="radio" name="q1" value="3" id="q1"></td>
<td><input type="radio" name="q1" value="4" id="q1"></td>
<td><input type="radio" name="q1" value="5" id="q1"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q2" value="1" id="q2"></td>
<td><input type="radio" name="q2" value="2" id="q2"></td>
<td><input type="radio" name="q2" value="3" id="q2"></td>
<td><input type="radio" name="q2" value="4" id="q2"></td>
<td><input type="radio" name="q2" value="5" id="q2"></td>
</td>
</tr>
<tr>
<td class="first-col">Ritkán szorongom1
<td><input type="radio" name="q3" value="1" id="q3"></td>
<td><input type="radio" name="q3" value="2" id="q3"></td>
<td><input type="radio" name="q3" value="3" id="q3"></td>
<td><input type="radio" name="q3" value="4" id="q3"></td>
<td><input type="radio" name="q3" value="5" id="q3"></td>
</td>
</tr>
<div class="register-button">
<input type="submit" name="submit1" class="inputButton" id="submit1" value="Következő" disabled id="enable-on-two" />
</div>
I have found this .js online, but I can't make it fit well as I have multiple pages of test questions with different input names.
function numberOfCheckboxesSelected() {
return document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked').length;
}
function onChange() {
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 3;
}
document.getElementById('world').addEventListener('change', onChange, false);
There were some issues with your codebase.
document.getElementById('world').addEventListener('change', onChange, false);
Issue There is no node with that specified id.
Submit button has more than one id. That is not possible.
document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked')
Your input type is radio
so the above one wont work. Also the name attribute is wrong.
I have added those fixes.
function numberOfCheckboxesSelected() { return document.querySelectorAll('input[type=radio]:checked').length; } function onChange() { console.log(numberOfCheckboxesSelected()); document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 3; } document.querySelectorAll('input[type=radio]').forEach(node => { node.addEventListener('change', onChange, false); });
<table> <tr> <td class="first-col">Ritkán szorongom1 <td><input type="radio" name="q1" value="1" id="q1"></td> <td><input type="radio" name="q1" value="2" id="q1"></td> <td><input type="radio" name="q1" value="3" id="q1"></td> <td><input type="radio" name="q1" value="4" id="q1"></td> <td><input type="radio" name="q1" value="5" id="q1"></td> </td> </tr> <tr> <td class="first-col">Ritkán szorongom1 <td><input type="radio" name="q2" value="1" id="q2"></td> <td><input type="radio" name="q2" value="2" id="q2"></td> <td><input type="radio" name="q2" value="3" id="q2"></td> <td><input type="radio" name="q2" value="4" id="q2"></td> <td><input type="radio" name="q2" value="5" id="q2"></td> </td> </tr> <tr> <td class="first-col">Ritkán szorongom1 <td><input type="radio" name="q3" value="1" id="q3"></td> <td><input type="radio" name="q3" value="2" id="q3"></td> <td><input type="radio" name="q3" value="3" id="q3"></td> <td><input type="radio" name="q3" value="4" id="q3"></td> <td><input type="radio" name="q3" value="5" id="q3"></td> </td> </tr> </table> <div class="register-button"> <input type="submit" name="submit1" class="inputButton" value="Következő" disabled id="enable-on-two" /> </div>
The above solution needs a little correction as it enables the submit button on two inputs selection instead of all three.
Replace following:
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 2;
By this:
let totalInputs = document.querySelectorAll('input[type=radio]').length;
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < totalInputs;
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.