HTML Form Fields on the Fly

I have been developing websites in PHP for many years now and find myself continuing to refer to external websites when I need to produce HTML form fields on the fly. I've decided to include my findings here so I may refer to them in the future whenever I need to use PHP and JavaScript to create a web form with form fields that can be added on the fly. In this article, you will learn how to create your own HTML form with form fields that will create themselves on the fly as users enter additional information to the form.

Using JavaScript to Create Your Form Fields

There are many JavaScript tutorials you can read and scripts you can download to dynamically produce form fields for your HTML form. This tutorial will help you design your own dynamically generated form fields for your next project.

The first thing you will need is a section of your page that you can edit on the fly. We'll call this section the "dynamic div":

Example:
<div id="dynamic-div"> </div>

The next step is to create the JavaScript function that will be used to dynamically create the input fields for the form. The script for this example is listed below along with an explanation for an error encountered while creating this function and adding its behavior to a button on the page.

JavaScript Issue - Uncaught TypeError: object is not a function.

During a recent project using JavaScript to dynamically add input fields to a form, I encountered the following JavaScript error - "Uncaught TypeError: object is not a function." This error was occuring because I had named the JavaScript function with the same name as the button I was using to add the input fields to the form on the fly. To fix this error, all I needed to do was remove or change the value of the "name" attribute from the button.

Example:
<script language="JavaScript" type="text/javascript"> var counter = 0; var limit = 3; function addCoupon(tableName) { if (counter < limit) { var newtr = document.createElement('tr'); newtr.innerHTML = "<td class=\"right\">Coupon: </td><td><input name='coupons[]' /></td>"; document.getElementById(tableName).appendChild(newtr); counter++; } } </script> <input name="addCoupon" class="addcoupon" type="button" value="Add Coupon" onclick="addCoupon('coupons-div');" />