Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts

    creating form fields dynamically using javascript

    id like to produce a code generator page for creating iframe codes.

    the top of the page will be the form followed by the resulting iframe code, followed by the actual iframe result.

    The form will start with one select field, then when the user makes a selection, the next selection box appears beneath the first. the second selection box has options depending on the selection of the previous selection box. The iframe code is updated, and the iframe preview reloads using the new code.

    As each selection is made another selection appears until all selections are complete.

    Can somebody plz help, if not with some codes, then links to code or appropriate tutorials. I absolutey suck with with javascript and have no clue with things like this.document.that.element.id.here.i.suc

    so please help


    edit: something like this chained select, which also edits the iframe code and iframe preview.
    http://www.dynamicdrive.com/dynamici...ects/index.htm

    im sure able to set up the form using that download, its just how to get it to update the <textarea>iframe code</textarea> and the <iframe><iframe>
    Last edited by fatrat; 12-24-2006 at 06:28 PM.

  • #2
    New Coder
    Join Date
    Nov 2006
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <html>
    <head>
    <script>
    /* This script uses a mulit-dimensional array to keep track of the select elements
       and their various values/options.  The first variable in the array represents
       the value the user selected.
    
       First value: ['Format text',
    
       The second value is an array containing a title for the new select element and the
       new options for that select element.
    
       Second value: ['Select style:','bold','underline','bold and underline']],
    
       The first variable in each array must be a unique value.  You'll notice that I
       used 'one checkbox' instead of simply using the value 'one'.  Otherwise you may end
       up with conflicts if there are multiple select elements that use the same values.
       To create a new select element simply add a new array to the choices array.
    
       New element: ['Format text',['Select style:','bold','underline','bold and underline']],
    
       To create the source code after the user selects a certain option just add a new array
       that contains the value the user selected and the source code to display.
    
       Source code: ['blue','<html><body bgcolor=\"blue\"></body></html>'],
    */
    
    
    var choices =  [['Set background color',['Choose the color:','black','blue','red']],
    		['Create a form',['Select input type:','text','button','checkbox']],
    		['Format text',['Select style:','bold','underline','bold and underline']],
    		['text',['How many:','one textbox','two textboxes','three textboxes']],
    		['button',['How many:','one button','two buttons','three buttons']],
    		['checkbox',['How many:','one checkbox','two checkboxes','three checkboxes']],
    		['one textbox','<form><input type=\"textbox\" name=\"text1\"></form>'],
    		['two textboxes','<form><input type=\"textbox\" name=\"text1\"><br><input type=\"textbox\" name=\"text2\"></form>'],
    		['three textboxes','<form><input type=\"textbox\" name=\"text1\"><br><input type=\"textbox\" name=\"text2\"><br><input type=\"textbox\" name=\"text3\"></form>'],
    		['one checkbox','<form><input type=\"checkbox\" name=\"check1\"></form>'],
    		['two checkboxes','<form><input type=\"checkbox\" name=\"check1\"><br><input type=\"checkbox\" name=\"check2\"></form>'],
    		['three checkboxes','<form><input type=\"checkbox\" name=\"check1\"><br><input type=\"checkbox\" name=\"check2\"><br><input type=\"checkbox\" name=\"check3\"></form>'],
    		['one button','<form><input type=\"button\" value=\"Button1\"></form>'],
    		['two buttons','<form><input type=\"button\" value=\"Button1\"><br><input type=\"button\" value=\"Button2\"></form>'],
    		['three buttons','<form><input type=\"button\" value=\"Button1\"><br><input type=\"button\" value=\"Button2\"><br><input type=\"button\" value=\"Button3\"></form>'],
    		['black','<html><body bgcolor=\"black\"></body></html>'],
    		['blue','<html><body bgcolor=\"blue\"></body></html>'],
    		['red','<html><body bgcolor=\"red\"></body></html>'],
    		['bold','<b>This text is bold</b>'],
    		['underline','<u>This text is underlined.</u>'],
    		['bold and underline','<b>This text is bold</b><br><u>This text is underlined.</u>']];
    
    function createSelect(choices) {
    	if (!choices || choices.length==0) return false;
    
    	var option;
    	var select = document.createElement('select');
    	select.setAttribute('onchange','showNextSelect(this.value);');
    	for (var i=0; i<choices.length; ++i) {
    		option = document.createElement('option');
    		option.setAttribute('value',(i==0) ? '' : choices[i]);
    		option.innerHTML = choices[i];
    		select.appendChild(option);
    	}
    	return select;
    }
    
    function showNextSelect(a) {
    	if (!a) return false;
    
    	var select,code;
    	for (var i=0; i<choices.length; ++i) {
    		if (a==choices[i][0]) {
    			if (typeof(choices[i][1])=='string') {
    				code = choices[i][1];
    			} else {
    				select = createSelect(choices[i][1]);
    			}
    		}
    	}
    
    	if (select) {
    		var selects = document.getElementsByTagName('select');
    		for (var j=0; j<selects.length; ++j) {
    			selects[j].setAttribute('disabled','true');
    		}
    		var form = document.getElementById('form1');
    		var br = document.createElement('br');
    		form.appendChild(br)
    		form.appendChild(select);
    		return false;
    	}
    
    	if (code) {
    		document.getElementById('code').value = code;
    		frames[0].document.open();
    		frames[0].document.write(code);
    		frames[0].document.close();
    	}
    
    	return false;
    }
    
    function resetPage() {
    	document.forms[0].reset();
    	document.forms[1].reset();
    	frames[0].document.open();
    	frames[0].document.write('');
    	frames[0].document.close();
    	window.location.reload();
    }
    </script>
    </head>
    <body>
    <form id="form1">
    <select id="one" name="one" onchange="showNextSelect(this.value);">
    <option value="">Select one of the following:</option>
    <option value="Set background color">Set background color</option>
    <option value="Create a form">Create a form</option>
    <option value="Format text">Format text</option>
    </select> &nbsp; &nbsp; 
    <input type="button" value="Reset" onclick="resetPage();">
    </form>
    <br><br>
    <form id="form2">
    <b>Source Code</b><br>
    <textarea id="code" cols="50" rows="10"></textarea>
    </form>
    <br><br>
    <b>Preview</b><br>
    <iframe src="" id="preview" width="500" height="200"></iframe>
    </body>
    </html>
    Last edited by j9ine; 12-25-2006 at 07:23 AM.

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that is spot on.

    exactly what i asked for, fulfils the job perfectly first time.

    when i have the page setup ill post a link. ty.
    expect some mention on my site, either on the page or on a thank you page.

    any idea how i can create the selects using PHP and a template system?
    this works:

    Code:
    <form id="form1">
    <select id="one" name="one" onchange="showNextSelect(this.value);">
    <option value="">Select one of the following:</option>
    <!-- BEGIN id_select -->
    <option value="{id_select.ID}">{id_select.ID_SELECT}</option>
    <!-- END id_select -->
    <option value="ID1">ID1</option>
    but it doesnt work inside the javascript.

    Code:
    var choices =  
    
    		[
    		<!-- BEGIN option2 -->
    		{option2.OPTION2}
    		<!-- END option2 --->
    		['ID1',['Choose the color:','black','blue','red']],
    any idea how i can do this?
    Last edited by fatrat; 12-25-2006 at 12:56 PM.

  • #4
    New Coder
    Join Date
    Nov 2006
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The comment marks for html and javascript are slightly different. In javascript you need to use two forward slashes before a comment.
    Code:
    // BEGIN option2
    {option2.OPTION2}
    // END option2
    ['ID1',['Choose the color:','black','blue','red']],
    Or you can use a forward slash and a asterisk at the beginning and end of each comment.
    Code:
    /* BEGIN option2 */
    {option2.OPTION2}
    /* END option2 */
    ['ID1',['Choose the color:','black','blue','red']],

  • #5
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi all,

    I'm trying to do something similar to this in a site I'm building.

    j9ine's code above works fine in Firefox, but I can't get it to work properly in IE7: the first select works OK and you get the second select up, but then the second select doesn't work (the code isn't displayed for the background colour or text formatting selections, and the "how many" select box doesn't appear for the create a form option).

    Anyone know how to fix it for IE7? I can't see where the problem is.

    Thanks in advance!


  •  

    Posting Permissions

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