Not capturing textbox values from a POST form that is using javascript to show/hide divs

Not capturing textbox values from a POST form that is using javascript to
show/hide divs

I have a 3 radio buttons which show a certain div when clicked on and it's
supposed to capture the values in the text boxes when the form is
submitted, but it isn't capturing them
Here's the code, i'm using:
<form enctype="multipart/form-data"
action="formrequest4" method="POST">
<table>
<tr>
<td style="padding:15px">
<label >Who are you? <span
class="form-required">*</span></label>
<p style="font-size:8pt; color:black">What is your
name?</p>
</td>
<td>
<!--<input type="text" name="who" style="width:370px;"
required/>-->
<?php
if (isset($_SESSION['valid'])) {
echo "<input type='text' name='who'
value='{$_SESSION['user']}'
style='width:370px; height:30px;' readonly
required/>";
} else {
echo "<input type='text' name='who'
style='width:370px; height:30px;' required/>";
}
?>
</td>
</tr>
<tr>
<td style="padding:15px">
<label >What is your email? <span
class="form-required">*</span></label>
<p style="font-size:8pt; color:black">Your email
won't be published anywhere, <br>it's just so we
can contact you</p>
</td>
<td>
<!--<input type="email" name="email" style="width:370px;" required/>-->
<?php
if (isset($_SESSION['valid'])) {
echo "<input type='email' name='email'
value='{$_SESSION['email']}'
style='width:370px; height:30px;' readonly
required/>";
} else {
echo "<input type='email' name='email'
style='width:370px; height:30px;' required/>";
}
?>
</td>
</tr>
<tr>
<td style="vertical-align: top; padding-right:15px;
padding-left:15px; padding-top:0px;
padding-bottom:15px">
<label >Interview type? </label>
<p style="font-size:8pt; color:black">ongoing star
= multiple interviews<br>guest star = one-off
interview</p>
</td>
<td>
<select name='type'>
<option value='PLEASE SELECT ONE'>PLEASE
SELECT ONE</option>
<option value='ongoing'>Ongoing star</option>
<option value='guest'>Guest star</option>
</select>
</td>
</tr>
<tr><td>
<script language="JavaScript" type="text/javascript">
function showhidediv( rad )
{
var rads = document.getElementsByName( rad.name );
document.getElementById( 'one' ).style.display = ( rads[0].checked
) ? 'block' : 'none';
document.getElementById( 'two' ).style.display = ( rads[1].checked
) ? 'block' : 'none';
document.getElementById( 'three' ).style.display = (
rads[2].checked ) ? 'block' : 'none';
}
</script>
<label>Please select one of these: <span
class="form-required">*</span></label><br>
<p style="color:black; margin-left:165px"><input name="pagetype"
type="radio" value="1" onclick="showhidediv(this);" checked="checked" />
Actor </p>
<p style="color:black; margin-left:165px"><input name="pagetype"
type="radio" value="2" onclick="showhidediv(this);" /> Singer </p>
<p style="color:black; margin-left:165px"><input name="pagetype"
type="radio" value="3" onclick="showhidediv(this);" /> Other </p></td>
<td>
<div id="one" class="CF" style="display:show;">
<p style="font-size:8pt; color:black">What is your latest/most known
role? &nbsp;&nbsp; <u>PLEASE NOTE:</u> IT MUST HAVE BEEN RELEASED<br></p>
<label style='font-weight:normal; margin-right:
18px'>Character Name: <span
class="form-required">*</span></label>
<input type="text" name="character"
style="width:270px; height: 30px" />
<br><br><label
style='font-weight:normal'>Show/Movie Name: <span
class="form-required">*</span></label>
<input type="text" name="role" style="width:270px;
height: 30px;" /><br>
</div>
<div id="two" class="CF" style="display:none;">
<p style="font-size:8pt; color:black">What is your newest/most known
song? &nbsp;&nbsp; <u>PLEASE NOTE:</u> IT MUST BE AN ORIGINAL
SONG<br></p>
<label style='font-weight:normal'>Song Name: <span
class="form-required">*</span></label>
<input type="text" name="character"
style="width:340px; height: 30px" />
<br><br><label style='font-weight:normal'>Band
Name:&nbsp;&nbsp;</label>
<input type="text" name="role" style="width:340px;
height: 30px ;margin-left:1px;" /><br>
</div>
<div id="three" class="CF" style="display:none;">
<label style="font-weight:normal">What are you
known for: <span
class="form-required">*</span></label> <p
style="font-size:8pt; display:inline;
color:black">&nbsp;&nbsp;&nbsp; Author / Model /
Director / Athlete...</p>
<br><br><input type="text" name="character"
style="width:370px; height: 30px" /><br>
</div>
</td></tr>
<tr><td style='padding-left:125px;'><label><br>Social
Links:</label></td><td>
<p style="font-size:8pt; color:black"><br>Leave
blank the ones you don't
use/have<br><br></p></td></tr>
<tr>
<td style="vertical-align: top; padding-right:15px;
padding-left:15px; padding-top:0px;
padding-bottom:15px">
<label style='font-weight:normal;
padding-left:110px;'>Twitter</label>
<!-- <p style="font-size:8pt; color:black">If you
don't use twitter leave it blank</p>-->
</td>
<td>
<input type="text" name="twitter"
style="width:370px; height: 30px"/>
</td>
</tr>
<tr>
<td style="vertical-align: top; padding-right:15px;
padding-left:15px; padding-top:0px;
padding-bottom:15px">
<label style='font-weight:normal;
padding-left:110px;'>Facebook</label>
<!-- <p style="font-size:8pt; color:black">If you
don't use facebook leave it blank</p>-->
</td>
<td>
<input type="text" name="facebook"
style="width:370px; height: 30px" />
</td>
</tr>
<tr>
<td style="vertical-align: top; padding-right:15px;
padding-left:15px; padding-top:0px;
padding-bottom:15px">
<label style='font-weight:normal;
padding-left:110px;'>Youtube</label>
</td>
<td>
<input type="text" name="youtube"
style="width:370px; height: 30px" />
</td>
</tr>
<tr>
<td style="vertical-align: top; padding-right:15px;
padding-left:15px; padding-top:0px;
padding-bottom:15px">
<label style='font-weight:normal;
padding-left:110px;'>Official site</label>
</td>
<td>
<input type="text" name="official"
style="width:370px; height: 30px" />
</td>
</tr>
<tr>
<td style="vertical-align: top; padding-right:15px;
padding-left:15px; padding-top:0px;
padding-bottom:15px">
<label
style='font-weight:normal;padding-left:110px;'>IMDB</label>
</td>
<td>
<input type="text" name="imdb" style="width:370px;
height: 30px" />
</td>
</tr>
<tr><td><label>&nbsp;</label></td><td><p style="font-size:8pt;
color:black"><br></p></td></tr>
<tr>
<td style="vertical-align: top; padding-right:15px;
padding-left:15px; padding-top:0px;
padding-bottom:15px">
<label >How did you find this site? </label>
<p style="font-size:8pt; color:black">Did someone
refer you to this site?<br> Did you find it on
Google, Twitter...?</p>
</td>
<td>
<input type="text" name="referred"
style="width:370px; height: 30px" />
</td>
</tr>
<tr>
<td style="vertical-align: top; padding-right:15px;
padding-left:15px; padding-top:0px;
padding-bottom:15px">
<label >Do you have anything to add?</label>
</td>
<td>
<textarea name="extra-remarks" style="width:370px;
height: 100px; margin-bottom: 20px"/></textarea>
</td>
</tr>
<br>
<tr>
<td style="padding-left: 15px; vertical-align: top;">
<label >Human check <span
class="form-required">*</span></label>
</td>
<td style="vertical-align: top;">
<?php
require_once('recaptchalib.php');
$publickey =
"6Lf7s94SAAAAADPKne_FeDykz5QcEQEyfoN8Q2uT "; //
you got this from the signup page
echo recaptcha_get_html($publickey);
?></td>
</tr>
<tr >
<td style="padding-top:15px" colspan=2><button
type="submit" value="SUBMIT YOUR REQUEST"
style="float:right; font-weight:bold; height:40px;
background-color:#DE5635; cursor:pointer">SUBMIT YOUR
REQUEST</button>
</td>
</tr>
</table>
</form>
and this is a output values i'm getting from echo:
who: test
email: test@test.com
character:
role:
I typed in c under character field and r under role field, but they didn't
get picked up