[SOLVED] Dynamic Form Field

ainoy31 · December 14, 2007

Hello-

I am trying to enable my users to create more fields dynamically. Here is my code:

<script type="text/javascript">
function addField(field,area,limit) 
{
	if(!document.getElementById) return; 
	var field_area = document.getElementById(area);
	var all_inputs = field_area.getElementsByTagName("input"); 
var last_item = all_inputs.length - 1;
var last = all_inputs[last_item].id;
	var count = Number(last.split("_")[1]) + 1;
	if(count > limit && limit > 0) return;
  
	if(document.createElement) 
{ 
  		var td = document.createElement("td");
  		var input = document.createElement("input");
  		input.td = field+count;
  		input.name = field+count;
  		input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
  		td.appendChild(input);
  		field_area.appendChild(td);
	}
else 
{ 
  		field_area.innerHTML += "<td><input name='"+(field+count)+"' td='"+(field+count)+"' type='text' /></td>";
 }
}
</script>
</head>

<body>
<form name="frm" method="POST">
<strong>Export</strong><br />

<table id = "htsus_area">
<tr>
	<td align = 'center'>HTSUS</td>
	<td align = 'center'>Commodity</td>
</tr>
<tr>
	<td><input type="text" name="htsus_1" id="htsus_1"</td>
	<td><input type="text" name="htsus_2" id="htsus_2"</td>
</tr>
</table>

<input type="button" value="Add Field" onclick="addField('htsus_area','htsus_',10);" />
</form>

</body>
</html>

Nothing happens when I click to add more fields. Much appreciation. AM

rajivgonsalves · December 14, 2007

first off all you mixed up the parameters I modified the code a bit so that it work partly

<script type="text/javascript">
function addField(area,field,limit) 
{
	if(!document.getElementById) return; 
	var field_area = document.getElementById(area);
	var all_inputs = document.getElementsByTagName("input"); 
var last_item = all_inputs.length - 1;
var last = all_inputs[last_item].id;
	var count = Number(last.split("_")[1]) + 1;
	if(count > limit && limit > 0) return;
  
	if(document.createElement) 
{ 
  		var td = document.createElement("td");
  		var input = document.createElement("input");
  		input.td = field+count;
  		input.name = field+count;
  		input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
  		td.appendChild(input);
  		field_area.appendChild(td);
	}
else 
{ 
  		field_area.innerHTML += "<td><input name='"+(field+count)+"' td='"+(field+count)+"' type='text' /></td>";
 }
}
</script>
</head>

<body>
<form name="frm" method="POST">
<strong>Export</strong><br />

<table id = "htsus_area">
<tr>
	<td align = 'center'>HTSUS</td>
	<td align = 'center'>Commodity</td>
</tr>
<tr>
	<td><input type="text" name="htsus_1" id="htsus_1"</td>
	<td><input type="text" name="htsus_2" id="htsus_2"</td>
</tr>
</table>

<input type="button" value="Add Field" onclick="addField('htsus_area','htsus_',10);" />
</form>

</body>
</html>

hope its helpful

ainoy31 · December 14, 2007

Thanks for the advice. I went ahead and used JQuery to do this for me. Here is the code:

<script type="text/javascript" src="/inc/jquery.js?v=2" charset="ISO-8859-1"></script>
<style>
.hiddenunit
{
display: none;
}
#addUnit, #removeUnit
{
text-decoration: none;
}
</style>
<script type="text/javascript" charset="ISO-8859-1">  
$(document).ready(function() 
{
var added_units = [];
    var pnum = 1;

$('#addUnit').click(function()
{

	if(typeof(itemnum) != 'undefined' && itemnum > 5)
	{
		alert("Sorry, to add more, please fill in Commodity field in the Shipment Data section");
		return false;
	}

	blank = $('tr.hiddenunit');
        newitem = blank.clone().insertBefore(blank).removeClass('hiddenunit');
       	newitem.addClass("unit");
        itemnum = newitem.siblings().length;  

	//newitem.find('td.unitnum').text(itemnum + '.', true);
	newitem.find('input.com').attr("id", 'comm' + itemnum);
	newitem.find('input.com').addClass("com");
	newitem.find('input.com').attr({name: 'com[] ' + itemnum});

	newitem.find('input.htsus').attr("id", 'htsus' + itemnum);
	newitem.find('input.htsus').addClass("htsus");
	newitem.find('input.htsus').attr({name: 'htsus[] ' + itemnum});

	added_units.push(newitem);
});

$('#removeUnit').click(function()
{
	if(pnum == 2)
	{
		$('removeUnit').toggleClass("removeUnit");
	}

	pnum = pnum-1;
        var runit = added_units.pop();
        runit.remove();

});


});

</script>

<table>
        <tr>
          <td align="center">Commodity</td>
          <td align="center">HTSUS</td>
        </tr>
	<tr class="unit">
		<td><input type="text" name="comm[] 1" id="comm1" class="comm" size="10"  /></td>
		<td><input type="text" name="htsus[] 1" id="htsus1" class="htsus" size="10"  /></td>
	</tr>
	<tr class="hiddenunit">

		<td><input type="text" name="comm[] 0" id="ri0comm" class="com" size="10" /></td>
        	<td><input type="text" name="htsus[] 0" id="rii0htsus" class="htsus" size="10" /></td>
	</tr>
</table>
<a href="#" id="addUnit"><img src="/images/fam/package_add.gif" class="button" alt="Add Another Shipping Unit" title="Add More Unit" />Add More Unit</a>
<br>
<a href="#" id="removeUnit"><img src="/images/fam/package_delete.gif" class="button" alt="Remove Unit" title="Remove Unit" /> Remove Previous Unit</a></span>

Sign In

[SOLVED] Dynamic Form Field

Recommended Posts

ainoy31

Link to comment

Share on other sites

rajivgonsalves

Link to comment

Share on other sites

ainoy31

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information