Solved

Adding Form Fields using Javascript and LI

Posted on 2013-01-28
10
155 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
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.

 

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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery Toggle & Anchor Links 5 43
Explain this javascript function to me 2 29
How to create a slidershow with the use of the property cover in css 15 49
Javascript 2 28
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

828 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