Dynamically Add/Delete Form Fields Elements Using Pure JavaScript

Ok so someone at work has built a form and then the boss comes back and says he wants to cross sell the products entered into the input fields by dynamically creating a list with links to alternative products and accessories. Unfortunately the person who has built the form page is away so you’ve got to pick the job up. So how do we approach this problem and where do we start?

This javascript function is simple if you understand its arguments. The way it works is by appending a new child element to a parent DIV. The parent element is specified using the parentId argument. The type of element to be created is specified using the elementTag argument. The new elements ID is specified using ths elementId argument. Lastly, the innerHTML of the new element is specified using the html argument.

Features:

1.) Pure JavaScript Added.
2.) No External JavaScript Or JQuery File.
3.) Simple HTML Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

JavaScript:

<script>
 function removeRow(r)
 {
 var fooId = "foo";
 var id = r.id.substring(3,r.id.length-1);
 for(i=1;i<=3;i++)
 {
 document.getElementById(fooId+id+i).remove();
 }
 document.getElementById(fooId+id+5).nextSibling.remove();
 document.getElementById(fooId+id+5).remove();
 }
 var x = 1;
 function add() {
 var fooId = "foo";
 for (i=1; i<=3; i++)
 {
 //Create an input type dynamically.
 var element = document.createElement("input");
 //Assign different attributes to the element.
 element.setAttribute("type", fooId+x+i);
 element.setAttribute("name", fooId+x+i);
 element.setAttribute("id", fooId+x+i);
 if(i==1){
 element.setAttribute("value", "First name");
 }
 if(i==2){
 element.setAttribute("value", "Last name");
 }
 if(i==3){
 element.setAttribute("value", "age");
 }
 var foo = document.getElementById("fooBar");
 foo.appendChild(element);
 foo.innerHTML += ' ';
 }
 i++;
 var element = document.createElement("input");
 element.setAttribute("type", "button");
 element.setAttribute("value", "Remove");
 element.setAttribute("id", fooId+x+i);
 element.setAttribute("name", fooId+x+i);
 element.setAttribute("onclick", "removeRow(this)");
 foo.appendChild(element);
 var br = document.createElement("br");
 foo.appendChild(br);
 x++;
 }
</script>

HTML:

<form id="form" name="form" action="test.php" method="post" enctype="multipart/form-data">
 <input type="text" id="foo01" name="foo01" value="first name"> 
 <input type="text" id="foo02" name="foo02" value="last name"/> 
 <input type="text" id="foo03" name="foo03" value="age"> 
 <br>
 <span id="fooBar">
 </span>
 <INPUT type="button" value="Add more data" onclick="add()"/>
 <input type="submit" value="Submit">
</form>

Customization:

1.) Edit Your JavaScript As Per Your Requirements. Rest Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…