confirming values in form

[superfly404]

i've built a simple form, where it ask for first name, last name, and phone number. (you can do a max of 9)

When you click the confirm link, in theory, it should take you over to a confirm section (with onClick) where it will confirm all the info you just entered...maybe with some inner html, but i'm unsure what i need to do since the fields are dynamic?

if anyone has any ideas, would love to get feedback

<script>
// add rows
var numRow = 0;
var nwRowId = '';
var tdArray = new Array(3);

function addRow(){
if (numRow<8) {
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();
}
else {
document.getElementById("addlink").innerHTML='&nbsp;';
}}
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="phone' +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];
}
}
function removeRow()
{
var tbl = document.getElementById('myTab');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
////// review confirm
function reviewConfirm() {
doConfirm();
var elem = document.getElementById("reviewConfirm");
elem.style.display = "block";
document.getElementById('second').style.display = 'none';
}
function doConfirm() {
document.getElementById("confirmation11").innerHTML=document.getElementById('last').value + ', ' + document.getElementById('first').value;
document.getElementById("confirmation12").innerHTML=document.getElementById("appCode").value;
}
</script>
<h1>Information</h1><br><div id="second">
<table width="550" border="0" cellpadding="0" cellspacing="0" class="cpySmall" id=myTab>

<tbody>
<tr>
<td width="151"><span class="cpySmall">Last name:</span><br>
<input name=last type=text id="last" value="" size="20"></td>
<td width="154"><span class="cpySmall">First name:</span><br>
<input name=first type=text id="first" value="" size="20">
</td>
<td width="245"><span class="cpySmall">Phone number:</span><br>
<input name=phone type=text id="ticket" value="" size="20"></td>
</tr>
</table>

<table width="248" height="28" border="0" cellpadding="0" cellspacing="0" class="cpySmall">
<tr>
<td width="109" id="addlink"><a href="#passengers" onClick="addRow()"><span class="cpySmall">Add passenger</span></a> </td>
<td width="139"><a href="#passengers" onClick="removeRow()"><span class="cpySmall">Remove passenger</span></a> </td>
</tr>

</table>
<p><a href="#" onClick="reviewConfirm()">Confirm</a></p>
</div>
<div id="reviewConfirm" style="display: none;">
<h1>Confirmation</h1><br>
<table width="550" border="0" cellpadding="0" cellspacing="0" id="confirmSet">
<tr valign="top" class="cpyBody">
<td width="50%" height="25" class="cpyHeader2">Passenger Name(s)</td>
<td width="50%" height="25" class="cpyHeader2">Phone Numbers</td>
</tr>
<tr class="cpyBody">
<td height="20" id="confirmation11">&nbsp;</td>
<td height="20">&nbsp;</td>
</tr>
</table></div>

thanks
eric

 

[vbkris]

you need server side scripting for that. not javascript...

Known is handfull, Unknown is worldfull

 

[superfly404]

are you sure? Because for forms I"ve done in the past I've used a getElementById with innerHTML using an onclick within a form and those work...I just can't figure out how to do that here since these are created dynamically, maybe with some kind of for loop?


thanks

 

[MOrac]

Two problems in the approach you're using that I can see: a) your original table row has no id to locate it (not directly problematic, but inconsistent with tagging the subsequent rows), and b) you're repeating the id tags used to identify your fields in each row, which means that getElementById will not be useful in retrieving ids once a second row exists.

You could either iterate through the rows on the table, sub-iterating through the columns to locate each input field and retrieve the data (in which case you don't need row and input id tags), or you could use discrete input tag names (eg r1:last, r1:first, r1hone, r2:last ...) so that you can just use getElementId to retrieve your data. Either approach would work, but the second is shorter to code.

 

[superfly404]

is anyone able to show me an example I can work from? I'm still a little confused...