Enable/disable submit button with javascript - according to sum of all numbers the user has input in HTML

Question

I want to disable/enable submit button according to sum of numbers that user add into inputs. If the sum of value become 100, then submit button should be enabled and other wise if the sum!=100 it should be disabled and if it is clicked, alert "the sum is not 100". I wrote following code. but it does not work. would you please help me

var total = 0;
        function manage(value){
            var n1= parseInt(document.getElementById("validationDefault02").value);
            var n2= parseInt(document.getElementById("validationDefault04").value);
            var n3= parseInt(document.getElementById("validationDefault06").value);
            var bt=document.getElementById("btn");
             total += n1+n2+n3;
            if(total != 100){
                bt.disabled = true;
                
            }
            else{
                bt.disabled = false;
            }
        }

<input type="number"  class="form-control" name="value" id="validationDefault02" placeholder="%" required onkeyup="manage(this)"><br>

<input type="number"  class="form-control" name="value" id="validationDefault04" placeholder="%" required onkeyup="manage(this)"><br>

<input type="number"  class="form-control" name="value" id="validationDefault06" placeholder="%" required onkeyup="manage(this)"><br>

  <button class="quebtn1" type="submit" id="btn"  disabled >Next</button>

Does this answer your question? [How get total sum from input box values using Javascript?](https://stackoverflow.com/questions/13540751/how-get-total-sum-from-input-box-values-using-javascript) — Heretic Monkey, Mar 08 '21 at 18:24

score 2 · Accepted Answer · answered Mar 08 '21 at 18:17

You need to check if the value is empty before running parseInt(). Otherwise, it will return NaN and prevent you from calculating the total.

To display an alert, try the alert() function. E.g. alert("Testing Testing");. I'll leave you to play with it :D

function manage(value) {
  var total = 0;
  var bt = document.getElementById("btn");
  var n1 = document.getElementById("validationDefault02");
  var n2 = document.getElementById("validationDefault04");
  var n3 = document.getElementById("validationDefault06");

  // If empty, use 0
  total += n1.value ? parseInt(n1.value) : 0;
  total += n2.value ? parseInt(n2.value) : 0;
  total += n3.value ? parseInt(n3.value) : 0;
  
  console.log(total);
  
  if (total != 100) {
    bt.disabled = true;

  } else {
    bt.disabled = false;
  }
}

<input type="number" class="form-control" name="value" id="validationDefault02" placeholder="%" required onkeyup="manage(this)"><br>

<input type="number" class="form-control" name="value" id="validationDefault04" placeholder="%" required onkeyup="manage(this)"><br>

<input type="number" class="form-control" name="value" id="validationDefault06" placeholder="%" required onkeyup="manage(this)"><br>

<button class="quebtn1" type="submit" id="btn" disabled>Next</button>

0stone0 · Answer 2 · 2021-03-08T18:26:41.467

If you want to show an alert("the sum is not 100") you should always keep the button enabled.

On the button click event, get the total value, and handle accordingly;

function onButton(e){
console.log(1);

    // Prevent button handler
    e.preventDefault();

    // Get all iputs
    const inputs = document.getElementsByClassName("form-control");
    
    // Get total value
    let total = 0;
    for(var i=0; i < inputs.length; i++){
        total = total + (inputs[i].value ? parseInt(inputs[i].value) : 0)
    }
    console.log('New total: ', total);
    
    // Get button
    var bt = document.getElementById("btn");
    
    // If total < 100, show warning
    if (total < 100) {
      alert('Total must be > 100');
    } else {
    
        // Click button / Prevorm button action
        bt.click();
        console.log('Button Clicked');
    }
}

<input type="number"  class="form-control" name="value" id="validationDefault02" placeholder="%" required><br>

<input type="number"  class="form-control" name="value" id="validationDefault04" placeholder="%" required><br>

<input type="number"  class="form-control" name="value" id="validationDefault06" placeholder="%" required><br>

<button class="quebtn1" type="submit" id="btn" onClick="onButton(event)">Next</button>

score 0 · Answer 3 · answered Mar 08 '21 at 18:24

I got all the inputs in the page and listened for a change event

const inputs = [...document.querySelectorAll('input')]; // Specify your selector. 

inputs.forEach(input => {
    input.addEventListener('change', () => {
        const total = inputs.map(input => +input.value || 0).reduce((a, b) => a + b);

        if (total != 100) {
            bt.disabled = true;
            alert('The sum is not 100');
        } else bt.disabled = false;
    });
});

The HTML could then be without the onkeyup

<input type="number"  class="form-control" name="value" id="validationDefault02" placeholder="%" required><br>

<input type="number"  class="form-control" name="value" id="validationDefault04" placeholder="%" required><br>

<input type="number"  class="form-control" name="value" id="validationDefault06" placeholder="%" required><br>

<button class="quebtn1" type="submit" id="btn" disabled>Next</button>

Enable/disable submit button with javascript - according to sum of all numbers the user has input in HTML

3 Answers3