Ajax / Javascript Form Help

adammc posted this at 05:01 — 1st June 2007.

Joined: Jan 2007

Hi folks,

Could any one tell me please if it is possible to make a radio button that shows a text input field only when it is checked?

example:

<?php
<tr>
        <td valign='center'>Payment Method: </td>
        <td valign='center'>
        <input type=radio name=\"payment_method\" class=\"radio\" value=\"paymate\" />Paymate &nbsp; 
        <input type=radio name=\"payment_method\" class=\"radio\" value=\"paypal\" />Paypal </td>
</tr>
?>

If the user selects the paymate radio button the following would display / show on the page:

<?php
<tr>
<td width=\"133\">Paymate ID</td><td width=\"148\"><input type=\"text\" name=\"paymate_id\" size=\"20\"></td>
</tr>
?>

If the user selects the paypal radio button the following would display:

<?php
<tr>
<td width=\"133\">Paypal ID</td><td width=\"148\"><input type=\"text\" name=\"paypal_id\" size=\"20\"></td>
</tr>
?>

Any advice would be greatly appeciated

Webmaster Tools | Webmaster Forums

adammc posted this at 05:48 — 1st June 2007.

He has: 9 posts

Joined: Jan 2007

I got it sorted using:

<?php
<head>
&lt;script language=\"javascript\"&gt;
function ShowHide(frm){
    if(frm.payment[0].checked == true){
        document.getElementById('Paymate').style.display = '';
        document.getElementById('Paypal').style.display = 'none';
    }
    if(frm.payment[1].checked == true){
        document.getElementById('Paymate').style.display = 'none';
        document.getElementById('Paypal').style.display = '';
    }
}
&lt;/script&gt;
</head>
?>

<?php
<form name=\"frm1\">
<table width=\"350\" border=\"0\" cellspacing=\"1\" cellpadding=\"3\">
  <tr>
    <td width=\"77\" align=\"right\" valign=\"middle\"><input name=\"payment\" type=\"radio\" value=\"Paymate\" onClick=\"ShowHide(this.form);\"></td>
    <td width=\"250\">Paymate</td>
  </tr>
  <tr>
    <td align=\"right\" valign=\"middle\"><input name=\"payment\" type=\"radio\" value=\"Paypal\" onClick=\"ShowHide(this.form);\"></td>
    <td>Paypal</td>
  </tr>
  
  <tr>
    <td colspan=\"2\" align=\"left\" valign=\"middle\" id=\"Paymate\" style=\"display:none;\"><table width=\"100%\" border=\"0\" cellspacing=\"2\" cellpadding=\"1\">
      <tr>
        <td width=\"23%\" align=\"left\" valign=\"middle\">Paymate ID </td>
        <td width=\"77%\">:
          <input name=\"PaymateID\" type=\"text\" id=\"PaymateID\"></td>
      </tr>
      
    </table></td>
  </tr>
  <tr>
    <td colspan=\"2\" align=\"left\" valign=\"middle\" id=\"Paypal\" style=\"display:none;\"><table width=\"100%\" border=\"0\" cellspacing=\"2\" cellpadding=\"1\">
      <tr>
        <td width=\"23%\" align=\"left\" valign=\"middle\">Paypal ID </td>
        <td width=\"77%\">:
          <input name=\"PaypalID\" type=\"text\" id=\"PaypalID\"></td>
      </tr>
    </table></td>
  </tr>
</table>
</form>
?>

Webmaster Tools | Webmaster Forums