By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,694 Members | 1,908 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,694 IT Pros & Developers. It's quick & easy.

Load Forms Depending Upon the Selection from a Combobox

100+
P: 194
Hi Everyone,

I am new to javascript. I want to load 3 forms which depends upon the selection of a value from Combo Box. For example i have a combo box on a page and it has three values Form1, Form2 and Form3. I write code for three different forms. Now how i can load a from by selecting a value from a combo box. Please tell me.

Thank you.

Regards

Faisal
Oct 25 '08 #1
Share this Question
Share on Google+
6 Replies


Atli
Expert 5K+
P: 5,058
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.createElement and document.appendChild 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.
Oct 25 '08 #2

100+
P: 194
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>||Dynamic Forms||</title>
</head>

<script type="text/javascript">

var b = null;
var newForm = null;

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

var a = document.getElementById('combo').value;
if(a==1)
{
b = document.getElementById('combo');
document.body.insertBefore(newForm, b);

}
else if(a==2)
{
adForm();
}
}
function adForm()
{
var toolbar= null;
toolbar = window.document.createElement('form');
toolbar.innerHTML = 'sdfasf';
window.document.body.appendChild(toolbar);
}


</script>

<body>

<select id="combo" onChange="addForm();">
<option value="1"> Form1</option>
<option value="2"> Form2</option>
<option value="3"> Form3</option>
</select>
</body>
</html>[/html]
Oct 25 '08 #3

Atli
Expert 5K+
P: 5,058
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>):
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4.     <title>DOM Example</title>
  5.     <script type="text/javascript">
  6.         function reBuild()
  7.         {
  8.             // Remove all <span> elements from the container
  9.             var container = document.getElementById('container');
  10.             var spans = container.getElementsByTagName('span');
  11.             for(var i = 0; i < spans.length; i++) {
  12.                 container.removeChild(spans[i]);
  13.             }
  14.  
  15.             // Create a new span and add it to the container
  16.             var newSpan = document.createElement('span');
  17.             newSpan.innerHTML = Math.random();
  18.  
  19.             container.appendChild(newSpan);
  20.         }
  21.     </script>
  22. </head>
  23. <body>
  24.     <button onclick="javascript: reBuild();">Rebuild</button>
  25.     <div id="container"></div>
  26. </body>
  27. </html>
  28.  
This would simply clear all <span> elements from the <div> container and add a new one when the button is clicked.
Oct 25 '08 #4

100+
P: 194
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.html?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.getElementById('combo').value;
// Remove all <span> elements from the container
var container = document.getElementById('container');
var forms = container.getElementsByTagName('form');
for(var i = 0; i < forms.length; i++) {
container.removeChild(forms[i]);
}
if(a=="1")
{
// Create a new span and add it to the container
var newForm = document.createElement('form');
newForm.innerHTML = "This is form 1.Username:<input type='text'/><input type='submit'>";
container.appendChild(newForm);
}
else if(a=="2")
{
// Create a new span and add it to the container
var newForm = document.createElement('form');
newForm.innerHTML = "This is form 2.Username:<input type='text'/>";
container.appendChild(newForm);
}
else if(a=="3")
{
// Create a new span and add it to the container
var newForm = document.createElement('form');
newForm.innerHTML = "This is form 3.Username:<input type='text'/>";
container.appendChild(newForm);
}
}
</script>
</head>
<body>
<select id='combo' onchange="javascript: 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]
Oct 26 '08 #5

Atli
Expert 5K+
P: 5,058
You can use the setAttribute method on your new elements to set most attributes.

For example:
Expand|Select|Wrap|Line Numbers
  1. var newForm = document.createElement('form');
  2. newForm.setAttribute('action', 'page.php?action=doit');
  3. newForm.setAttribute('method', 'post');
  4.  
  5. var inputText = document.createElement('span');
  6. inputText.innerHTML = 'Username: ';
  7. newForm.appendChild(inputText);
  8.  
  9. var inputBox = document.createElement('input');
  10. inputBox.setAttribute('name', 'username');
  11. inputBox.setAttribute('type', 'textbox');
  12. newForm.appendChild(inputBox);
  13.  
  14. var submitButton = document.createElement('input');
  15. submitButton.setAttribute('type', 'submit');
  16. newForm.appendChild(submitButton);
  17.  
Oct 26 '08 #6

100+
P: 194
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.
Oct 30 '08 #7

Post your reply

Sign in to post your reply or Sign up for a free account.