Javascript for counting the values of text input fields

Question

I am trying to create a hotel booking form with an increment counter which I have already setup. Its got 3 input fields and at the end there is a "group total" text input field. I need to ask if anyone could help me with the JS in order to counter the number of individuals in the total group box for when they incrementally add people in the 3 increment counters?

My code is as follows:

 function increase() { var a = 1; var textbox = document.getElementById("text"); textbox.value++; } function decrease() { var textBox = document.getElementById("text"); textBox.value--; } function increase2() { var a = 1; var textbox2 = document.getElementById("text2"); textbox2.value++; } function decrease2() { var textBox2 = document.getElementById("text2"); textBox2.value--; } function increase3() { var a = 1; var textbox3 = document.getElementById("text3"); textbox3.value++; } function decrease3() { var textBox3 = document.getElementById("text3"); textBox3.value--; }

 <h4>Please select the number of people who will be in each room</h4> <div class="cart-plus-minus"> <button type="button" onclick="decrease()">-</button> <input type="text" id="text" value="1" min="1" data-max="2" readonly> <button type="button" onclick="increase()">+</button> </div> <div class="cart-plus-minus"> <button type="button" onclick="decrease2()">-</button> <input type="text" id="text2" value="1" min="1" max="2" readonly> <button type="button" onclick="increase2()">+</button> </div> <div class="cart-plus-minus"> <button type="button" onclick="decrease3()">-</button> <input type="text" id="text3" value="1" min="1" max="2" readonly> <button type="button" onclick="increase3()">+</button> </div> <a href="" class="a-link"> <label> Group Total: </label> <input id="totalPersons" type="text" placeholder="" value=""> </a>

Answer 1

You could just increase/decrease the value attribute of the totalpersons element within the increase / decrease methods as well.

For example:

function increase() {
  var a = 1;

  var textbox = document.getElementById("text");
  var totalpersons = document.getElementById("totalPersons");
  textbox.value++;
  totalpersons.value++; 
}

Answer 2

Note that the values of text boxes are always strings in javascript. The parseInt() function will convert them to integers.

https://jsfiddle.net/y473L1bt/2/

function updateTotal() {
  var textbox = document.getElementById("text");
  var textbox2 = document.getElementById("text2");
  var textbox3 = document.getElementById("text3");
  var total = document.getElementById("totalPersons");
  total.value = parseInt(textbox.value) + 
  parseInt(textbox2.value) + parseInt(textbox3.value);
}

function increase(id) {
  var textbox = document.getElementById(id);
  textbox.value++;
  updateTotal();
}


function decrease(id) {
  var textBox = document.getElementById(id);
  var a = textBox.value - 1;
  if (a >= 0) {
    textBox.value = a;
  }
   updateTotal();
}

Answer 3

You can simplify your code by adding this to all onclick function calls so we can know which element called the function and with that we can figure out it's parent along with the correct input element to increment. In the end we call the increaseTotal() or decreaseTotal() function to update the group total field.

Note: I'm guessing you don't want to be able to decrease a field beyond 0, so I added that constraint as an if statement in the decrease() function. I also made the totalPersons input field's value to default to 3 because all of the 3 other inputs default to 1.

Run and test:

 function increase(el) { var textbox = el.parentElement.querySelector('input'); textbox.value++; increaseTotal(); } function decrease(el) { var textBox = el.parentElement.querySelector('input'); if(textBox.value > 0) { // <- if value is at least 1 textBox.value--; decreaseTotal(); } } function increaseTotal() { var textBox = document.getElementById("totalPersons"); textBox.value++; } function decreaseTotal() { var textBox = document.getElementById("totalPersons"); textBox.value--; }

 <h4>Please select the number of people who will be in each room</h4> <div class="cart-plus-minus"> <button type="button" onclick="decrease(this)">-</button> <input type="text" id="text" value="1" min="1" data-max="2" readonly> <button type="button" onclick="increase(this)">+</button> </div> <div class="cart-plus-minus"> <button type="button" onclick="decrease(this)">-</button> <input type="text" id="text2" value="1" min="1" max="2" readonly> <button type="button" onclick="increase(this)">+</button> </div> <div class="cart-plus-minus"> <button type="button" onclick="decrease(this)">-</button> <input type="text" id="text3" value="1" min="1" max="2" readonly> <button type="button" onclick="increase(this)">+</button> </div> <a href="" class="a-link"> <label> Group Total: </label> <input id="totalPersons" type="text" placeholder="" value="3"> </a>