Multiple boxes based on users

[mshahMCS]

have two textboxes:

<input type="text" name="name" size="10">
<input type="text" name="email" size="10">

I want to add another button, so when the user clicks it, it will create another set of the same boxes right below it. FOr example, they could choose to enter 1 name & email, or a 100 at the same time.

Once they did that, I need coldfusion to submit that form to the databse. But the problem is, I dont know how many names the user will enter, so how do I figure out what is what?

Coldfusion I can figure out myself given some time, but the javascript is where I need the help.

I would appreciate any and all help with this.

Thank you very much.

[jatar_k]

I don't think you can dynamically create new textboxes using js, please correct me if I'm wrong.

Why don't you generate the page using coldfusion and have a dropdown for the number of contacts to add as well as an add another contact which just adds one more to the list. Then when they select a number it can post to itself, create the proper number of fields and name them accordingly, repopulating ones that were already entered.

[txbakers]

You can use a simple CSS style=display:none to hide existing rows from the user. Then, when they click "more" another will show.

You can also do it dynamically, but it would be a bit more difficult. You would call a function that would create two more sets of boxes on the fly. You'dd need to kee track of the index number of each set so when you submit, you still have individual entries.

[garann]

I had to do something similar in an application. This isn't tested cross-browser (IE-only intranet), but hopefully it'll at least provide the inspiration..

Script:

var rowCt = 0;
function addRow() {
rowCt++;
var contentDiv = document.getElementById("allRows");
contentDiv.innerHTML += "<input type='hidden' name='hdnItinID" + rowCt + "' value='0'><input type='text' size='10' name='txtItinDate" + rowCt + "' onchange='chkDate(this)'><br>";
var hdnField = document.getElementById("itins");
hdnField.value = rowCt;
}

HTML:

<div id="allRows" style="text-align:center;">
<input type="hidden" name="hdnItinID0" value="0">
<input type="text" size="10" name="txtItinDate0"><br>
</div>
<input type="hidden" id="itins" name="hdnItins" value="0">
<a href="javascript:addRow()">Add a row</a>

So basically that DIV 'allRows' holds one set of input boxes to start. Each time the user clicks the link to add a row, the javascript variable 'rowCt' gets incremented, a new set of boxes (with unique names based on 'rowCt') are appended to the 'allRows' DIV, and the new value of 'rowCt' is passed to a hidden input element to be used on the server-side.

hth,
g.