Insanityville

Add HTML elements on the fly

By on February 6th, 2009

As I said at the beginning of the post-jQuery link simulator in this series of tricks add a new "episode". In this post, I want to describe an excellent way to add to dynamically, without refresh, fields in a form. The fields can be of any kind.

In this example, I’ll add a text field, which will have its own id to be handled later by using a needed server-side language of choice. In this example I’ll use PHP.

As in the previous article, we need to include the jQuery library.

Let’s begin.

Step 1:

Whether you use a layout based on tables or div’s, the procedure is the same.
You have to define a container that is updated with the new field. You also need to define a link to trigger this action.

Below I’ll describe the HTML code that we will work with next. Pay attention to the id and name of the elements. They are important because we use them for DOM manipulation.

file: form.html

<label> Text 1 </ label>
<input type="text" name="field[0]"/>
<p id="newFields"> </ p>
<p>
<a href="javascript:;" id="addField"> Add a field </ a>
</ p>

I left the link "Add" at the bottom so we will add the fields on top of it (obviously), and in this way, we won’t be forced to use the vertical scroll to get to him to add a new camp.

Step 2:

It is time to add the magic in this small jQuery script.

file: code.js

$ (document). ready (function () (
     $ ( ‘#addField’). click(function () (
         var i = 1;
         i++;
         var newField = ‘Text <label>’ + i + ‘</ label> <input type="text" /> name="field[]"’;
         $ ( ‘#newFields’). append (newField);
     ));
));

It mandatory that the declaration of the "newField" is made on one line.

Now that we have that very simple and useful mechanism, it is time to deal with posted data on the server side.

If, for example, you add 2 new text fields, you get 3 elements (I’ve included the existing one), after we submit the form, in the php variable $_POST[ 'field'] you will get the following array:

Array (
   [0] => Text field 1
   [1] => Text field 2
     [2] => Text field 3
)

These texts, once obtained, can be handled in any way we want.

An example of the way that we used this "trick" is to develop a POS interface. In a recently developed application, I used this mechanism and 2 plugins to achieve a POS interface. In my application, I have 3 fields, namely: product name, quantity and unit price. I have all this this code (for the 3 fields) in the newField variable to add them dynamically. One of the 2 plugins is LiveQuery and it is helping me to update the DOM dynamically, in the sense that when you add a new field, it automatically binds events to them, the 2nd plugin is AutoComplete. Then the server, takes this data, arranges it in a printable invoice fromat and send them to print on the cash register.

In the next article, I will explain how to attach these events created new fields.

I hope you will use this mechanism to all kinds of manipulations.

Links

Show me love

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks