creating dynamic form fields

Report · Jun 03, 2010

I am trying to create a form with an input box, but also want to be able to have a link below it to be able to add another input box on demand. Does anyone know where i can find an example of this, i searched on google but wasn't able to find anything that good.

Report · Jun 03, 2010

I googled "javascript add form element" and got lots of offerings.

Report · Jun 07, 2010

Thanks for your response, but i've spent the last few days looking through all those tutorials and still could not figure out how to do this. Is there like a basic example that you know of on how to do this?

Report · Jun 07, 2010

Which ones did you try, and in what way did they not work?

--

Adam

Report · Jun 07, 2010

I tried the following code in a .cfm page and everytime i run it i just get the following error:

Server Error

The server encountered an internal error and was unable to complete your request.

Application server is busy. Either there are too many concurrent requests or the server still is starting up.

But any other page that run works fine, this is the only that gives me this error.

<html>
<head>
<title></title>
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
document.getElementById('text').innerHTML += "<input type='file' value='' /><br />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<cfform name="form">
<input type="button" onclick="addInput()" name="add" value="Add input field" />

</div>
</cfform>
</body>
</html>

Report · Jun 07, 2010

A little bit modified, but still doesn't work:

<html>
<head>
<title></title>
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
document.getElementById('text').innerHTML += "<input type='text' value='' name='field[]' /><br />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 10 text fields allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<cfform name="form" action="test.cfm" method="post">
<input type="button" onclick="addInput()" name="add" value="Add input field" />

</div>

Report · Jun 08, 2010

A little bit modified, but still doesn't work:

What do you mean by "doesn't work"? What does it do instead of working?

--
Adam

Report · Jun 07, 2010

The problem is likely being caused by a bunch of input type="file" controls without a name. Start your action page with <cfdump var="#form#"><cfabort> to see what you are submitting.

Also, test your js function with firefox. I don't think it supports innerHTML.

Report · Jun 07, 2010

I can't do that on the action page, it doesn't even get as far as loading the first page of it in order to be able to post it.

Report · Jun 07, 2010

Quirksmode has some good information on this.

http://www.quirksmode.org/dom/w3c_core.html#creatingelements

http://www.quirksmode.org/dom/domform.html