CODEWITHSUNDEEP
javaspringjspjsp-tags
Sangam Jung Gauli
Sangam Jung Gauli

Reputation: 143

Multiply value of input type number and a number

I am facing a problem with jsp. I'm trying to multiply a number with value of input type number on dynamically when number is increased. I've following code.

<td data-th="Price"> ${prod.unitPrice }</td>
<td data-th="Quantity"><input type="number"class="form-control text-center" value="${item.quantity}"></td>

Above code will print the value which is passed in model. what will be best logic for obtaining new value when value is increased with UI. I need to display on subtotal 

<td data-th="Subtotal" class="text-center">$......</td>

Upvotes: 0

Views: 834

Answers (1)

Nur Zico
Nur Zico

Reputation: 2447

Assuming you have tr for provided td

I have added class for tr as well as td. added onkeyup event to input fields for changing input quantity to result in Subtotal

<tr class="data">
        <td data-th="Price" class="price"> ${prod.unitPrice}</td>
        <td data-th="Quantity"><input type="number" class="form-control text-center quantity" onkeyup="total(this);" value="${item.quantity}"></td>
        <td data-th="Subtotal" class="total" class="text-center"> ... </td>
</tr>

Following script will calculate the change depend on input quantity and set sub total on page load

//section for set sub total when page load
var r, i;
r = document.getElementsByClassName("data");
for(i=0;i<r.length; i++){
    r[i].getElementsByClassName("total")[0].innerHTML =
        r[i].getElementsByClassName("price")[0].innerText *
        r[i].getElementsByClassName("quantity")[0].value;
}


//function to update sub total when quantity changed
function total(element) {
    var tr = element.parentNode.parentNode;
    var price = tr.getElementsByClassName("price")[0].innerText;
    tr.getElementsByClassName("total")[0].innerHTML = price * element.value;
}

// function to sum all sub total
function sumTotal(){
  var tot = 0 ; //variable hold the sum
  var len = document.getElementsByClassName("total").length;
  for(var i =0; i<len; i++){ 
    tot += parseInt(document.getElementsByClassName("total")[i].innerText); 
  }
}

Upvotes: 1

Related Questions