Accessing the value that's not part of the form - html

Question

In my html I have a combo box which list all the available usertypes and then the input varies by what the user selects on the combo box so you can see that I have my onchange.
But my question is how would I be able to access the value of the selected combo box? Is it possible to get its selected value even it is not a part of the form? I've already tried to have only one form that is
<form action="" name="form1" method="post">
<select id="usertype" name="usertype" class="dropdown-select" onfocus="getPrevious()" onchange="set()" >
<option value="1" selected="selected">Chairperson</option>
<option value="2">Dean</option>
<option value="3">Faculty</option>
<option value="4">Staff</option>
<option value="6">Admin</option>
</select>
<div id="formpage_Chairperson" style="visibility: visible; display: block;">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="text" value="" name="D" />
<input type="text" value="" name="E" />
<input type="text" value="" name="F" />
<input type="Submit" value="Submit Form" name="submitForm" />
</div>
<div id="formpage_Chairperson" style="visibility: hidden; display: none;">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="Submit" value="Submit Form" name="submitForm" />
</div>
</form>
But when I clicked the Submit Form nothing happens. You can see that I'm choosing only what to display because different usertypes (e.g. Chairperson, Dean, etc) have also different inputs. So I make different forms for each particular usertypes. But then it throws an error ' Undefined index: usertype ' and I know that is because it's not part of the form.
So can you give me some advice on how will I be able to come up with this properly? Thank you.
Here is my html code:
<select id="usertype" name="usertype" class="dropdown-select" onfocus="getPrevious()" onchange="set()" >
<option value="1" selected="selected">Chairperson</option>
<option value="2">Dean</option>
<option value="3">Faculty</option>
<option value="4">Staff</option>
<option value="6">Admin</option>
</select>
<form action="" name="form1" method="post">
<div id="formpage_Chairperson" style="visibility: visible; display: block;">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="text" value="" name="D" />
<input type="text" value="" name="E" />
<input type="text" value="" name="F" />
<input type="Submit" value="Submit Form" name="submitForm" />
</div>
</form>
<form action="" name="form1" method="post">
<div id="formpage_Dean" style="visibility: hidden; display: none;">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="Submit" value="Submit Form" name="submitForm" />
</div>
</form>
This is the Javascript for handling the onchange event of the combo box:
var prev = ""
function pagechange(topage) {
var page;
if (prev.length > 0) {
page = document.getElementById('formpage_' + prev);
if (page)
page.style.visibility='hidden';
page.style.display = 'none';
}
page = document.getElementById('formpage_' + topage);
if (!page)
return false;
page.style.visibility='visible';
page.style.display = 'block';
prev = topage;
return true;
}
function set(){
var e = document.getElementById("usertype");
var selection = e.options[e.selectedIndex].text;
pagechange(selection);
}

Answer 1

Not sure how you wanted to "access" it. I'm assuming you mean with the rest of the form data, so you could do something like the following:
function pagechange(topage) {
var page;
if (prev.length > 0) {
page = document.getElementById('formpage_' + prev);
if (page) {
page.style.visibility='hidden';
page.style.display = 'none';
}
page = document.getElementById('formpage_' + topage);
// create hidden input field and append to form
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", "page");
input.setAttribute("value", topage);
page.appendChild(input);
// end of changes
if (!page)
return false;
page.style.visibility='visible';
page.style.display = 'block';
prev = topage;
}
return true;
}
Also, you were missing a closing bracket on your if (prev.length > 0), so I closed it right before the return true;. You may need to adjust depending on your logic.
Hope this gets you close.