Results 1 to 3 of 3

Thread: Dynamic Add Form in Table

  1. #1
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Dynamic Add Form in Table

    Several years ago, I was good with Javascript - now I am very rusty. I need to make a web form. I would like to keep all of the code for this form on a single page (ie. no .js files) (minus the eventual e-mail processing script of course). When someone chooses the "Number of Files to Attach", I want the page to dynamically create the "Document #:" text and corresponding 2-row table form.

    Each three-line document form would need unique field names.

    As you can see, I already have a script to populate a drop-down list after a first drop-down list's choice is selected. I would like this feature to work for however many documents are added.

    I would greatly appreciate any help you can provide. I am unsure what further info is needed, but would be more than happy to answer further questions. Thank you!!!

    Code:
    <html>
    <head>
    <title>Car Design</title>
    </head>
    <!-- Second part of the dilemma: how to use this script if there are multiple documents -->
    <script type="text/javascript">
    	function configureDropDownLists(ddl1,doc1_sys) {
    		var e1 = new Array('Bilge & Ballast (BL)', 'Boiler (B)', 'Vents & Sounds (V)', 'Other (GENR)');
    		var e2 = new Array('One Line Diagram (ONE)', 'Sound Powered Phone (SPP)', 'Other (GENR)');
    		var h1 = new Array('Damage Stability (DAM)', 'Intact Stability (INT)', 'Lightship (LTSH)', 'Other (GENR)');
    		switch (ddl1.value) {
    			case 'E1':
    				document.getElementById(doc1_sys).options.length = 0;
    				for (i = 0; i < e1.length; i++) {
    					createOption(document.getElementById(doc1_sys), e1[i], e1[i]);
    				}
    				break;
    			case 'E2':
    				document.getElementById(doc1_sys).options.length = 0; 
    				for (i = 0; i < e2.length; i++) {
    					createOption(document.getElementById(doc1_sys), e2[i], e2[i]);
    				}
    				break;
    			case 'H1':
    				document.getElementById(doc1_sys).options.length = 0;
    				for (i = 0; i < h1.length; i++) {
    					createOption(document.getElementById(doc1_sys), h1[i], h1[i]);
    				}
    				break;
    			default:
    				document.getElementById(doc1_sys).options.length = 0;
    				break;
    		}
    	}
    	function createOption(ddl, text, value) {
    		var opt = document.createElement('option');
    		opt.value = value;
    		opt.text = text;
    		ddl.options.add(opt);
    	}
    </script>
    <form name="car" action="html_form_action.asp" method="get">
    Submissions:<br>
    Number of Files to Attach: <select name="numberoffiles">
    <option value="0">0</option>
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option></select> Expedite? <input type="radio" name="nvic" value="Yes">Yes <input type="radio" name="nvic" value="No" checked>No
    <br>
    <!-- From here to the below comment is what needs to be dynamically added with each "number of files to attach" -->
    Document 1:<br>
    <table>
    <tr>
    <td>Name:</td>
    <td><input type="text" size="60" name="doc1_name"></td>
    <td><input type="file" name="doc1_file" size="72" allow="text"></td>
    </tr>
    <tr>
    <td>Number:</td>
    <td><input type="text" name="doc1_number"> Rev.: <input type="text" size="2" maxlength="2" name="doc1_rev"> Type:  <select name="doc1_type">
    <option value="Letter">Letter</option>
    <option value="Manual">Manual</option>
    <option value="Plans">Plans</option></select></td>
    <td>Branch: <select id="ddl" onchange="configureDropDownLists(this,'doc1_sys')">
    <option value=""></option>
    <option value="E2">Electrical</option>
    <option value="H1">Hull & Stability</option>
    <option value="E1">Machinery & Piping</option>
    </select>
    System: 
    <select id="doc1_sys">
    </select></td>
    </tr>
    </table>
    <!-- End of what needs to be dynamically added with each "number of files to attach" -->
    <br>
    <br>
    <input type="reset" value="Clear">
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	Pageasposted.jpg 
Views:	126 
Size:	11.8 KB 
ID:	5011  

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    I don't think you want to add a form in a table, it looks to me that you want to add a table with additional form elements in in it to an existing form.

    Anyways, this works pretty well for that:

    Code:
    <html>
    <head>
    <title>Car Design</title>
    </head>
    <!-- Second part of the dilemma: how to use this script if there are multiple documents -->
    <script type="text/javascript">
    	function configureDropDownLists(ddl, doc_sys) {
    		doc_sys = document.getElementsByName('doc' + doc_sys + '_sys')[0];
    		var e1 = new Array('Bilge & Ballast (BL)', 'Boiler (B)', 'Vents & Sounds (V)', 'Other (GENR)');
    		var e2 = new Array('One Line Diagram (ONE)', 'Sound Powered Phone (SPP)', 'Other (GENR)');
    		var h1 = new Array('Damage Stability (DAM)', 'Intact Stability (INT)', 'Lightship (LTSH)', 'Other (GENR)');
    		switch (ddl.value) {
    			case 'E1':
    				doc_sys.options.length = 0;
    				for (i = 0; i < e1.length; i++) {
    					createOption(doc_sys, e1[i], e1[i]);
    				}
    				break;
    			case 'E2':
    				doc_sys.options.length = 0; 
    				for (i = 0; i < e2.length; i++) {
    					createOption(doc_sys, e2[i], e2[i]);
    				}
    				break;
    			case 'H1':
    				doc_sys.options.length = 0;
    				for (i = 0; i < h1.length; i++) {
    					createOption(doc_sys, h1[i], h1[i]);
    				}
    				break;
    			default:
    				doc_sys.options.length = 0;
    				break;
    		}
    	}
    	function createOption(ddl, text, value) {
    		var opt = document.createElement('option');
    		opt.value = value;
    		opt.text = text;
    		ddl.options.add(opt);
    	}
    	function adddocs(num){
    		adddocs.docs = adddocs.docs || [document.getElementById('doc1')];
    		var numdocs = adddocs.docs.length, newdoc, lastdoc, needed, newname, newfile, oldfile, newnum, newrev, newtype, newbranch, newsys;
    		if(num == 0){num = 1;}
    		if(num < numdocs){
    			while(numdocs-- > num){
    				adddocs.docs[numdocs].parentNode.removeChild(adddocs.docs[numdocs]);
    				adddocs.docs.splice(numdocs, 1);
    			}
    		} else if (num > numdocs) {
    			needed = num - numdocs;
    			while(--needed > -1){
    				newdoc = adddocs.docs[0].cloneNode(true);
    				adddocs.docs.push(newdoc);
    				numdocs = adddocs.docs.length;
    				newdoc.id = 'doc' + numdocs;
    				newdoc.firstChild.nodeValue = 'Document ' + numdocs;
    				(lastdoc = adddocs.docs[numdocs - 2]).parentNode.insertBefore(newdoc, lastdoc.nextSibling);
    				(newname = document.getElementsByName('doc1_name')[1]).value = '';
    				newname.name = 'doc' + numdocs + '_name';
    				newfile = document.createElement('input');
    				newfile.type = 'file';
    				oldfile = document.getElementsByName('doc1_file')[1];
    				newfile.name = 'doc' + numdocs + '_file';
    				newfile.setAttribute('allow', oldfile.getAttribute('allow'), 0);
    				newfile.size = oldfile.size;
    				oldfile.parentNode.replaceChild(newfile, oldfile);
    				(newnum = document.getElementsByName('doc1_number')[1]).name = 'doc' + numdocs + '_number';
    				newnum.value = '';
    				(newrev = document.getElementsByName('doc1_rev')[1]).name = 'doc' + numdocs + '_rev';
    				newrev.value = '';
    				(newtype = document.getElementsByName('doc1_type')[1]).name = 'doc' + numdocs + '_type';
    				newtype.options.selectedIndex = 0;
    				(newbranch = document.getElementsByName('ddl1')[1]).name = 'ddl' + numdocs;
    				newbranch.onchange = function(){};
    				newbranch.options.selectedIndex = 0;
    				newbranch.onchange = (function(newbranch, numdocs){
    					return function(){
    						configureDropDownLists(newbranch, numdocs);
    					};
    				})(newbranch, numdocs);
    				(newsys = document.getElementsByName('doc1_sys')[1]).name = 'doc' + numdocs + '_sys';
    				newsys.options.length = 0;
    			}
    		}
    	}
    	function resetassist(){
    		adddocs(1);
    		document.getElementsByName('doc1_sys')[0].options.length = 0;
    	}
    </script>
    <form name="car" action="html_form_action.asp" method="get">
    Submissions:<br>
    Number of Files to Attach: <select name="numberoffiles" onchange="adddocs(this.value);">
    <option value="0">0</option>
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option></select> Expedite? <input type="radio" name="nvic" value="Yes">Yes <input type="radio" name="nvic" value="No" checked>No
    <br>
    <!-- From here to the below comment is what needs to be dynamically added with each "number of files to attach" -->
    <div id="doc1">Document 1:<br>
    <table>
    <tr>
    <td>Name:</td>
    <td><input type="text" size="60" name="doc1_name"></td>
    <td><input type="file" name="doc1_file" size="72" allow="text"></td>
    </tr>
    <tr>
    <td>Number:</td>
    <td><input type="text" name="doc1_number"> Rev.: <input type="text" size="2" maxlength="2" name="doc1_rev"> Type:  <select name="doc1_type">
    <option value="Letter">Letter</option>
    <option value="Manual">Manual</option>
    <option value="Plans">Plans</option></select></td>
    <td>Branch: <select name="ddl1" onchange="configureDropDownLists(this, 1)">
    <option value=""></option>
    <option value="E2">Electrical</option>
    <option value="H1">Hull & Stability</option>
    <option value="E1">Machinery & Piping</option>
    </select>
    System: 
    <select name="doc1_sys">
    </select></td>
    </tr>
    </table>
    <br>
    </div>
    <!-- End of what needs to be dynamically added with each "number of files to attach" -->
    <br>
    <input type="reset" value="Clear" onclick="resetassist(); return true;">
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>
    I changed the two id assignments to name assignments because it seemed easier to work with that way, and you will need those names on the receiving page in order for it to GET the values.

    Everything is incremented and the select population function works for each created group of drop downs.

    At least that's how it's working here. I might have missed something. Let me know, also if you have any questions.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Here's another version that's a little more elegant, cross browser, and flexible:

    Code:
    <!DOCTYPE html><!-- Standards invoking DOCTYPE required for IE 8, perhaps others -->
    <html>
    <head>
    <title>Car Design</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    	function configureDropDownLists(ddl, doc_sys) {
    		(doc_sys = document.getElementsByName('doc' + doc_sys + '_sys')[0]).options.length = 0;
    		var options = configureDropDownLists.options[ddl.value.toLowerCase()], i = -1;
    		if(options){ while (++i < options.length) { createOption(doc_sys, options[i]); } }
    	}
    	configureDropDownLists.options = {
    		e1: ['Bilge & Ballast (BL)', 'Boiler (B)', 'Vents & Sounds (V)', 'Other (GENR)'],
    		e2: ['One Line Diagram (ONE)', 'Sound Powered Phone (SPP)', 'Other (GENR)'],
    		h1: ['Damage Stability (DAM)', 'Intact Stability (INT)', 'Lightship (LTSH)', 'Other (GENR)']
    	};
    	function createOption(ddl, text, value) {
    		ddl.options.add(new Option(text, value || text));
    	}
    	function adddocs(num){
    		adddocs.docs = adddocs.docs || [document.getElementById('doc1')];
    		var numdocs = adddocs.docs.length, newdoc, lastdoc, needed, newinputs, input, newel, oldel, newselects, select;
    		if(num < 1){num = 1;}
    		if(num < numdocs){
    			--num;
    			while(--numdocs > num){
    				(lastdoc = adddocs.docs[numdocs]).parentNode.removeChild(lastdoc);
    				adddocs.docs.splice(numdocs, 1);
    			}
    		} else if (num > numdocs) {
    			needed = num - numdocs;
    			while(--needed > -1){
    				newdoc = adddocs.docs[0].cloneNode(true);
    				adddocs.docs.push(newdoc);
    				numdocs = adddocs.docs.length;
    				newdoc.id = 'doc' + numdocs;
    				newinputs = newdoc.getElementsByTagName('input');
    				input = newinputs.length;
    				while(--input > -1){
    					if((newel = newinputs[input]).type === 'text'){
    						newel.name = newel.name.replace('1', numdocs);
    						newel.value = '';
    					} else if ((oldel = newinputs[input]).type === 'file'){
    						newel = document.createElement('input');
    						newel.type = 'file';
    						newel.name = oldel.name.replace('1', numdocs);
    						newel.setAttribute('allow', oldel.getAttribute('allow'), 0);
    						newel.size = oldel.size;
    						oldel.parentNode.replaceChild(newel, oldel);
    					}
    				}
    				newselects = newdoc.getElementsByTagName('select');
    				select = newselects.length;
    				while(--select > -1){
    					newel = newselects[select];
    					if(newel.name === 'doc1_type'){
    						newel.options.selectedIndex = 0;
    					} else if (newel.name === 'ddl1'){
    						try{newel.removeAttribute('onchange', 0);}catch(e){}
    						newel.onchange = function(){};
    						newel.options.selectedIndex = 0;
    						newel.onchange = (function(newel, numdocs){
    							return function(){
    								configureDropDownLists(newel, numdocs);
    							};
    						})(newel, numdocs);
    					} else if (newel.name === 'doc1_sys'){
    						newel.options.length = 0;
    					}
    					if(newel.name){newel.name = newel.name.replace('1', numdocs);}
    				}
    				newdoc.firstChild.nodeValue = newdoc.firstChild.nodeValue.replace('1', numdocs);
    				(lastdoc = adddocs.docs[numdocs - 2]).parentNode.insertBefore(newdoc, lastdoc.nextSibling);
    			}
    		}
    	}
    	function resetassist(){
    		adddocs(1);
    		document.getElementsByName('doc1_sys')[0].options.length = 0;
    	}
    </script>
    </head>
    <body>
    <form name="car" action="html_form_action.asp" method="get">
    Submissions:<br>
    Number of Files to Attach: <select name="numberoffiles" onchange="adddocs(this.value);">
    <option value="0">0</option>
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option></select> Expedite? <input type="radio" name="nvic" value="Yes">Yes <input type="radio" name="nvic" value="No" checked>No
    <br>
    <!-- Begin what's dynamically added with each "number of files" -->
    <div id="doc1">Document 1:<br><!-- there can be no space, line break, or tag between <div id="doc1"> and the text "Document 1:" -->
    <table>
    <tr>
    <td>Name:</td>
    <td><input type="text" size="60" name="doc1_name"></td>
    <td><input type="file" name="doc1_file" size="72" allow="text"></td>
    </tr>
    <tr>
    <td>Number:</td>
    <td><input type="text" name="doc1_number"> Rev.: <input type="text" size="2" maxlength="2" name="doc1_rev"> Type:  <select name="doc1_type">
    <option value="Letter">Letter</option>
    <option value="Manual">Manual</option>
    <option value="Plans">Plans</option></select></td>
    <td>Branch: <select name="ddl1" onchange="configureDropDownLists(this, 1)">
    <option value=""></option>
    <option value="E2">Electrical</option>
    <option value="H1">Hull & Stability</option>
    <option value="E1">Machinery & Piping</option>
    </select>
    System: 
    <select name="doc1_sys">
    </select></td>
    </tr>
    </table>
    <br>
    </div>
    <!-- End what's dynamically added with each "number of files" -->
    <br>
    <input type="reset" value="Clear" onclick="resetassist(); return true;">
    <input type="submit" value="Submit">
    </form>
    <script type="text/javascript">
    document.forms.car.reset();
    resetassist();
    </script>
    </body>
    </html>
    Last edited by jscheuer1; 04-01-2013 at 10:17 AM. Reason: code improvements
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. send 1 table id to another table using a form
    By jonnyfreak in forum MySQL and other databases
    Replies: 0
    Last Post: 11-14-2011, 01:42 PM
  2. Help with a dynamic table/calculator
    By hammerstein in forum JavaScript
    Replies: 3
    Last Post: 12-09-2009, 02:12 PM
  3. Replies: 0
    Last Post: 01-14-2009, 01:05 AM
  4. Captures data from dynamic form/table
    By devil_vin in forum PHP
    Replies: 0
    Last Post: 09-22-2007, 03:51 PM
  5. Dynamic table Update
    By suman in forum JavaScript
    Replies: 1
    Last Post: 10-13-2006, 04:38 AM

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
  •