Menu
Hello!
I am trying to adapt a script that adds form inputs but I’m very green at JS yet and from previous experience (php and whatnot) I’ve found that after being on my own for a while and then asking for input usually some1 comes up with a tip that would save me hours so this time I figured I’d do it differently. Perhaps some of you may help me out while I google this nodes thing out and make some sense of it.
[URL=”http://files.getdropbox.com/u/1531805/1.html”]This
[URL=”http://files.getdropbox.com/u/1531805/attempt.html”]This
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script type=”text/javascript”>
<!–
var counter = 0;
function init() {
document.getElementById(‘moreFields’).onclick = moreFields;
moreFields();
}
function moreFields() {
counter++;
var newFields = document.getElementById(‘readroot’).cloneNode(true);
newFields.id = ”;
newFields.style.display = ‘block’;
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById(‘writeroot’);
insertHere.parentNode.insertBefore(newFields,insertHere);
}
function lessFields() {
counter–;
}
window.onload = moreFields;
// –>
</script>
</head>
<body>
<form action=”form.php” method=”post” name=”data” id=”1″>
<table width=”200″ align=”center”>
<tr>
<th scope=”col”><img src=”https://files.getdropbox.com/u/1531805/upbanner.png” width=”830″ height=”130″ alt=”text” /></th>
</tr>
<tr>
<td>
<table width=”829″><tr>
<td width=”100″><label>Order Date:</label></td>
<td><input name=”Order date:” type=”text” class=”txtbox”/></td>
</tr>
<tr>
<td><label>Teacher name:</label></td>
<td><input name=”Tname” type=”text” class=”txtbox” /></td>
</tr>
<tr>
<td><label>Subject:</label></td>
<td><input name=”Subject” type=”text” class=”txtbox”/></td>
</tr>
</table></td></tr><br><br><br>
<tr>
<td>
<table width=”829″ border=”1″ cellspacing=”1″>
<tr>
<td align=”center”><label>Autorius</label></td>
<td align=”center” style=”width:400px”><label>Antraste</label></td>
<td align=”center” style=”width:70px”><label>Metai</label></td>
<td align=”center” style=”width:70px”><label>Egz skaicius</label></td>
</tr>
<div id=”readroot” style=”display: none”><br>
<input type=”button” value=”Remove field”
onclick=”this.parentNode.parentNode.removeChild(this.parentNode);return lessFields()” /><br /><br />
<div><tr>
<td><input name=”Autor” type=”text” class=”txtbox2″/></td>
<td><input name=”Title” type=”text” class=”txtbox3″/></td>
<td><input name=”Year” type=”text” class=”txtbox4″/></td>
<td><input name=”Amount” type=”text” class=”txtbox4″/></td>
</tr></div>
</table>
</div>
<span id=”writeroot”></span>
</table>
<table width=”829″ align=”center”><tr height=”20″><td align=”right”>
<br><input type=”button” onclick=”return moreFields()” value=”Give me more fields!” />
<input type=”submit” value=”Send form” /></td></tr></table>
</form>
</body>
</html>
My current problem is being able to clone the table code. I’ve wrapped it around in a <div> but apparently that still doesnt get recognized as node. I think it should thou because it worked on some of the Nodes examples I’ve been through.
If that gets solved I will try to either get one remove button eliminating the last cloned “readroot” or multiple buttons but sided (new <tr>) with the table rows. Both of them will imply some node backtracking code changes that I am not sure I am yet able to get there :s
ps: ignore the ugly looking table I get it fixed wih css