Cos Cos - 1 year ago 49
HTML Question

Reload the total when removing a function - HTML & JS based form

Once a row/field has been added, the function below allows a delete link to appear, and if clicked it will remove the row/field:

var ct = 1;
function new_bank(){
ct++;
var div1 = document.createElement('div');
div1.id = ct;

// bank to delete extended form elements

var delLink = '<div style="text-align:right;margin-right:73px"><a
href="javascript:delIt('+ ct +')">Delete</a></div>';
div1.innerHTML = document.getElementById('newbanktpl').innerHTML + delLink;
document.getElementById('newbank').appendChild(div1);
}


function to delete the newly added set of elements

function delIt(eleId){
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('newbank');
parentEle.removeChild(ele);
}


The above code works correct. However as I have another Function which calculates the sum of the fields, and if I delete a row/field this sum doesn't update.

I am looking for a reload function when delete link is clicked or something similar, then refresh the Total function and update the Total to the correct amount

Below is my code for the total function:

//Creating total
function findTotal(){
var arr = document.getElementsByName('Value[]');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);}
document.getElementById('total').value = tot;
}
}

Answer Source

Inside your delIt() function call the findTotal() function again like below:-

function delIt(eleId)
{
    d = document;
    var ele = d.getElementById(eleId);
    var parentEle = d.getElementById('newbank');
    parentEle.removeChild(ele);
    findTotal(); //call here
}

Now after removal it will recalculate the data and paste the new value to the total field.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download