topic

Creation of dynamic forms with help JavaScript

Very much often at creation of HTML-forms there is a need{requirement} to learn{find out} from the user of value of the same parameters which quantity{amount} is beforehand not known. For example, if it is the form of addition of the message in a forum with an opportunity to attach one or several files, for example, with photos. As other example the form with the questionnaire in which there are data on children can serve. And in that and other case it is impossible to assume beforehand quantity{amount} of fields which the visitor of a site will wish to fill.

Without use JavaScript this problem can be solved two ways:

1. To limit quantity{amount} of fields of input to any maximum reasonable number. For example, the quantity{amount} of people at which the number of children is more 5, is rather insignificant. However this way a little bit ugly - first, we initially block up the form with the big number of fields of input, and, two will be necessary for the majority of users from force - three first, and second, all of us-taki limit the user in an opportunity to specify the full information on - so if the person at which 10 sons some from them to him should be offered will wish to fill in the form.

2. To carry out input of the information stage by stage. For example, at the first stage to suggest the user to enter quantity{amount} of photos which he wishes to load on the server, and at the second stage by means of a script on the server to generate the form with the necessary quantity{amount} of fields of input.

However, using JavaScript, we can facilitate to the user input of the information on. To make it it is possible, for example, as follows:

Let, for definiteness, it is necessary for user to enter the information on children, and for simplification of an example - only a name and date of a birth. On the part of the user we need a browser understanding a tag <span> and regular expressions, supporting function getElementById object document, and also understanding property innerHTML, for example, Internet Explorer 5.5

Let's issue that part of the form which contains the information on children, as the table. In the very first line of the table we shall place names stolbcov and we shall add one more cell in which we shall place the link to addition of one more line with fields of input of the information. In the second line of the table we shall place fields of input of the information plus a cell referring to removal{distance} of a line with the information. That it was possible to distinguish a line of the names given from a line, we shall add in a tag <tr> parameter id = "newline" and number{room} of a line in square brackets (that it was easier to distinguish number{room} of a line from a symbol 0) nomer = "[0]". Then we shall place the table in inside tag span with any name, for example, table. And at last, we shall add still a field of input such as hidden to count lines of the table.

In a result at us something should turn out like the following HTML-code:

<caption> Data on children </caption>

<tr> <td> the Name </td> <td> Date of a birth </td> <td> <a href = "*"

onclick = " return addline (); "> to add </a> </td> </tr>

<td valign = "top"> <a href = "*" onclick = " return rmline (0); "> to remove </td> </tr> </table>

</span>

That all this design has earned, it is necessary to write still two functions on JavaScript: addition of a new line and removal{distance} of wrongly added line. And, in the given example it is supposed, that the quantity{amount} of lines with the data can be and zero besides the given realization of the dynamic form has lack: if to remove all the line long, to add lines it will be already impossible.

function addline ()

{

c = ++ document.getElementById (' count ') .value; // we increase the counter of lines

s=document.getElementById (' table ') .innerHTML; // we receive a HTML-code of the table

s=s.replace (/[\r\n]/g, "); // it is cut out all symbols of translation of lines

re = / (. *) (<tr id =. *>) (<\/table>)/gi;

// This regular expression allows to allocate last line of the table

s1=s.replace (re, ' $2 '); // we receive a HTML-code of last line of the table

// We replace all figures to square brackets

s2=s1.replace (/\ [\d + \]/gi, ' [' +c + '] ');

// On number{room} of a new line

s2=s2.replace (/(rmline \ () (\d + \))/gi, ' $1 ' +c + ') ');

// We replace argument of function rmline with number{room} of a new line

s=s.replace (re, ' $1$2 ' +s2 + ' $ 3 ');

// We create a HTML-code with the added code of a new line

document.getElementById (' table ') .innerHTML=s;

// We return result on a place of the initial table

return false; // that there was no transition under the link

}

function rmline (q)

{

s=document.getElementById (' table ') .innerHTML;

s=s.replace (/[\r\n]/g, ");

re=new RegExp (' <tr id = "? newline "? nomer = "? \\ [' +q + '. *? <\\/tr> ', 'gi');

// This regular expression allows to allocate a line of the table with set number{room}

s=s.replace (re, ");

// We replace her with an empty place

document.getElementById (' table ') .innerHTML=s;

return false;

}

</script>

Thus, we have found out, that use of regular expressions in JavaScript+DHTML opens to us many new opportunities for creation of the convenient user interface. In particular, the given reception is used by the author of these lines in the interface of the manager of the site for addition of several pictures to page in one form.