Recently I ran across this issue on a project. Whereas I need to employ a html textarea when needed (dynamic), plus the delete link.
These is the Javascript part:
function addElement(fieldType, fieldName, className, ctrl1, ctrl2) {
var ni = document.getElementById(ctrl1);
var numi = document.getElementById(ctrl2);
var num = (document.getElementById(ctrl2).value -1)+ 2;
numi.value = num;
var divIdName = ctrl1+num;
var newdiv = document.createElement('span');
newdiv.setAttribute("id",divIdName);
if (fieldType == 'textarea') {
newdiv.innerHTML = "<textarea name=\""+ fieldName +"[]\" id=\"id_"+ fieldName +"["+num+"]\" class= \""+ className +"\"></textarea> [<b><a href=\"javascript:;\" onclick=\"removeElement(\'"+divIdName+"\', \'"+ctrl1+"\')\">x</a></b>]<br />";
} else if (fieldType == 'file') {
newdiv.innerHTML = "<input type=\"file\" name=\""+ fieldName +"[]\" id=\"id_"+ fieldName +"["+num+"]\" class= \""+ className +"\" /> [<b><a href=\"javascript:;\" onclick=\"removeElement(\'"+divIdName+"\', \'"+ctrl1+"\')\">x</a></b>]<br />";
} else {
newdiv.innerHTML = "<input type=\""+ fieldType +"\" name=\""+ fieldName +"[]\" value=\"\" class= \""+ className +"\" /> [<b><a href=\"javascript:;\" onclick=\"removeElement(\'"+divIdName+"\', \'"+ctrl1+"\')\">x</a></b>]<br />";
}
ni.appendChild(newdiv);
}
function removeElement(divNum, ctrl1) {
var d = document.getElementById(ctrl1);
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
Function addElement(fieldType, fieldName, className, ctrl1, ctrl2):
Available arguments:
- fieldType:
HTML field types, available: text (default), textarea and file (upload).
- fieldName:
Name of the field, this will make something like this:
<input type="text" name="someName" .../> - className:
HTML class, something like this:
<input type="text" class="someClass" .../> - ctrl1:
Parent id, see sample below.
- ctrl2:
Child id, see sample below.
If you want to add textarea field with name "myTextarea", class "textareaClass", child id "theChild" and parent id "theParent", it would be:
addElement('textarea', 'myTextarea', 'textareaClass', 'theChild', 'theParent')
And this is the html part:
<form action="" method="POST" name="myForm_name" id="myForm_id">
<input type="hidden" value="0" id="thePictureLinks" />
<div id="myPictureLinks"></div>
[<a href="javascript:;" onclick="addElement('text', 'pictureLinks', 'txt', 'myPictureLinks', 'thePictureLinks');">add field</a>]
</form>
Live sample is here.
Good luck!
Ref: Professional JavaScript for Web Developers (Wrox Programmer to Programmer)
If you enjoyed this post, make sure you subscribe to our
Comments
Perfect! Thank you very much.
how to input data type file to mysql ?
Just add a submit button before the closing form tag and var_dump the $_POST at the destination to see the "$_POST"ed data.
Post new comment