Breaking News: Grepper is joining You.com. Read the official announcement!

javascript add fields dynamically

Add Answer

khadija jarrar answered on March 19, 2022 Popularity 5/10 Helpfulness 1/10

answer javascript add fields dynamically

related javascript add fields dynamically

related java script add fields dynamically

javascript add fields dynamically

Comment

//Add more fields dynamically.
function addField(field,area,limit) {
	if(!document.getElementById) return; //Prevent older browsers from getting any further.
	var field_area = document.getElementById(area);
	var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
	//Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
	//		field given in the argument is 'friend_' the last id will be 'friend_4'.
	var last_item = all_inputs.length - 1;
	var last = all_inputs[last_item].id;
	var count = Number(last.split("_")[1]) + 1;
	
	//If the maximum number of elements have been reached, exit the function.
	//		If the given limit is lower than 0, infinite number of fields can be created.
	if(count > limit && limit > 0) return;
 	
	if(document.createElement) { //W3C Dom method.
		var li = document.createElement("li");
		var input = document.createElement("input");
		input.id = field+count;
		input.name = field+count;
		input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
		li.appendChild(input);
		field_area.appendChild(li);
	} else { //Older Method
		field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
	}
}

Popularity 5/10 Helpfulness 1/10 Language javascript

Source: www.openjs.com

Tags: add javascript

Link to this answer
Share Copy Link

Contributed on Mar 19 2022

khadija jarrar

0 Answers Avg Quality 2/10

Closely Related Answers

javascript add fields dynamically

Comment

//Add more fields dynamically.
function addField(field,area,limit) {
	if(!document.getElementById) return; //Prevent older browsers from getting any further.
	var field_area = document.getElementById(area);
	var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
	//Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
	//		field given in the argument is 'friend_' the last id will be 'friend_4'.
	var last_item = all_inputs.length - 1;
	var last = all_inputs[last_item].id;
	var count = Number(last.split("_")[1]) + 1;
	
	//If the maximum number of elements have been reached, exit the function.
	//		If the given limit is lower than 0, infinite number of fields can be created.
	if(count > limit && limit > 0) return;
 	
	if(document.createElement) { //W3C Dom method.
		var li = document.createElement("li");
		var input = document.createElement("input");
		input.id = field+count;
		input.name = field+count;
		input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
		li.appendChild(input);
		field_area.appendChild(li);
	} else { //Older Method
		field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
	}
}

Popularity 6/10 Helpfulness 4/10 Language javascript

Source: www.openjs.com

Tags: add javascript

Link to this answer
Share Copy Link

Contributed on Mar 19 2022

khadija jarrar

0 Answers Avg Quality 2/10

java script add fields dynamically

Comment

<form name="frm" method="POST">
<strong>Friends List</strong><br />
<ol id="friends_area">
<li><input type="text" name="friend_1" id="friend_1" /></li>
<li><input type="text" name="friend_2" id="friend_2" /></li>
<li><input type="text" name="friend_3" id="friend_3" /></li>
<li><input type="text" name="friend_4" id="friend_4" /></li>
<li><input type="text" name="friend_5" id="friend_5" /></li>
</ol>
<input type="button" value="Add Friend Field" onclick="addField('friends_area','friend_',10);" />

<strong>Enemies List</strong><br />
<ol id="enemies_area">
<li><input type="text" name="enemy_1" id="enemy_1" /></li>
<li><input type="text" name="enemy_2" id="enemy_2" /></li>
<li><input type="text" name="enemy_3" id="enemy_3" /></li>
<li><input type="text" name="enemy_4" id="enemy_4" /></li>
<li><input type="text" name="enemy_5" id="enemy_5" /></li>
</ol>
<input type="button" value="Add Friend Field" onclick="addField('enemies_area','enemy_',0);" />
</form>

Popularity 6/10 Helpfulness 3/10 Language javascript

Source: www.openjs.com

Tags: script java add javascript

Link to this answer
Share Copy Link

Contributed on Mar 19 2022

khadija jarrar

0 Answers Avg Quality 2/10

javascript add fields dynamically

Contents

More Related Answers

javascript add fields dynamically

Closely Related Answers

javascript add fields dynamically

java script add fields dynamically

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.