i want to have a form that when you click a bottom that says "more" it will show 3 extra fields, thats for each click of the button. its for adding links to a category and each link has 3 parts to it for the db but i don't know how many links are going for each category and it would be annoying to have to refresh the page after each link if you are manually entering in 100 links.
so i need a onclick= create 2 text fields and 1 textarea. how do i do that?
adding new field onclick
Moderator: General Moderators
- n00b Saibot
- DevNet Resident
- Posts: 1452
- Joined: Fri Dec 24, 2004 2:59 am
- Location: Lucknow, UP, India
- Contact:
Here is the basic running code. you may want adding code to track the current no. of fields or you may easily track them in PHP
Code: Select all
<form name="frm">
<input type="button" onclick="createFields()" value="Add New Fields">
</form>
<script>
tf = 0;
ta = 0;
F = document.frm;
function createFields()
{
TF1 = document.createElement("INPUT");
TF1.type = "text";
TF1.name = "text"+(++tf);
F.appendChild(TF1);
TF2 = document.createElement("INPUT");
TF2.type = "text";
TF2.name = "text"+(++tf);
F.appendChild(TF2);
TA = document.createElement("TEXTAREA");
TA.cols = "50";
TA.rows = "10";
TA.name = "textarea"+(++ta);
F.appendChild(TA);
}
</script>- feyd
- Neighborhood Spidermoddy
- Posts: 31559
- Joined: Mon Mar 29, 2004 3:24 pm
- Location: Bothell, Washington, USA
although not working exactly like I wanted, here's the "correct" way of doing it
I was bored. 
Code: Select all
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
echo '<pre>';
var_export($_POST);
echo '</pre>';
}
?>
<html>
<head>
<script language="Javascript">
var i = 1;
function addMore() {
var frm = document.forms['foo'];
var w = document.createElement('HR');
var f;
frm.appendChild(w);
f = w = document.createElement('INPUT');
w.setAttribute('type','text');
w.setAttribute('name','field['+i+'][text1]');
frm.appendChild(w);
w = document.createTextNode(' ');
frm.appendChild(w);
w = document.createElement('INPUT');
w.setAttribute('type','text');
w.setAttribute('name','field['+i+'][text2]');
frm.appendChild(w);
w = document.createElement('BR');
frm.appendChild(w);
w = document.createElement('TEXTAREA');
w.setAttribute('name','field['+i+'][textarea]');
w.setAttribute('cols','35');
w.setAttribute('rows',(6+i).toString());
frm.appendChild(w);
i++;
f.scrollIntoView(false);
}
</script>
</head>
<body>
<form name="foo" action="" method="post">
<input type="text" name="field[0][text1]" /> <input type="text" name="field[0][text2]" /><br /><textarea name="field[0][textarea]" cols="35" rows="6"></textarea>
</form>
<a href="#" onclick="addMore()">More…</a>
<script language="Javascript">
/*
var frm = document.forms['foo'];
var c = frm.firstChild;
while(c) {
if(c.nodeName == '#text') {
alert(escape(c.nodeValue));
}
c = c.nextSibling;
}
*/
</script>
</body>
</html>- n00b Saibot
- DevNet Resident
- Posts: 1452
- Joined: Fri Dec 24, 2004 2:59 am
- Location: Lucknow, UP, India
- Contact:
btw, sometimes it very handy to use .cloneNode to copy some 'template row' (for dynamic tables), like this:
Code: Select all
<script type='text/javascript'>
function add_row(tbl) {
var table, template, section, newRow;
table = document.getElementById(tbl);
if(!table) return;
template = getTemplateRow(table);
section = template.parentNode;
newRow = section.appendChild(template.cloneNode(true));
item.rows.push(newRow);
newRow.className = '';
}
function getTemplateRow(table) {
for(var i=0, l=table.rows.length; i<l; i++) {
if(table.rows[i].className.match(/\brow_template\b/i)) {
return table.rows[i];
}
}
return false;
}
</script>
<style type='text/css'>
tr.row_template {display:none;}
table {border: solid green 1px;}
</style>
<button onclick="add_row('tbl1');">Click me</button>
<table id="tbl1">
<tr class="row_template"><td><input type="text" name="field[]" /></td><td><img src="img/something.gif" /></td></tr>
</table>