Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Adding Form Fields using Javascript and LI

Posted on 2013-01-28
10
Medium Priority
?
162 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 83

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 83

Expert Comment

by:leakim971
ID: 38828756
please provide a link to see your page
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 83

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 83

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 83

Accepted Solution

by:
leakim971 earned 2000 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 83

Expert Comment

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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

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'…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Suggested Courses

564 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