Dynamic Textbox adding with summation in javascript
requirement:
1. add new textbox when click on + button
before click
after click
2. Remove textbox when click on - button
before click:
after click:
3. count sum of each textbox available on screen if the value in the text box is string or blank then ignore it.
Download Script: click here
Script:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="space" >
<!--division for main textbox and button-->
<input type="text" id="mainTextBox">
<button type="button" onclick="addTextBox()" id="btn1"><b>+</b></button>
</div>
<div id="myDiv">
<!--space for dynamic control insertion-->
</div>
<div id="total">
<hr/>
<input type="text" id="txt_Total_Value"/>
<input type="button" onclick="countTotal()" value="="/>
</div>
<script>
var id_bucket=new Array();
var total_element=0;
//create new division with textbox and button inside it
function addTextBox(){
var div=document.createElement('DIV');
total_element++;
//insert id into id b
id_bucket[total_element]=total_element;
div.innerHTML=dynamicTextBox(total_element);
document.getElementById("myDiv").appendChild(div);
}
//create textbox and button and return to the caller function
function dynamicTextBox(value){
return '<input type="text" name="atrib[]" id="'+value+'" value=""/>'+
'<input type="button" onclick="removeTextBox(this)" value="-" id="'+value+'"/>'
}
// remove perticulor division from the page
function removeTextBox(div){
var count1=document.getElementById("mainTextBox").value;
var sum=0;
var j=1;
id_bucket[parseInt(div.id)]=0;
if(count1.length <1){
sum=0;
}
else if(isNaN(count1)){
sum=0;
}else{
sum=parseFloat(count1);
}
for(;j<=total_element;j++){
if(id_bucket[j]!=0){
var num=document.getElementById(j).value;
if(num.length<1)
continue;
if(!isNaN(num)){
sum+=parseFloat(document.getElementById(j).value);
}
}
}
document.getElementById("txt_Total_Value").value=sum;
document.getElementById("myDiv").removeChild(div.parentNode);
}
function countTotal(){
var count1=document.getElementById("mainTextBox").value;
var j=1;
var sum=0;
if(count1.length <1){
sum=0;
}
else if(isNaN(count1)){
sum=0;
}else{
sum=parseFloat(count1);
}
for(;j<=total_element;j++){
if(id_bucket[j]!=0){
var num=document.getElementById(j).value;
if(num.length<1)
continue;
if(!isNaN(num)){
sum+=parseFloat(document.getElementById(j).value);
}
}
}
document.getElementById("txt_Total_Value").value=sum;
}
</script>
</body>
</html>
No comments:
Post a Comment