SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: add fields when link clicked
-
Jun 26, 2007, 11:34 #1
- Join Date
- Oct 2004
- Location
- uk
- Posts
- 853
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
add fields when link clicked
Hi guys
On my form
Users type in there previous jobs
What i want is when the user clicks on a link then another field is added so they can add another job. I want to keep it on the same page
How can I do this
-
Jun 26, 2007, 14:10 #2
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <script type="text/javascript"> var fieldCount = 0; function add() { var parent = document.getElementById('container'); var div = document.createElement('DIV'); div.id = 'cont_' + fieldCount; var label = document.createElement('label'); var input = document.createElement('input'); var remove = document.createElement('a'); label.setAttribute('for','itm_' + fieldCount); label.appendChild(document.createTextNode('Label ' + fieldCount + ' ')); input.id = 'itm_' + fieldCount; input.type = 'text'; remove.appendChild(document.createTextNode(' X')); remove.onclick = function() { del(this); } div.appendChild(label); div.appendChild(input); div.appendChild(remove); div.appendChild(document.createElement('BR')); parent.appendChild(div); fieldCount++; }; function del(which) { var parent = which.parentNode.parentNode; parent.removeChild(which.parentNode); }; </script> <link rel="stylesheet" type="text/css" media="all" /> <style type="text/css" media="all"> </style> </head> <body> <form action="" method="post"> <div id="container"> </div> <div id="footer"><br /><br /><a onclick="add();">New</a> </form> </body> </html>
-
Jun 26, 2007, 14:33 #3
- Join Date
- Oct 2004
- Location
- uk
- Posts
- 853
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanks for that
only problem is
I need it to add 3 fields
job name
start date
end date
How can I do it to add multiple fields
-
Jun 26, 2007, 14:49 #4
- Join Date
- Oct 2004
- Location
- Birtley, UK
- Posts
- 2,439
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <script type="text/javascript"> var fieldCount = 0; function add() { var parent = document.getElementById('container'); var div = document.createElement('DIV'); div.id = 'cont_' + fieldCount; var lbl_name = document.createElement('LABEL'); lbl_name.setAttribute('for','txt_name_' + fieldCount); lbl_name.appendChild(document.createTextNode('Job Name: ')); var lbl_start = document.createElement('LABEL'); lbl_start.setAttribute('for','txt_start_' + fieldCount); lbl_start.appendChild(document.createTextNode('Start Date: ')); var lbl_end = document.createElement('LABEL'); lbl_end.setAttribute('for','txt_end_' + fieldCount); lbl_end.appendChild(document.createTextNode('End Date: ')); var txt_name = document.createElement('INPUT'); txt_name.id = 'txt_name_' + fieldCount; txt_name.type = 'text'; var txt_start = document.createElement('INPUT'); txt_start.id = 'txt_start_' + fieldCount; txt_start.type = 'text'; var txt_end = document.createElement('INPUT'); txt_end.id = 'txt_end_' + fieldCount; txt_end.type = 'text'; var remove = document.createElement('A'); remove.onclick = function() { del(this); }; remove.appendChild(document.createTextNode('X')); div.appendChild(lbl_name); div.appendChild(txt_name); div.appendChild(document.createElement('BR')); div.appendChild(lbl_start); div.appendChild(txt_start); div.appendChild(document.createElement('BR')); div.appendChild(lbl_end); div.appendChild(txt_end); div.appendChild(document.createElement('BR')); div.appendChild(document.createElement('BR')); div.appendChild(remove); parent.appendChild(div); fieldCount++; }; function del(which) { var parent = which.parentNode.parentNode; parent.removeChild(which.parentNode); }; </script> <link rel="stylesheet" type="text/css" media="all" /> <style type="text/css" media="all"> </style> </head> <body> <form action="" method="post"> <div id="container"> </div> <div id="footer"><br /><br /><a onclick="add();">New</a> </form> </body> </html>
Bookmarks