Addition of fields in the form

Problem : to realize funkcional " one more field " for the form with restriction of number of fields and an opportunity of removal .

The very first, that comes to mind: to put in pawn new fields beforehand in the form and to put him  style = "display:block". Further with the help of the unpretentious script changing value display to show / hide these fields. However, this way is not so convenient, since in case of 20 and more fields a plenty of a HTML-code will be passed, and for correction it is necessary to dig in scripts on the server.

More convenient and correctly to generate new fields of the form "hurriedly" a JavaScript-ohm and to insert into a DOM-tree.

Unfortunately, scripts for addition of fields are dependent on imposition of the form, therefore the panacea will not be. The code of the form which we shall try "to multiply" is below resulted, using JavaScript-functions.

<form method = "GET" action = "*">

<div id = "parentId">

<div>

<input name = "name_1" type = "text"/>

<a onclick = " return deleteField (this) " href = "*"> [X] </a>

</div>

</div>

<input class = "s" type = "submit" value = " GO! "/>

</form>

<a onclick = " return addField () " href = "*"> To add a field </a>

Essence of a script in adding a method appendChild the DIVINES generated "hurriedly" to parental the DIVINE (id = "parentId"). There is a reasonable question: " Instead of whether easier to use property innerHTML the same parental the DIVINE and using the operator + = to add to it  a code of new fields? ". The answer - " No! ". It is connected to that, that in some browsers at such way failure in job of the form, for example is observed:

- The form can lose the values entered earlier;

- The form can lose the entered data at sabmite;

Therefore, at dobalenie fields it is necessary to reconstruct accurately a DOM-branch of the form, operating only methods appendChild (or insertBefore) and removeChild.

var countOfFields = 1; // the Current number of fields

var curFieldNameId = 1; // Unique value for attribute name

var maxFieldLimit = 5; // the Maximal number of possible  fields

function deleteField (a) {

// We get access to the DIVINE, containing a field

var contDiv = a.parentNode;

// We delete this DIVINES from a DOM-tree

contDiv.parentNode.removeChild (contDiv);

// We reduce value of the current number of fields

countOfFields-;

// We return false that there was no transition on sslyke

return false;

}

function addField () {

// We check, whether the number of fields of a maximum has reached

if (countOfFields> = maxFieldLimit) {

alert (" the Number of fields has reached  the maximum = " + maxFieldLimit);

return false;

}

// We increase the current value of number of fields

countOfFields ++;

// We increase ID

curFieldNameId ++;

// We create an element of DIVINES

var div = document.createElement ("div");

// We add a HTML-content with pom. Properties innerHTML

div.innerHTML = " <input name = \ " name _ " + curFieldNameId + "\" type = \ " text \ "/> <a onclick = \ " return deleteField (this) \ " href = \ " * \ "> [X] </a> ";

// We add the new site in the end of the list of fields

document.getElementById ("parentId") .appendChild (div);

// We return false that there was no transition on sslyke

return false;

}

The remark

The resulted example only shows, how it is necessary to add fields to the form, a code it is possible (and it is necessary) to supplement and improve under the needs, getting rid from global variables and improving funkcional.

It is checked up in:

- IE 6;

- Opera 9.1;

- FF 1.5;