Hello,
I need to make a form in which I have to enter upto 20 email addresses. But i want to show only 5 fields first and then an Add More button.
Upon pressing the Add More button it should add another field into the form and displayed.
I have seen this type of thing on several websites but don’t know how to do it. Can anyone please push me into the correct direction for the same ?
Thanks.
http://jsfiddle.net/sdleihssirhc/wQfLT/
Context is pretty important, and this script makes a lot of assumptions about the page. If you have something already built and you’re trying to add this to it, you’ll probably have to make some changes.
You’ll probably need something like this.
hth
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function addRow(){
var lastRow = document.getElementById('lastRow');
var newLastRow = lastRow.cloneNode(true);
var ins = newLastRow.getElementsByTagName('input');
for (k=0; k < ins.length; k++) {
ins[k].value = '';
}
lastRow.id = '';
document.getElementById('myTable').insertBefore(newLastRow, document.getElementById('addRow'));
}
</script>
</head>
<body>
<table>
<tbody id="myTable">
<tr id="lastRow">
<td>Email address</td>
<td><input type="text" name="ex2[]" value=""/></td>
</tr>
<tr id="addRow">
<td colspan="3">
<input type="button" name="addRow" value="Add Row" onclick="addRow();"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Hello,
I used the following and it works fine. But I m facing a issue if I input anything into the fields and press the + button to add additional field then the data of the existing fields wipes out. How to retain the data and add new field ?
<html>
<head>
<script language="javascript">
fil_fields = 0;
function addFile()
{
if (fil_fields != 4)
{
document.getElementById('files').innerHTML += "<input type='file' value='' name='ulfile[]' /><br />";
fil_fields += 1;
}
else
{
alert ("Only 5 files are allowed.");
document.form.addfi.disabled=true;
}
}
eml_fields = 0;
function addEmail()
{
if (eml_fields != 19)
{
document.getElementById('emails').innerHTML += "<input type='text' value='' size='30' name='email[]' /><br />";
eml_fields += 1;
}
else
{
alert ("Only 20 emails are allowed.");
document.form.addem.disabled=true;
}
}
</script>
<style>
body,p,td,input,file { font-family: Verdna,Arial,Tahoma; font-size: 12px; }
</style>
</head>
<body>
<form name="form" action="upload.php" method="post" onsubmit="check();">
<input type="hidden" name="MAX_FILE_SIZE" value="2000000000" />
<table border="0" align="center" cellpadding="7" cellspacing="0">
<tr>
<td valign="top" align="left">
<table border="1" cellpadding="5" cellspacing="0" align="center" style="border-collapse: collapse;" width="100%">
<tr>
<th style="background-color:#000; color:#fff;">Select File(s):</th>
</tr>
<tr>
<td><div id="files">
<input type='file' value='' name='ulfile[]' /> <input type="button" onclick="addFile()" name="addfi" value="+" /><br />
</div></td>
</tr>
</table>
<br />
<table border="1" cellpadding="5" cellspacing="0" align="center" style="border-collapse: collapse;" width="100%">
<tr>
<th style="background-color:#000; color:#fff;">Your Message:</th>
</tr>
<tr>
<td><textarea name="message" style="width:100%;" rows="3"></textarea></td>
</tr>
</table>
</td>
<td valign="top">
<table border="1" cellpadding="5" cellspacing="0" align="center" style="border-collapse: collapse;">
<tr>
<th style="background-color:#000; color:#fff;">Specify E-Mail Address(es):</th>
</tr>
<tr>
<td><div id="emails">
<input type='text' value='' size='30' name='email[]' /> <input type="button" onclick="addEmail()" name="addem" value="+" /><br />
</div></td>
</tr>
</table>
</td>
</tr>
</table>
<p align="center"><input type="submit" name="btnUpload" value="Click to Begin Uploading" onclick="javascript:check();" /></p>
</form>
</body>
</html>
Please help.
Thanks.
The code I posted will do that for you.
Hello,
I want to put the + button besides the first textbox and when I do that using your code it then copies the button also. I do not want to copy the button and just the input box.
Please suggest.
Thanks.
Hello,
Can anyone help ?
Thanks.
Hi,
Also when i added <form> tag to your code it stopped working.
Thanks.
One solution to that is to keep aside an unseen text box without the + button, which is then cloned when you want to add another one.
hi to everyone, my first post :). Change the input button to a button to make it work in the form and then hide the 3rd cell in each new row.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function addRow(){
var lastRow = document.getElementById('lastRow');
var newLastRow = lastRow.cloneNode(true);
var ins = newLastRow.getElementsByTagName('input');
for (k=0; k < ins.length; k++) {
ins[k].value = '';
}
lastRow.id = '';
document.getElementById('myTable').insertBefore(newLastRow, document.getElementById('addRow'));
document.getElementById('lastRow').getElementsByTagName('td')[2].style.display='none';
}
</script>
</head>
<body>
<table>
<tbody id="myTable">
<tr id="lastRow">
<td>Email address</td>
<td><input type="text" name="ex2[]" value=""/></td>
<td><button onclick="addRow();">Add row</button></td>
</tr>
</tbody>
</table>
</body>
</html>