Page 1 of 1
adding new field onclick
Posted: Fri Oct 07, 2005 4:51 am
by shiznatix
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?
Posted: Fri Oct 07, 2005 6:28 am
by n00b Saibot
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>
Posted: Fri Oct 07, 2005 7:19 am
by shiznatix
many thanks. ill give that a try.
Posted: Fri Oct 07, 2005 7:52 am
by feyd
although not working exactly like I wanted, here's the "correct" way of doing it
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>

I was bored.

Posted: Fri Oct 07, 2005 8:03 am
by n00b Saibot
feyd wrote:I was bored.

Yeah! I truly understand your feelings

Posted: Fri Oct 07, 2005 8:45 am
by Weirdan
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>
Posted: Fri Oct 07, 2005 2:17 pm
by shiznatix
holy snap. i wish i was that quick at the fingers

thanks a bunch guys. i got it working