[SOLVED] "Add another x" (add another form element(s)) button

[Catfish]

Hi all,

 

I haven't used Javascript much mainly PHP, but I want to add some funky functionality to my page and need one of those form buttons you press to add another (sometimes a set of) form elements to the page because there is more data you want to input.

 

Examples of this are when people upload photos to a website, there is generally a button that says "add another file" or something and when you click it all the form elements for another file to upload appears on the page.

 

I tried Googling for it, but I don't think I could find the right words to describe what I want. Also couldn't find it in this forum so I'm sorry if this is a common question.

 

Thanks for any help.

[Catfish]

Best solution I found is: http://forums.digitalpoint.com/showthread.php?t=1057277

 

I can work it out from there. Seems I should've been looking for "dynamic form elements" not "add another for element".

[Catfish]

Ok, I know I posted this solved, but now I have just tried some input with my forms and if I add one input field and type in it then click to add another input field the value i typed in the first one disappears! And so on everytime you add another field.

 

How can I stop this from happening?

 

Here is my JS code:

<script type="text/javascript">
function addInput()
{
var y = document.getElementById("nextID");
var z = y.value;
y.value++;
var x = document.getElementById("inputs");
x.innerHTML += "Field " + z + " - Name: <input type=\"text\" name=\"fieldName[" + z + "]\" />";
x.innerHTML += " Type: <select type=\"dropdown\" name=\"fieldType[" + z + "]\">'.addslashes(outputSQLiteTypes()).'</select>";
x.innerHTML += " Extras: <input type\"text\" name=\"fieldExtras[" + z + "]\" /><br />";
}
</script>

 

and this is the PHP/HTML that calls it:

 

<form action="'.$_SERVER['PHP_SELF'].'" method="POST">.urlAllValues($localPostGet, TRUE)
// post all POST/GET values as well
<input type="button" onmousedown="addInput();" value="Add Field" />
<input type="hidden" id="nextID" value="1" />'."\n".'<div id="inputs"></div>
<input type="hidden" name="action" value="submitTable" />
<input type="submit" value="Create Table" />
</form>

 

Please note that the above HTML is output via PHP, so the PHP function call in there is legitimate, I have just removed all of the quotes for readability.

[Catfish]

The problem of the form fields losing their values has been fixed by using createElement() function. It was a bit more coding, but it hasmade the script much more compatible.

 

The code seen above works in IE but not in Firefox, which is why I noticed the error.

 

Topic is now solved