Solved

Adding Form Fields using Javascript and LI

Posted on 2013-01-28
10
153 Views
Last Modified: 2013-01-29
Hello I'm tring to add mutiple input fields to li using javascript i'm having problems

		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.
		input.size = "2";		
			
		li.appendChild(input);
		field_area.appendChild(li);

Open in new window


Im tring to add more fields like li.appenChild(input1+input2 etc... how does it work ?
0
Comment
Question by:akuss
  • 6
  • 4
10 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 38828694
test page : http://jsfiddle.net/fFewE/1/
    var field_area = document.getElementById("farea");
    var field = "textbox";
    for(var count=0;count<10;count++) {
        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.
        input.size = "2";		
                
        li.appendChild(input);
        field_area.appendChild(li);
    }

Open in new window

0
 

Author Comment

by:akuss
ID: 38828740
I worded by questions wrong this is what i need done with the code

function addField(area,field,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");
	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) { //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.
		input.size = "2";

		input1.id = "county_"+count;
		input1.name = "county_"+count;
		input1.type = "text";
		input1.size = "20";


		input2.id = "searchfee_"+count;
		input2.name = "searchfee_"+count;
		input2.type = "text";
		input2.size = "5";
		
		input3.id = "copyfee_"+count;
		input3.name = "copyfee_"+count;
		input3.type = "text";
		input3.size = "5";
		
		input4.id = "recordingfee_"+count;
		input4.name = "recordingfee_"+count;
		input4.type = "text";
		input4.size = "5";
		
		input5.id = "miscfee_"+count;
		input5.name = "miscfee_"+count;
		input5.type = "text";
		input5.size = "5";
		
		input6.id = "turntime_"+count;
		input6.name = "turntime_"+count;
		input6.type = "text";
		input6.size = "5";		
			
		li.appendChild(input);
		field_area.appendChild(li);
		
	}
}
//-->
</script>

Open in new window


if you see the other input1, 2,3, etc i need to add them to each li so pretty much they display like this

                                            <li>
                                                  <input type="text" name="state_1" id="state_1" size="2" />
                                                <input type="text" name="county_1" id="county_1" size="20" />
                                                <input type="text" name="searchfee_1" id="searchfee_1" size="5" />
                                                <input type="text" name="copyfee_1" id="copyfee_1" size="5" />
                                                <input type="text" name="recordingfee_1" id="recordingfee_1" size="5" />
                                                <input type="text" name="miscfee_1" id="miscfee_1" size="5" />
                                                <input type="text" name="turntime_1" id="turntime_1" size="5" />
                                                <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a>
                                            </li>
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38828756
please provide a link to see your page
0
 

Author Comment

by:akuss
ID: 38828774
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38828800
what wrong with your code, check the picture attached from your page
Clipboard02.jpg
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:akuss
ID: 38828840
Hello leo if you click the button "add new county coverage it will only add the first field not all of them
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38828912
try this :
function addField(area,field,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");
	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) { //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.
		input.size = "2";
		li.appendChild(input);

		var input1 = document.createElement("input");			
		input1.id = "county_"+count;
		input1.name = "county_"+count;
		input1.type = "text";
		input1.size = "20";
		li.appendChild(input1);

		var input2 = document.createElement("input");			
		input2.id = "searchfee_"+count;
		input2.name = "searchfee_"+count;
		input2.type = "text";
		input2.size = "5";
		li.appendChild(input2);
		
		var input3 = document.createElement("input");			
		input3.id = "copyfee_"+count;
		input3.name = "copyfee_"+count;
		input3.type = "text";
		input3.size = "5";
		li.appendChild(input3);
		
		var input4 = document.createElement("input");			
		input4.id = "recordingfee_"+count;
		input4.name = "recordingfee_"+count;
		input4.type = "text";
		input4.size = "5";
		li.appendChild(input4);
		
		var input5 = document.createElement("input");			
		input5.id = "miscfee_"+count;
		input5.name = "miscfee_"+count;
		input5.type = "text";
		input5.size = "5";
		li.appendChild(input5);
		
		var input6 = document.createElement("input");			
		input6.id = "turntime_"+count;
		input6.name = "turntime_"+count;
		input6.type = "text";
		input6.size = "5";	
		li.appendChild(input6);

		field_area.appendChild(li);
		
	}
}

Open in new window

0
 

Author Comment

by:akuss
ID: 38828924
That worked however can it be formatted like the ones above check the script on the website along with the remove link at the end ?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38828965
function addField(area,field,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");
	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) { //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.
		input.size = "2";
		li.appendChild(input);

		var input1 = document.createElement("input");			
		input1.id = "county_"+count;
		input1.name = "county_"+count;
		input1.type = "text";
		input1.size = "20";
		li.appendChild(input1);

		var input2 = document.createElement("input");			
		input2.id = "searchfee_"+count;
		input2.name = "searchfee_"+count;
		input2.type = "text";
		input2.size = "5";
		li.appendChild(input2);
		
		var input3 = document.createElement("input");			
		input3.id = "copyfee_"+count;
		input3.name = "copyfee_"+count;
		input3.type = "text";
		input3.size = "5";
		li.appendChild(input3);
		
		var input4 = document.createElement("input");			
		input4.id = "recordingfee_"+count;
		input4.name = "recordingfee_"+count;
		input4.type = "text";
		input4.size = "5";
		li.appendChild(input4);
		
		var input5 = document.createElement("input");			
		input5.id = "miscfee_"+count;
		input5.name = "miscfee_"+count;
		input5.type = "text";
		input5.size = "5";
		li.appendChild(input5);
		
		var input6 = document.createElement("input");			
		input6.id = "turntime_"+count;
		input6.name = "turntime_"+count;
		input6.type = "text";
		input6.size = "5";	
		li.appendChild(input6);

		var anchor = document.createElement("a");
		anchor.style.cursor = "pointer";
		anchor.style.color = "blue";
		anchor.onclick = function() { this.parentNode.parentNode.removeChild(this.parentNode); };
		anchor.innerHTML = "Remove Field";
		li.appendChild(anchor);

		field_area.appendChild(li);
		
	}
}

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 38828967
for the format, use css
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now