Multistep selectbox in HTML and Javascript - php

Question

I want to create a html form with 2 nested select box,
And I want to do like that ,
1 selectbox , and user can select
Modern Or Ancient . I did it ;
If User Select ancient , new options are :
Age : (textfield)
Determined By: (text field)
Age By c-14 testing
And,
If C14 testing is performed
Name of the body performing the test
Date of testing
Here's my HTML so far:
<select name="storedinage" id="storedinage" onchange="showfield7(this.options[this.selectedIndex].value)">
<option>Please Select</option>
<option value="Modern" >Modern</option>
<option value="Ancient" >Ancient </option>
and my JavaScript is here:
<script type="text/javascript">
function showfield7(name){
if(name=='Ancient')document.getElementById('div7').innerHTML='Other: <input type="text" name="storedinage" />';
else document.getElementById('div7').innerHTML='';
}
</script>

Answer 1

Check jsfiddle here
I think this is what you wanted. Let me know if otherwise.
I am not sure how your html looks like so I made a bit of my own, please copy what is useful. Don't know either if you want labels on inputs or placeholders, you will have to do those small adjustments.
html
<form action="#" method="post">
<select name="storedinage" id="storedinage" onchange="showfield(this.options[this.selectedIndex].value)">
<option>Please Select</option>
<option value="Modern">Modern</option>
<option value="Ancient">Ancient</option>
</select>
<div id="div7" style="display:none;">
Age:<input type="text" name="storedinage" />
Determined By:<input type="text" name="DeterminedBy" />
Age By c-14 testing?<input type="checkbox" onchange="C14(this)" name="AgeByc-14testing" />
</div>
<div id="C14" style="display:none;">
<input type="text" name="NameBody" placeholder="Name of the body performing the test" />
<input type="text" name="TestingDate" placeholder="Date of testing" />
</div>
</form>
js
function showfield(name) {
console.log('!');
if (name == 'Ancient') {
console.log('passed');
document.getElementById('div7').style.display = 'inline';
} else {
document.getElementById('div7').style.display = 'none';
}
var checkbox = document.getElementById('C14');
if (checkbox.checked == true) {
console.log('true')
}
}
function C14(e) {
if (e.checked == true) {
document.getElementById('C14').style.display = 'inline';
}
}