** UPDATE: This functionality is outdated. Look at a more recent post on how to add more field to a form field:
'Add More' form fields with javascript / jquery **
One of my clients needed the ability for users to refer their family and friends to the website by sending them an email. The idea was to have 5 fixed fields, and the ability to add more fields on the fly before hitting submit.
Step 1 is obviously adding the static html code (with a tiny bit of php to avoid redundancy):
<form action="mysubmitpage.php" method="post">
<div id='fields'>
<? for($i=1; $i<6; $i++){?>
<div>
name: <input type="text" name="refname<?=$i?>" />
email: <input type="text" name="refemail<?=$i?>" />
</div>
<? }?>
</div>
<div style="margin-top:5px;">
<input type="submit" value="Send Invitations" name="send" />
</div>
</form>
Step 2 involves adding an 'add more' link, which calls the javascript function that adds the field. I'm passing the number of the next field into the function, so when the time comes to submit it to the server I can distinguish the fields. I would have preferred to use IE's outerHTML but that's not supported in my preferred browser firefox, so to keep everything neat I get the existing fields and append the new field to the end of the string. I also replace the "add more" link so next time it is clicked the number 7, 8, 9 etc is passed.
<script language="javascript">
function addrefField(i){
var newfieldContent = "<div>name: <input type=\"text\" name=\"refname"+i+"\" /> email: <input type=\"text\" name=\"refemail"+i+"\" /> </div> \n";
var oldfieldContent = document.getElementById('fields').innerHTML;
el = document.getElementById('fields');
el.innerHTML = oldfieldContent + newfieldContent;
x = i + 1;
var addmoreContent = document.getElementById('addmorelink');
addmoreContent.innerHTML = '<div><a href="javascript:addrefField('+x+')">add more</a></div><input type="hidden" name="numberfields" value="'+i+'" />';
}
</script>
<div id='addmorelink'>
<a href="javascript:addrefField(6)">add more</a>
<input type="hidden" name="numberfields" value="6" />
</div>
Step 3 : The above code seems to work fine in IE, but in Firefox there is a problem: the value of the existing fields is reset to whatever the DOM originally served up to the user. So if the user had started to fill out the fields and then clicked the 'add more' link, all fields would have been emptied. With every problem comes a solution ofcourse. I googled my problem and stumbled upon this post. By adding a function (updateDOM()) on the onBlur event for each field, we can update the DOM to reflect the already inserted values. So here's the entire code for the form:
<script language="javascript">
function addrefField(i){
var newfieldContent = "<div>name: <input type=\"text\" name=\"refname"+i+"\" onBlur=\"updateDOM(this)\" /> email: <input type=\"text\" name=\"refemail"+i+"\" onBlur=\"updateDOM(this)\" /> </div> \n";
var oldfieldContent = document.getElementById('fields').innerHTML;
el = document.getElementById('fields');
el.innerHTML = oldfieldContent + newfieldContent;
x = i + 1;
var addmoreContent = document.getElementById('addmorelink');
addmoreContent.innerHTML = '<div><a href="javascript:addrefField('+x+')">add more</a></div><input type="hidden" name="numberfields" value="'+i+'" />';
}
function updateDOM(inputField) {
// if the inputField ID string has been passed in, get the inputField object
if (typeof inputField == "string") {
inputField = document.getElementById(inputField);
}
if (inputField.type == "select-one") {
for (var i=0; i<inputField.options.length; i++) {
if (i == inputField.selectedIndex) {
inputField.options[inputField.selectedIndex].setAttribute("selected","selected");
}
}
} else if (inputField.type == "text") {
inputField.setAttribute("value",inputField.value);
} else if (inputField.type == "textarea") {
inputField.setAttribute("value",inputField.value);
} else if ((inputField.type == "checkbox") || (inputField.type == "radio")) {
if (inputField.checked) {
inputField.setAttribute("checked","checked");
} else {
inputField.removeAttribute("checked");
}
}
}
</script>
<form action="index.php" method="post">
<div id='fields'>
<? for($i=1; $i<6; $i++){?>
<div>
name: <input type="text" name="refname<?=$i?>" onBlur="updateDOM(this)" /> email:
<input type="text" name="refemail<?=$i?>" onBlur="updateDOM(this)" /> </div>
<? }?>
</div>
<div id='addmorelink'>
<a href="javascript:addrefField(6)">add more</a>
<input type="hidden" name="numberfields" value="6" />
</div>
<div style="margin-top:5px;"> <input type="submit" value="Send Invitations" name="send" /> </div>
</form>
Step 4 : All that's left is processing the fields on the next page:
<?php
$loops = $_POST['numberfields'];
for($i=1;$i<=$loops;$i++){
$namepost = "refname" . $i;
$name = $_POST[$namepost];
$emailpost = "refemail" . $i;
$email = $_POST[$emailpost];
if($name && $email){
echo $name .' ' .$email;
echo '<br />';
}
}
?>