SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    564
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to add fields dynamically ?

    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.

  2. #2
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Non-Member
    Join Date
    Jan 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll probably need something like this.
    hth

    Code JavaScript:
    <!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>

  4. #4
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    564
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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 ?

    Code:
    <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.

  5. #5
    Non-Member
    Join Date
    Jan 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tapan View Post
    How to retain the data and add new field ?
    The code I posted will do that for you.

  6. #6
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    564
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shastah View Post
    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.

  7. #7
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    564
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Can anyone help ?

    Thanks.

  8. #8
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    564
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shastah View Post
    The code I posted will do that for you.
    Hi,

    Also when i added <form> tag to your code it stopped working.

    Thanks.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Tapan View Post
    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.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    Non-Member
    Join Date
    Jan 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <!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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •