helpt to swap form onChange

Hi, and sorry if if the title is not very relevant.

I have two contact forms and a SELECT box with two option. I need it to work like this: first option = first form, second option = second form.

So, with my close to zero knowledge of javascript i figure the second form has to be diplay:none and somehow call it with javascript to replace the second one, but i'm not able to write the function.

Also, if you know of any form that works like this, a link to it would be greatly appreciated.

 

Just write the form's HTML, surround them with DIVs
<div id=form1><form..1..</form></div>
<div id=form2 style="display:none"><form..2..</form></div>

I would suggest using JQuery for whats next, but you can do it with naive JS as well:
Add the Select box with onchange event <select onchange=changeFunc(this)></select>
When the options will change on the select it will call the changeFunc() function:
function changeFunc(obj) { // obj is the select element
// here depending on the value of obj change the style of the divs
}

Hope it helps

 

Thanks for the tip, now i just need to get back to my javascript manual and learn to write changeFunc(obj)

 

i'd do it like this
suppose this is your select

<select onChange="showForm(this.value);"><option>Choose Form</option><option value="1">Form 1</option><option value="2">Form 2</option></select>

Code (markup):

and the forms wmhelp above

<div id=form1><form..1..</form></div>
<div id=form2 style="display:none"><form..2..</form></div>

Code (markup):

<script>
function showForm(val)
{
if(val=='1') {document.getElementById('form1').style.display="";document.getElementById('form2').style.display="none";}
if(val=='2') {document.getElementById('form2').style.display="";document.getElementById('form1').style.display="none";}
}
</script>

Code (markup):

enjoy

 

Thank you, i managed to do it like this:

function test(divID){
    var element = document.getElementById('change').getElementsByTagName('div');

    for(var i = 0; i < element.length; i++ ) {
        if(element[i].id == divID){
            element[i].style.display = 'block';
        }
        else {
            element[i].style.display = 'none';
        }
    }
} 

Code (markup):

but the second form does not get the values of the variables, i think i'll be able to solve that on the php side.