Solved

Adding Form Fields using Javascript and LI

Posted on 2013-01-28
10
157 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

734 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