Ajax / Javascript Form Help

adammc · 05-31-2007, 10:02 PM

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 Code:


		
			
<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 Code:


		
			
<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 Code:


		
			
<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

adammc · 05-31-2007, 10:49 PM

I got it sorted using:

PHP Code:


		
			
<head>

<script language="javascript">

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 = '';

    }

}

</script>

</head>

PHP Code:


		
			
<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>

Costin Trifan · 06-01-2007, 08:53 PM

Quote:

I got it sorted using:....

Thanks for letting us know !

petra036 · 06-01-2007, 10:32 PM

Oh yes. Sure. I have scanned the web and have seen thousands of websites with that. I could easily find it again, or make it.