Creating form fields on the fly.

kevgais

Hi Guys,

I have a form where users will enter names and email address of people. I have put 5 Rows 2 of input boxes on a form and the data is sent to the mysql database no problem.

My problem is that in some case people will need to add more than 5 people. I'm thinking that a 'Add additional person' button that will create 2 new input boxes on the fly is the solution but:

1 - I have no idea how to create buttons on the fly

and

2 - how to send this data to the mysql database as the db only has the 5 fields needed.

Does anyone have an idea on the best way forward on this?

Cheers for any help at all.
Kev

rsmith

JavaScript would be th easiest way to add form fields on the fly.
You should think about your structure. It should have 3 fields. id, name, e-mail address. the id field should be the primary key and auto-increment.

kevgais

thanks for the reply,

I have no experience of javascript, do you have any examples I can look at or research?

Many thanks
Kev

leatherback

Hi,

this function replicates the content of a div (Which I usually have hidden in my page) and writes it into the 'writeroot' div. I use an onchange() on the last element in the form to call the script, so a new row is added when people fill out the last element of the form

var counter = 0;

/*
function init() {
    window.myCounter = counter;
	document.getElementById('AddMoreFieldsNow').onclick = moreFields;
	moreFields();
}
*/
function moreFields() {
	counter = window.myCounter; // new
	counter++;
	var newFields = document.getElementById('ingredientroot').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+ ']';
		  newField[i].id   = theName + '[' + counter+ ']';
		  }
	}
	var insertHere = document.getElementById('writeroot');
	insertHere.parentNode.insertBefore(newFields,insertHere);
	window.myCounter = counter;
}