SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Feb 2006
    Posts
    257
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "Add another" button

    Hi,

    I am trying to recreate a system similar to the way attachments are added in gmail, where you can click "add another" and another text field appears on the screen in which you can attach another document.

    I will not be using these fields for attachments, the user will simply add values into them which will then be submitted as part of the form. I am just trying to get the add another functionality on my site.

    Can anyone point me in the right direction? I don't want the page to refresh each time another text field is added.

    Thanks a lot for any help.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Location
    Indonesia - Bali
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe something along these lines:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>Expanding Form</title>
    	<script type="text/javascript">
    	
    	window.onload = function() {
    		var fieldList = document.getElementById("txtFields");
    		var btn = document.getElementById("btnAdd");
    		btn.onclick = function() {
    			var fieldNum = fieldList.getElementsByTagName("li").length;
    			fieldList.innerHTML += '<li><input type="text" id="txt' + fieldNum + '" name="txt1' + fieldNum + '" /></li>';
    		}
    	}
    	</script>
    </head>
    <body>
    <form action="" method="post" id="formId">
    <ul id="txtFields">
    <li><input type="text" id="txt1" name="txt1" /></li>
    </ul>
    <input type="button" id="btnAdd" value="Add Another Field" />
    </form>
    </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
  •