SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: Extending form

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 1999
    Location
    Kuala Lumpur, Malaysia
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Extending form

    I'm looking for a way to add more field depending on the user's input,. e.g. the user inputs '10' in the option, and 10 more sets of fields are displayed below on the same page. How do I go about accomplishing this? Any help is greatly appreciated.
    DarkStation - No-nonsense Console Gaming Coverage.

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    #demoform {
    	position: relative;
    	width: 250px;
    	margin: 20px;
    	background: ghostwhite;
    }
    .cool, select {
    	font: 12px arial;
    	background: ghostwhite;
    }
    #fieldbox {
    	position: absolute;
    	right: 0;
    	top: 28px;
    	width: 120px;
    }
    .dynfield {
    	width: 120px;
    	font: normal 12px cursive;
    	color: black;
    	margin: 2px;
    	background: buttonface;
    }
    
    </style>
    <script type="text/javascript">
    
    addfields.n = 0;
    function addfields(oSelect)
    {
    	var el, newfield, numfields = Number(oSelect.options[oSelect.selectedIndex].value);
    	var sFieldname = 'text_';
    	var sClassname = 'dynfield';
    	var firstfield = null;
    	if (addfields.n > numfields)
    	{
    		if (confirm('This will remove ' + (addfields.n - numfields) + ' field(s). Is that OK?'))
    			while (addfields.n - numfields)
    			{
    				el = document.getElementById('fieldbox');
    				el.removeChild(el.lastChild);
    				--addfields.n;
    			}
    		return false;
    	}
    	else while (numfields - addfields.n)
    	{
    		newfield = document.createElement('INPUT');
    		newfield.setAttribute('type', 'text');
    		newfield.setAttribute('name', sFieldname + (addfields.n + 1));
    		newfield.setAttribute('value', sFieldname + (addfields.n + 1)); //demo, change 2nd argument to default
    		newfield.setAttribute('class', sClassname); //optional CSS
    		document.getElementById('fieldbox').appendChild(newfield);
    		if (!firstfield)
    			firstfield = newfield;
    		addfields.n++;
    	}
    	if (firstfield)
    		firstfield.focus();
    }
    
    </script>
    </head>
    <body>
    <form id="demoform">
    <input class="cool" type="button" value="add" onclick="return addfields(addnum)">
    <select name="addnum">
    <option value="0" selected="selected">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    </select><span class="cool"> fields to this form.</span>
    <div id="fieldbox"></div>
    </form>
    </body>
    </html>
    ::: certified wild guess :::


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
  •