Load Forms Depending Upon the Selection from a Combobox

**Atli** · Oct 25 '08, 01:13 PM

Hi.

I see two possibilities.

The easier and less elegant (and possibly problematic) solution would be to simply store the HTML for the three forms in JavaScript strings and have the onchange event of your drop-down change the innerHTML of a container element.

The slightly more complex, yet much more elegant solution would be to use the DOM to dynamically create your forms, based on the selection of your drop-down.

I suggest you do a Google search for the document.create Element and document.append Child functions. That should get you started.

If you run into any problems post your code here with an explanation and we will try to help.

**mfaisalwarraich** · Oct 25 '08, 03:08 PM

Thank You Atli for your help. I googled around some pages and find the following code. which i changed a bit according to my need. im getting the form by using the both methods but how would i check if a form is already opened so selecting again that form may not result into opening another same form. and if a form is opened then after selecting other form from combo box the current form should be disappeared. i think u r getting my point. below is the code.
[html]<html>
<head>
<title>||Dynami c Forms||</title>
</head>

<script type="text/javascript">

var b = null;
var newForm = null;

function addForm()
{
newForm = document.create Element("form") ;
newForm.innerHT ML = "<input type='text' name='username' ><br><input type='password' name='password' ><br><input type='submit' value='Login Now'></form>";

var a = document.getEle mentById('combo ').value;
if(a==1)
{
b = document.getEle mentById('combo ');
document.body.i nsertBefore(new Form, b);

}
else if(a==2)
{
adForm();
}
}
function adForm()
{
var toolbar= null;
toolbar = window.document .createElement( 'form');
toolbar.innerHT ML = 'sdfasf';
window.document .body.appendChi ld(toolbar);
}

</script>

<body>

<select id="combo" onChange="addFo rm();">
<option value="1"> Form1</option>
<option value="2"> Form2</option>
<option value="3"> Form3</option>
</select>
</body>
</html>[/html]

**Atli** · Oct 25 '08, 04:52 PM

You shouldn't need to worry about the same form being re-opened. The "onchange" event shouldn't fire unless a different form is selected. It isn't really possible to re-select the same form, because that wouldn't really be a change, so the "onchange" event wouldn't fire.

But, to clear the old form...

What I would do, is create a container. A <div> element that is meant to, well... contain the new <form> element.
Then, when a new <form> is to be shown, the <div> container could simply be cleared.

For example (using <span> rather than <form>):
[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>DOM Example</title>
<script type="text/javascript">
function reBuild()
{
// Remove all <span> elements from the container
var container = document.getEle mentById('conta iner');
var spans = container.getEl ementsByTagName ('span');
for(var i = 0; i < spans.length; i++) {
container.remov eChild(spans[i]);
}

// Create a new span and add it to the container
var newSpan = document.create Element('span') ;
newSpan.innerHT ML = Math.random();

container.appen dChild(newSpan) ;
}
</script>
</head>
<body>
<button onclick="javasc ript: reBuild();">Reb uild</button>
<div id="container"> </div>
</body>
</html>
[/code]
This would simply clear all <span> elements from the <div> container and add a new one when the button is clicked.

**mfaisalwarraich** · Oct 26 '08, 08:50 AM

Thank You Atli. I have solved my problem with you help. But there is now another issue which is how i can pass parameters in the form's action which is created through DOM? like in simple htmle coding we use <form action='abc.htm l?action=doit'. now if the form is submitted the action will be fired and its parameters will be passed depending upon the method of form. here action is a pramater name and doit is its value. i think u r getting my point. please tell me how i can do this?

[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>DOM Example</title>
<script type="text/javascript">
function reBuild()
{
var a="";
a=document.getE lementById('com bo').value;
// Remove all <span> elements from the container
var container = document.getEle mentById('conta iner');
var forms = container.getEl ementsByTagName ('form');
for(var i = 0; i < forms.length; i++) {
container.remov eChild(forms[i]);
}
if(a=="1")
{
// Create a new span and add it to the container
var newForm = document.create Element('form') ;
newForm.innerHT ML = "This is form 1.Username:<inp ut type='text'/><input type='submit'>" ;
container.appen dChild(newForm) ;
}
else if(a=="2")
{
// Create a new span and add it to the container
var newForm = document.create Element('form') ;
newForm.innerHT ML = "This is form 2.Username:<inp ut type='text'/>";
container.appen dChild(newForm) ;
}
else if(a=="3")
{
// Create a new span and add it to the container
var newForm = document.create Element('form') ;
newForm.innerHT ML = "This is form 3.Username:<inp ut type='text'/>";
container.appen dChild(newForm) ;
}
}
</script>
</head>
<body>
<select id='combo' onchange="javas cript: reBuild();">
<option value='1'>Form 1</option>
<option value='2'>Form 2</option>
<option value='3'>Form 3</option>
</select>
<div id="container"> </div>
</body>
</html> [/html]

**Atli** · Oct 26 '08, 03:57 PM

You can use the setAttribute method on your new elements to set most attributes.

For example:
[code=php]
var newForm = document.create Element('form') ;
newForm.setAttr ibute('action', 'page.php?actio n=doit');
newForm.setAttr ibute('method', 'post');

var inputText = document.create Element('span') ;
inputText.inner HTML = 'Username: ';
newForm.appendC hild(inputText) ;

var inputBox = document.create Element('input' );
inputBox.setAtt ribute('name', 'username');
inputBox.setAtt ribute('type', 'textbox');
newForm.appendC hild(inputBox);

var submitButton = document.create Element('input' );
submitButton.se tAttribute('typ e', 'submit');
newForm.appendC hild(submitButt on);
[/code]

**mfaisalwarraich** · Oct 30 '08, 07:38 PM

thankx for ur solution once again. now please tell me how i can set a form as a default form means when the page loads the form should appear without selecting from combo box.

thank u.

Load Forms Depending Upon the Selection from a Combobox

Load Forms Depending Upon the Selection from a Combobox

Comment

Comment

Comment

Comment

Comment

Comment