Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

links that add sections to forms

Status
Not open for further replies.
jetclik

jetclik

Technical User
Joined
Jan 31, 2005
Messages
5
Location
US
Some forms have links on them where you click them and they add sections to the form. I'd like to do something similar with my form.

I'd like for someone to be able to click on the "Add name" link and have it at a row of the same information, however, there can only be a maximum of 9 rows including.

For each row that's created, it needs to have a "Remove name" link to the right, as shown in the code below, that will remove that column.

Once 9 rows are reached the "Add name" link needs to go away, and just have only the "Remove name" link. The Remove name link should only appear on the very last row.

Each row needs to also have it's own unique field IDs. (i.e. last1, last2, last3, etc)

Here's some HTML I threw together just to give you an idea...

<form id="nameForm" name="form1" method="post" action=""><table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="23%"> Last Name<br>
<input name="last1" type="text" id="last1">
<br>
</td>
<td width="24%">First Name<br>
<input name="first3" type="text" id="first3">
</td>
<td width="26%">Phone Number<br>
<input name="phone1" type="text" id="phone1">
</td>
<td width="27%">&nbsp;</td>
</tr>
<tr>
<td> Last Name<br>
<input name="last2" type="text" id="last2">
<br>
</td>
<td>First Name<br>
<input name="first2" type="text" id="first2">
</td>
<td>Phone Number<br>
<input name="phone3" type="text" id="phone3">
</td>
<td valign="bottom"><a href="#">Remove name</a></td>
</tr>
<tr>
<td><a href="#">Add name</a></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</form>


 
Sort by date Sort by votes
well i tried to make this script so that it would add rows to my table, but have no luck, and not sure where i went wrong...

<html>
<head>
<script type="text/javascript">
function insRow()
{
var x=document.getElementById('myTable').insertRow(3)
var w=x.insertCell(0)
var y=x.insertCell(1)
var z=x.insertCell(2)
w.innerHTML="Last name:<br><input name="last1" type="text" id="last1">"
y.innerHTML="First name:<br><input name="first1" type="text" id="first1">"
z.innerHTML="Phone:<br><input name="phone1" type="text" id="phone1">"
}
</script>
</head>

<body>
<form>
<table border="0" cellpadding="5" id="myTable">
<tr>
<td>Last name:<br>
<input name="last1" type="text" id="last1"></td>
<td>First name:<br>
<input name="first2" type="text" id="first2"></td>
<td>Phone:<br>
<input name="phone1" type="text" id="phone1"></td>
</tr>
</table>
<a href="#" onClick="insRow()">Add row</a>
</form>
</body>

</html>



Also, I'm trying to set a for loop, so that there will be no more than 9 rows. Here's what I put together:

for (i = 0; i <= 9; i++)

Is this correct? Where should I put it in the script?


Also, the IDs need to be dynamic based on the number of rows added (ie if you had 3 rows, then you should have lname1, lname2, and lname3, etc). Any thoughts here would be appreciated?


thanks
cj

 
Upvote 0 Downvote
i tried this and it worked!

however, one row has to always be constant, so the possibility exists that if someone adds a row by accident, they may need to remove it, and i haven't figured out how to add a remove link yet, any thoughts here would be great

<html>
<head>
<script language="JavaScript" type="text/JavaScript">
var numRow = 0;
var nwRowId = '';
var tdArray = new Array(3);

function addRow(){
numRow++;
nwRowId = "r" + numRow;
var tbody = document.getElementById('myTab').getElementsByTagName("TBODY")[0];
var nwRow = document.createElement("TR");
nwRow.setAttribute("id", nwRowId);
for(var k = 0; k < tdArray.length; k++){
var nwTD = document.createElement("TD");
nwRow.appendChild(nwTD);
}
tbody.appendChild(nwRow);
//Now that the new row is intact add HTML
resetHTML();
}

function resetHTML(){
tdArray.length = 0;
var td1HTML = '<input name="rate' +numRow+ '" type=text id="last" value="" size="20">';
var td2HTML = '<input name="charge' +numRow+ '" type=text id="first" value="" size="20">';
var td3HTML = '<input name="notes' +numRow+ '" type=text id="phone" value="" size="20">';
tdArray = [td1HTML,td2HTML,td3HTML];
var el = document.getElementById(nwRowId).getElementsByTagName('td');
for(j = 0; j < el.length; j++){
el[j].innerHTML = tdArray[j];
}
}
</script>
</head>

<body>
<form name="FAform" method="get">

<table cellpadding="5" id=myTab>
<tbody>
<tr>
<th>Last Name</th>
<th>First name</th>
<th>Phone</th>
</tr>
<tr><td><input name=rate type=text id="last" value="" size="20"></td>
<td><input name=charge type=text id="first" value="" size="20"></td>
<td><input name=notes type=text id="phone" value="" size="20"></td>
</tr>
</tbody>
</table>
<a href="#" onClick="addRow()">Add row</a>
<p>&nbsp; </p>
</td>
</tr>
<p>&nbsp;</p>
</form>
<p>&nbsp;</p>
</body>
</html>
 
Upvote 0 Downvote
i've gotten the add and remove rows section put together, however, i'm still stuck on the for loop...i need this function to disallow the creation of no more than 9 rows, any ideas?

<html>
<head>
<script language="JavaScript" type="text/JavaScript">
var numRow = 0;
var nwRowId = '';
var tdArray = new Array(3);

function addRow(){
numRow++;
nwRowId = "r" + numRow;
var tbody = document.getElementById('myTab').getElementsByTagName("TBODY")[0];
var nwRow = document.createElement("TR");
nwRow.setAttribute("id", nwRowId);
for(var k = 0; k < tdArray.length; k++){
var nwTD = document.createElement("TD");
nwRow.appendChild(nwTD);
}
tbody.appendChild(nwRow);
//Now that the new row is intact add HTML
resetHTML();
}

function resetHTML(){
tdArray.length = 0;
var td1HTML = '<input name="last' +numRow+ '" type=text id="last" value="" size="20">';
var td2HTML = '<input name="first' +numRow+ '" type=text id="first" value="" size="20">';
var td3HTML = '<input name="ticket' +numRow+ '" type=text id="ticket" value="" size="20">';
tdArray = [td1HTML,td2HTML,td3HTML];
var el = document.getElementById(nwRowId).getElementsByTagName('td');
for(j = 0; j < el.length; j++){
el[j].innerHTML = tdArray[j];
}
}
function removeRow()
{
var tbl = document.getElementById('myTab');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

</script>
</head>

<body>
<form name="FAform" method="get">

<table cellpadding="3" id=myTab>
<tbody>
<tr align="left">
<td width="120">Last name:</td>
<td width="120">First name:</td>
<td width="161">Ticket number:</td>
</tr>
<tr><td><input name=rate type=text id="last" value="" size="20"></td>
<td><input name=charge type=text id="first" value="" size="20">
</td>
<td>
<input name=notes type=text id="ticket" value="" size="20"></td>
</tr>
</tbody>
</table>
<a href="#" onClick="addRow()">Add passenger</a>
| <a href="#" onClick="removeRow()">Remove passenger</a>
</form>
<p>&nbsp;</p>
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question Question
Code that works on Windows, Android and Iphone
Replies
0
Views
914
rogerte
rogerte
Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
jomat
  • Locked
  • Question Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
1K
xwb
xwb
Rayj0000
  • Locked
  • Question Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
865
Rayj0000
Rayj0000

Part and Inventory Search

Sponsor

Back
Top