Ajax / Javascript Form Help

Discussion in 'JavaScript' started by adammc, May 31, 2007.

0
  1. #1
    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:


    <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>
    PHP:
    If the user selects the paymate radio button the following would display / show on the page:

    <tr>
<td width="133">Paymate ID</td><td width="148"><input type="text" name="paymate_id" size="20"></td>
</tr>
    PHP:
    If the user selects the paypal radio button the following would display:

    <tr>
<td width="133">Paypal ID</td><td width="148"><input type="text" name="paypal_id" size="20"></td>
</tr>
    PHP:
    Any advice would be greatly appeciated :)
     
    adammc, May 31, 2007 IP
  2. wing

    wing Active Member

    Messages:
    210
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    58
    #2
    Make a function that shows and hides it.

    Put a call to the function in the radiobutton, onClick="function()"
     
    wing, May 31, 2007 IP
  3. adammc

    adammc Peon

    Messages:
    36
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I got it sorted using:

    <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:
    <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>
    PHP:
     
    adammc, May 31, 2007 IP