CODEWITHSUNDEEP
javascriptphp
MidoZZX
MidoZZX

Reputation: 27

How to disable number input types using javascript and php

I'm working on a small project that contains a php page that will ask the user to enter a number of questions for a test and after writing a number for example 10 he will then allocate number of question for each type of the exam (addition, subtraction, multiplication, division) until the number of questions finish for example after choosing 10 total questions he can then choose 5 in addition 3 in multiplication and 2 in division but he cant allocate anymore questions because the 10 total questions have finished. And he is allocating these numbers in a number input type in html so I want to get the first input type which is the total number of questions and then decrement that number every time he increase any of the exam types(addition, ..) and when it reaches 0 it will disable the input types here is what I did so far:

var numInput = document.getElementById('numInput');
var Input1 = document.getElementById('Input1');
var Input2 = document.getElementById('Input2');
var Input3 = document.getElementById('Input3');
var Input4 = document.getElementById('Input4');

Input1.disabled = true;
Input2.disabled = true;
Input3.disabled = true;
Input4.disabled = true;

var Checker = setInterval(function Checker() {
var numValue = numInput.value;
//thats what I tried to do to solve my problem but it didn't work properly because it must decrement only 1 but the condition will still be true so it will decrement for ever or at least that is what I think.
if (Input1.value > 0) {
	numValue = numValue - 1;
}
//and this part is working fine.
if (numValue > 0) {
	Input1.disabled = false;
	Input2.disabled = false;
	Input3.disabled = false;
	Input4.disabled = false;
} else if (numValue <= 0) {
	Input1.disabled = true;
	Input2.disabled = true;
	Input3.disabled = true;
	Input4.disabled = true;
}
}, 100);
<form method="GET" action="">
	<h2>How many questions do you want to answer?</h2>
	<input id="numInput" type="number" name="Text" value="0" min="0"><br>	
	<h2>Addition: </h2>&nbsp<input id="Input1" type="number" name="Text" value="0" min="0"><br>
	<h2>Subtraction: </h2>&nbsp<input id="Input2" type="number" name="Text" value="0" min="0"><br>
	<h2>Multiplication: </h2>&nbsp<input id="Input3" type="number" name="Text" value="0" min="0"><br>
	<h2>Division: </h2>&nbsp<input id="Input4" type="number" name="Text" value="0" min="0">
</form>

And I don't have any idea on how can I solve this so please help me.

Upvotes: 0

Views: 383

Answers (1)

Błażej Kowalczyk
Błażej Kowalczyk

Reputation: 184

Instead of decrementing numValue, you should compare it with sum of other inputs

function Checker() {
var sum=parseInt(Input1.value)+parseInt(Input2.value)+parseInt(Input3.value)+parseInt(Input4.value);
var numValue = numInput.value;
if (numValue > sum) 
{
    Input1.disabled = false;
    Input2.disabled = false;
    Input3.disabled = false;
    Input4.disabled = false;
} else  
{
    Input1.disabled = true;
    Input2.disabled = true;
    Input3.disabled = true;
    Input4.disabled = true;
    }
}

Also, better then setInterval, use onchange event

numInput.addEventListener("change", Checker);
Input1.addEventListener("change", Checker);
Input2.addEventListener("change", Checker);
Input3.addEventListener("change", Checker);
Input4.addEventListener("change", Checker);

Upvotes: 1

Related Questions