Member Avatar for GrinShady

Hi guys,


I am still new to JavaScript. In our class we were required to create an application wherein you can dynamically add elements and use them.

I don't know what I am missing here. Any ideas? Thanks in advance.

Some of the codes are actually based on this link: http://viralpatel.net/blogs/2009/01/dynamic-add-textbox-input-button-radio-element-html-javascript.html

<HTML>
<HEAD>
<TITLE>Dynamically add Textbox, Radio, Button in html Form using JavaScript</TITLE>
<SCRIPT language="javascript">
function add(type) {
 
    //Create an input type dynamically.
    var element = document.createElement("input");
 
    //Assign different attributes to the element.
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);
 
    var foo = document.getElementById("fooBar");
 
    //Append the element in page (in span).
    foo.appendChild(element);
}

function check()
	{
	var Employee = document.frm.Employee.value;
	var DailyRate = document.frm.DailyRate.value;	
	var DaysWorked = document.frm.DaysWorked.value;	

	Wtax = 0;

	if(Employee.value == "")
		{alert("Please enter Employee!");}
	else if(DailyRate == "")
		{alert("Please enter Daily Rate!");}
	else if(DaysWorked == "")
		{alert("Please enter Days Worked!");}
	else if(isNaN(DailyRate.value))
		{alert("Please enter a valid Daily Rate!");}
	else if(isNaN(DaysWorked.value))
		{alert("Please enter a valid Days Worked!");}	
	
	
	
	else
	{
	var GrossPay = (DailyRate.value)*(DaysWorked.value);
	if(GrossPay >= 20000){ Wtax = GrossPay*0.30;}	
	else if((GrossPay >= 10000)&&(GrossPay <= 19999)){Wtax = GrossPay*0.20;}	
	else if(GrossPay <= 9999){Wtax = GrossPay*0.0;}
	var SSS = GrossPay*0.10;
	var NetPay = GrossPay-(SSS+Wtax)+Rank;
	
	//alert("Product Name: "+Product.value + " \nQuantity: "+quantity.value+ "\nTotal Bill: "+TotalBill);
	document.frm.GrossPay.value = GrossPay;
	document.frm.WTAX.value = Wtax;
	document.frm.SSS.value = SSS;
	document.frm.NetPay.value = NetPay;
	}
	

	
	}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<H2>Dynamically add element in form.</H2>
Select the element and hit Add to add it in form.
<BR/>
<SELECT name="element">
    
	<OPTION value="Enter Employee Name" name='Employee'>Textbox (Employee Name)</OPTION>
    <OPTION value="Enter Daily Rate" name='DailyRate'>Textbox (Daily Rate)</OPTION>
	<OPTION value="Enter Days Worked" name='DaysWorked'>Textbox (No. of days worked)</OPTION>
	<OPTION value="Gross Pay Shown Here" name='GrossPay'>Textbox (GrossPay)</OPTION>
	<OPTION value="Withholding Tax Shown Here" name='WTAX'>Textbox (Withholding Tax)</OPTION>
	<OPTION value="SSS Contribution Shown Here" name='SSS'>Textbox (SSS Contribution)</OPTION>
	<OPTION value="Net Pay Shown Here" name='NetPay'>Textbox (NetPay)</OPTION>
	<OPTION value="button" name='Compute' value='Compute' onClick="check()">Button - Compute</OPTION>
	<OPTION value="reset" name='Clear' value='reset'>Button - Clear</OPTION>
    
</SELECT>
 
<INPUT type="button" value="Add Element" onclick="add(document.forms[0].element.value)"/>
 
<span id="fooBar"><br>&nbsp;<br></span>
</FORM>
</BODY>
</HTML>
Edited by GrinShady because: n/a
  • 3 Contributors
  • 3 Replies
  • 165 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for AleMonteiro

What do you mean? Your code is working ok. I mean, it's adding text inputs and buttons, and the button reset works fine too.

Member Avatar for GrinShady

What do you mean? Your code is working ok. I mean, it's adding text inputs and buttons, and the button reset works fine too.

Well, the buttons add up when you try to do so, but if you try to check the other codes, the codes that will calculate the NetPay and GrossPay just won't work.

The objective is to actually dynamically add elements and then use them in gathering and calculating data.

Thanks anyway :)

Member Avatar for Taywin

If you dynamically add element to a page, you should use something that can dynamically search elements on the page as well. In this case, a simple way is to use document.getElementsByTagName("input") and then check for the same "name" you just add. However, the way you add will create duplicated elements, so you will hit multiple elements as well. If you want only 1 input per element, you need to modify your "create" part to check for existing element before you create it. The way you want to check & use their values is not really clear to me...

function add(type) {
  // Check for existence of the element.
  // You can use the same technique to search for a selected element and
  // read/write its value.
  var els = document.getElementsByTagName("input")
  var exist = false
  for (var i=0; i<els.length; i++) {
    if (els.getAttribute("name")==type) {
       exist = true
       break
    }
  }

  // not exist, OK to create
  if (!exist) {
    //Create an input type dynamically.
    var element = document.createElement("input");
 
    //Assign different attributes to the element.
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);
 
    var foo = document.getElementById("fooBar");
 
    //Append the element in page (in span).
    foo.appendChild(element);
  }
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.