Form with mutliple sub entries

[Staggan]

Hello.

How can I have a single form which has a number of standard fields in it, say date and name… but for that same date and name I want to add multiple additional entries for say phone calls recieved… (silly example I know)

How can I enter the standard data once and an undefined amount of phone calls received ? without having to put a maximum number of possible entry fields on the page… ?

So, say my Form is :

Date:
Name:

Call From:

If I have 50 calls for that person I only want to enter their name and the date once and then add as many calls as needed…

How can I do it?

Thanks

[sarthakpatel]

Hi,

Use javascript clone. this will solve your issue.

Here is the example:

The HTML of the form is:

<input type="button" value="Remove review"
	onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />

<input name="cd" value="title" />

<select name="rankingsel">
	<option>Rating</option>
	<option value="excellent">Excellent</option>
	<option value="good">Good</option>
	<option value="ok">OK</option>
	<option value="poor">Poor</option>
	<option value="bad">Bad</option>
</select><br /><br />

<textarea rows="5" cols="20" name="review">Short review</textarea>
<br />Radio buttons included to test them in Explorer:<br />
<input type="radio" name="something" value="test1" />Test 1<br />
<input type="radio" name="something" value="test2" />Test 2

<span id="writeroot"></span>

<input type="button" id="moreFields" value="Give me more fields!" />
<input type="submit" value="Send form" />

The actual form fields are in a DIV with id readroot and display: none. This DIV is a template that should not be changed by the user. When the user wants more fields we clone the DIV and append this clone to the form. We do this once onLoad, so that the user sees one set of form fields when entering the page.

The DIV is outside the actual FORM so that the template fields aren’t sent to the server when the form is submitted.

The span with id writeroot serves as a marker. The new sets of form fields should be inserted just before it.
Adding form fields

This script adds sets of form fields when necessary:

var counter = 0;

function moreFields() {
counter++;
var newFields = document.getElementById(‘readroot’).cloneNode(true);
newFields.id = ‘’;
newFields.style.display = ‘block’;
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById(‘writeroot’);
insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = moreFields;

First of all we need a counter, because all sets of form fields should get unique names. We do this by appending counter to the names in the template. Initialize counter:

var counter = 0;

Then for the actual function. Start by increasing counter by 1.

function moreFields() {
counter++;

Then we clone our template, remove its id and set its display to block. The id ‘readroot’ should remain unique in the document, and the clone of the template should be visible to the user.

var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';

We go through the child nodes of the clone

var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {

Whenever a child node has a name we append counter to it. Thus the names of all form fields remain unique.

	var theName = newField[i].name
	if (theName)
		newField[i].name = theName + counter;
}

Now the clone is ready to be inserted into the document. We insert it just before the span with id=“writeroot”.

var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);

}

Finally we execute this function once onLoad so that the user will initially see one set of form fields.

window.onload = moreFields;

Removing form fields

Each clone of the template contains a ‘Remove review’ button:

<input type="button" value="Remove review"
	onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />

Clicking on it causes the button to remove its parent node (the DIV) from its own parent node (the FORM). Thus one set of form fields disappears entirely, never to return.