PDA

View Full Version : onClick - add field into form

jasong
06-23-2005, 06:40 AM
Hi there,

I have a html form, and I need it so that when a user clicks a button, it adds a field into the form.
I also need it to write <td></td> around the new field, and I need it to write this in a specific part row of a table.

How would I go about doing this?
I've tried searching for the past two hours, but no luck.

Many thanks, I appreciate it,
Jason
glenngv
06-23-2005, 07:33 AM
Can we see the layout of your table?
jasong
06-23-2005, 07:44 AM
Can we see the layout of your table?
Sure!
Here is what I have:
http://websiteready.net/scripts/tellfriend/design.htm

You can view the source.

I'm trying to add them at the
<!-- New fields go here -->
Part.

You can see my attempt at the JavaScript.
But I don't know how to write the new fields and the html where I want it.

Thanks for the help!
Jason
jasong
06-23-2005, 08:17 AM
I guess what the better question would be:
How do I specify where document.write writes to?

Could I create a new div and then write it in that?
glenngv
06-23-2005, 09:23 AM
function addField() {
var tbody = document.getElementById("tblBody");
var ctr = tbody.getElementsByTagName("input").length + 1;
var input;
if (document.all){ //input.name doesn't work in IE
input = document.createElement('<input name="friend_'+ctr+'">');
}
else{
input = document.createElement('input');
input.name = "friend_"+ctr;
}
input.id = input.name;
input.type = "text";
input.value = "";
input.className = "textfield";
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(ctr+". "));
cell.appendChild(input);
var row = document.createElement('tr');
row.appendChild(cell);
tbody.appendChild(row);
}
...
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody id="tblBody">
<tr>
<td height="30">
1. <input name="friend_1" type="text" class="textfield" id="friend_1" />
</td>
</tr>
<tr>
<td height="30">
2. <input name="friend_2" type="text" class="textfield" id="friend_2" />
</td>
</tr>
<tr>
<td height="30">
3. <input name="friend_3" type="text" class="textfield" id="friend_3" />
</td>
</tr>
<tr>
<td height="30">
4. <input name="friend_4" type="text" class="textfield" id="friend_4" />
</td>
</tr>
<!-- New fields go here -->

</tbody>
</table>
Bill Posters
06-23-2005, 10:07 AM
Wouldn't it be better to have the cell and input fields in there by default, but not on display and then use the css dom to set the display attribute of the cells to block?
It might even be preferable to have the cell visible by default and then use css dom to change its display attribute to display: none; directly after it's loaded. That way, the input fields are still accessible to those browsing without js enabled.

Another option would be to have the fields present, but set as either disabled or readonly, and then use js to make them editable via the onclick event.

Just a thought or three.
jasong
06-23-2005, 04:58 PM
Thank you Bill and especially Glenn!
I appreciate your help :)

For anybody who has found their way to this thread because they had the same problem I did, here is the full page (as the url I gave most likely isn't there anymore).


<!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=iso-8859-1" />
<title>Untitled Document</title>


</head>

<script language="javascript" type="text/javascript">

function addField() {
var tbody = document.getElementById("tblBody");
var ctr = tbody.getElementsByTagName("input").length + 1;
var input;

if ( ctr > 15 ) {
alert ("If you want to tell the whole world, dont do it all at once please");
}else{

if (document.all){ //input.name doesn't work in IE
input = document.createElement('<input name="field_'+ctr+'">');
}else{
input = document.createElement('input');
input.name = "field_"+ctr;
}

input.id = input.name;
input.type = "text";
input.value = "";
input.className = "textfield";
var cell = document.createElement('td');
cell.style.height = '30px';
cell.appendChild(document.createTextNode(ctr+". "));
cell.appendChild(input);
var row = document.createElement('tr');
row.appendChild(cell);
tbody.appendChild(row);

window.document.the_form.count.value = ctr;

}
}
</script>



<body>




<form name="the_form" id="the_form" method="post" action="">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody id="tblBody">
<tr>
<td height="30">
1. <input name="field_1" type="text" class="textfield" id="field_1" />
</td>
</tr>
<tr>
<td height="30">
2. <input name="field_2" type="text" class="textfield" id="field_2" />
</td>
</tr>
<tr>
<td height="30">
3. <input name="field_3" type="text" class="textfield" id="field_3" />
</td>
</tr>
<tr>
<td height="30">
4. <input name="field_4" type="text" class="textfield" id="field_4" />
</td>
</tr>

<tbody
</table>
<input name="count" type="hidden" id="count" value="4"/>
<input name="add" type="button" class="button" id="add" value="Add Another" onClick="addField();"/>

</form>


</body>
</html>




Good luck :)
mehidy
02-18-2012, 04:18 PM
Hi Guys...

Please advise how to add "Remove field" in the form after adding more filed.

Thanks for help.