954,593 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?

How to call javascript function on dynamically created html using jquery?

0
By Amit Kumar Paliwal on Aug 2nd, 2010 3:11 pm

Hi guys, I am developing an invoice project. I am calculating amount of each section and assigning in grand total. For multiple invoice body section, I am adding dynamic html code using jquery append function. I am successfully added section and removed. When I added new invoice body on click on some link then its amount added into grand amount. Problem I am facing is that when I remove that html code after filling amount then I could not able to subtrack amount of that section from grand amount. I have created a function "setAmountMinus" and called it on remove form field but unfortunately no success. I am getting that amount that I am subtracting.

Please suggest if you have any solution. Thanks in advance..

function setAmount(invoice_bodyid,removeid)
{
	var quan=document.frm.quantity.value;
	var up=document.frm.unit_price.value;
	
	if(quan!="" && up!="")
	{
		var amt=quan*up;
		document.getElementById('amount').value=amt;
		document.getElementById('gross_total').value=amt;
		
		if(invoice_bodyid>0)
		{
			var amtnew=0; var grandtamt=0;
			
			for(var i=1;i<=invoice_bodyid;i++)
			{
				var newquan=document.getElementById('quantity'+i).value;
				var newup=document.getElementById('unit_price'+i).value;	
				amtnew=newquan*newup;

				document.getElementById('amount'+i).value=amtnew;
				var tamt=document.getElementById('amount'+i).value;
				grandtamt= parseInt(grandtamt)+parseInt(tamt);
			}	
			document.getElementById('gross_total').value=parseInt(grandtamt)+parseInt(amt);
		}
	}
}

var invoice_bodyid_total=0;
// code for adding more form 
function addFormField() 
{
	var invoice_bodyid = document.getElementById("invoice_bodyid").value;
	invoice_bodyid_total++;

$("#divTxt").append("<table cellpadding=\"0\" cellspacing=\"1\" id='invoicebody" + invoice_bodyid + "' align=\"center\" width=\"100%\" border=\"1\"><tr><td nowrap=\"nowrap\" width=\"30%\" class=\"admin_form_label\">Quantity : *</td><td class=\"admin_form_field\"><input type=\"text\" name=\"quantity"+invoice_bodyid+"\" id=\"quantity"+invoice_bodyid+"\" onblur='setAmount("+invoice_bodyid+");' /></td></tr><tr><td nowrap=\"nowrap\" width=\"30%\" class=\"admin_form_label\">Unit Price : *</td><td class=\"admin_form_field\"><input type=\"text\" name=\"unit_price"+invoice_bodyid+"\" id=\"unit_price"+invoice_bodyid+"\" class=\"unit_price\" onblur='setAmount("+invoice_bodyid+");' /></td></tr><tr><td nowrap=\"nowrap\" width=\"30%\" class=\"admin_form_label\">Amount :</td><td class=\"admin_form_field\" ><input type=\"text\" name=\"amount"+invoice_bodyid+"\" id=\"amount"+invoice_bodyid+"\" readonly=\"true\"/>	</td></tr><tr><td nowrap=\"nowrap\" width=\"30%\" class=\"admin_form_label\" colspan=\"2\" align=\"right\"><a href=\"#\" onClick='removeFormField(\"#invoicebody" + invoice_bodyid + "\","+ invoice_bodyid +"); return false;'>Remove</a></td></tr></table>");
	
	invoice_bodyid = (invoice_bodyid - 1) + 2;
	document.getElementById("invoice_bodyid").value = invoice_bodyid;
}


function setAmountMinus(invoice_bodyid,removeid)
{
	if(invoice_bodyid>0)
	{
		var amtnew=0; var grandtamt=0;
		for(var i=1;i<=invoice_bodyid;i++)
		{	
			if(i==removeid)
			{
				// problem is here.. it could not found value of i
				var rnewquan=document.getElementById("quantity"+i).value;
				var rnewup=document.getElementById("unit_price"+i).value;
				var ramtnew=rnewquan*rnewup;
			}
		}
		grandtamt=document.getElementById("gross_total").value;
		grandtamt=parseInt(grandtamt)-parseInt(ramtnew);
		document.getElementById("gross_total").value=grandtamt;
	}
}
	
function removeFormField(invoice_bodyid, removeid) 
{
	// remove html section
	$(invoice_bodyid).remove();
	// minus the amount of removed block
	setAmountMinus(invoice_bodyid_total,removeid);
}

First you remove the html, then you scan it for the amount. It would be wise to swap those two lines.

pritaeas
Posting Expert
Moderator
5,484 posts since Jul 2006
Reputation Points: 653
Solved Threads: 875
 

Thanks pritaeas,

Things working as it was a logical mistake..

Many thanks again
Amit

technical_amit
Newbie Poster
4 posts since Aug 2010
Reputation Points: 10
Solved Threads: 0
 

Please consider to mark this thread as solved.

pritaeas
Posting Expert
Moderator
5,484 posts since Jul 2006
Reputation Points: 653
Solved Threads: 875
 

Sure :-)

technical_amit
Newbie Poster
4 posts since Aug 2010
Reputation Points: 10
Solved Threads: 0
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: