Solved

Adding Form Fields using Javascript and LI

Posted on 2013-01-28
10
154 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

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
 

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

Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

831 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