Radial Buttons

[Aaron]

I made some new fields in the _pilots table that have VATSIM ID and IVAO ID. In the registration form I have a radial button that has yes/no if the user is a member of VATSIM and/or IVAO. I need to make an if statement that if the button is equal to yes, then display the id text field. Here is what I tryed, I'm hoping to do it without javascript but not sure if possible. Any ideas?

 <td>Are you a VATSIM Member: *</td>
<td><input type="radio" name="vatsim" value="Y" />Yes    <input type="radio" name="vatsim" value="N" />No</td>
</tr>
<?php
if(vatsim=="Y")
{
?>
<td>VATSIM ID: *</td>
<td><input type="text" name="vatsimid" value="" />
 <?php
  if($email_error == true)
   echo '<p class="error">Please enter your email address</p>';
 ?>
</td></tr>
<?php
}
?>

[Aaron]

This is what I came up with so far, only it doesn't work still:

 <td>Are you a VATSIM Member: *</td>
<td><input type="radio" name="vatsim" value="Y"/>Yes    <input type="radio" name="vatsim" value="N" checked>No</td>
</tr>

<script type="text/javascript">
if(document.getElementById('vatsim').value=="Y") {
document.write("
<tr><td>VATSIM ID: *</td>
<td><input type="text" name="vatsimid" value="" />
 <?php
  if($vatsimid_error == true)
   echo '<p class="error">Please enter your VATSIM ID</p>';
 ?>
</td></tr>");
}
</script>

[Aaron]

Here is something else I tried

 <td>Are you a VATSIM Member: *</td>
<td><input type="radio" name="vatsim" value="Y" onclick="<?php $vatsim="Y" ?>"/>Yes    <input type="radio" name="vatsim" value="N" onclick="<?php $vatsim="N" ?>" checked>No</td>
</tr>
<?php
if($vatsim=="Y")
{
?>
<tr><td>VATSIM ID: *</td>
<td><input type="text" name="vatsimid" value="">
 <?php
  if($vatsimid_error == true)
   echo '<p class="error">Please enter your VATSIM ID</p>';
 ?>
</td></tr>
<?php
}
?>

[Talisman57]

Probably need some form of AJAX to get this running

[Tom]

No AJAX required. Also you can't use javascript to write php onto the page, and also php can't tell whether something is checked live on the page.

Use a checkbox rather than radio buttons, then get rid of the php, wrap your vatsim ID field + label in a div and set display:none; on it. With jQuery, when the checkbox is changed (onChange maybe?) check for true/false and show/hide the div accordingly (slideUp slideDown perhaps).

[Strider]

Why don't you just use the additional fields in the admin panel? You can create them in the admin panel, and they will show up in the reg form.

[Aaron]

I can't just use additional fields because pilots that don't have VATSIM ID or IVAO normally put something fake in there, so if it's blank I'm gonna make it not show up on their profile.

[Aaron]

I did some screwing around and got something I'm happy with. If the radio button is set to no, then it disables and grays out the test field.

registration_javascript.tpl

...
function VATSIMID(){
if(document.getElementById('VY').checked) {
VATSIMfield.innerHTML="<input type='text' name='vatsimid' value='' maxlength='7' onKeyPress='return numbersonly(this, event)'/>"
}else if(document.getElementById('VN').checked) {
VATSIMfield.innerHTML="<input type='text' name='vatsimid' value='' disabled='disabled' style='background-color: #E6E6E6;'/>"
}
}
function IVAOID(){
if(document.getElementById('IY').checked) {
IVAOfield.innerHTML="<input type='text' name='ivaoid' value='' maxlength='6' onKeyPress='return numbersonly(this, event)'/>"
}else if(document.getElementById('IN').checked) {
IVAOfield.innerHTML="<input type='text' name='ivaoid' value='' disabled='disabled' style='background-color: #E6E6E6;'/>"
}
}
function numbersonly(myfield, e, dec)
{
var key;
var keychar;
if (window.event)
  key = window.event.keyCode;
else if (e)
  key = e.which;
else
  return true;
keychar = String.fromCharCode(key);
// control keys
if ((key==null) || (key==0) || (key==8) ||
   (key==9) || (key==13) || (key==27) )
  return true;
// numbers
else if ((("0123456789").indexOf(keychar) > -1))
  return true;
// decimal point jump
else if (dec && (keychar == "."))
  {
  myfield.form.elements[dec].focus();
  return false;
  }
else
  return false;
}
</script>

registration_main.tpl

 <tr><td>Are you a VATSIM Member: *</td>
<td><input type="radio" name="vatsim" id="VY" value="Y" onclick="VATSIMID()"/>Yes    <input type="radio" name="vatsim" id="VN" value="N" onclick="VATSIMID()" checked>No</td>
</tr>
<tr><td>VATSIM ID:</td>
<td><div id="VATSIMfield"><input type='text' name='vatsimid' value='' disabled='disabled' style='background-color: #E6E6E6;'/></div>
</td></tr>
 <tr><td>Are you an IVAO Member: *</td>
<td><input type="radio" name="ivao" id="IY" value="Y" onclick="IVAOID()"/>Yes    <input type="radio" name="ivao" id="IN" value="N" onclick="IVAOID()" checked>No</td>
</tr>
<tr><td>IVAO ID:</td>
<td><div id="IVAOfield"><input type='text' name='ivaoid' value='' disabled='disabled' style='background-color: #E6E6E6;'/></div>
</td></tr>

[Tom]

<tr><td>Are you a VATSIM Member: *</td>
<td><input type="radio" name="vatsim" id="VY"/>Yes</td>
</tr>
<tr><td>VATSIM ID:</td>
<td><input type='text' id='vatsimid' name='vatsimid' value='' disabled='disabled' style='background-color: #E6E6E6;'/>
</td></tr>
 <tr><td>Are you an IVAO Member: *</td>
<td><input type="radio" name="ivao" id="IY"/>Yes</td>
</tr>
<tr><td>IVAO ID:</td>
<td><input type='text' id='ivaoid' name='ivaoid' value='' disabled='disabled' style='background-color: #E6E6E6;'/>
</td></tr>

(Added IDs and changed to checkboxes because it's easier)

The use some jQuery because it's cleaner and a lot shorter.

$('#VY').change(function(){
if($(this).is(':checked')){
$('#vatsimid').attr('disabled', true);
} else {
$('#vatsimid').removeAttr('disabled');
}
});

$('#IY').change(function(){
if($(this).is(':checked')){
$('#ivaoid').attr('disabled', true);
} else {
$('#ivaoid').removeAttr('disabled');
}
});

Should work.