Web Form - display input box on event

**adammc** · May 31, 2007, 20:06

Hi,
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?

I assume this could be done with Ajax / javascript?

**triexa** · May 31, 2007, 20:16

This is basic javascript... unless you need data (then you can fetch with AJAX) but this is definitely the wrong forum to ask the question in...

**adammc** · May 31, 2007, 20:22

hi triexa,

Yeah I wasnt sure what forum to put it in sorry.

example of what I was after:

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>

**triexa** · May 31, 2007, 20:28

Code:

<tr>

        <td valign='center'>Payment Method: </td>

        <td valign='center'>

        <input type=radio name="payment_method" class="radio" onclick="show paymate" value="paymate" />Paymate &nbsp; 

        <input type=radio name="payment_method" class="radio" onclick="show paypal" value="paypal" />Paypal </td>

</tr>
<tbody id="paymate"><tr>

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

</tr> 
</tbody><tbody id="paypal" style="display:none"><tr>

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

</tr> 
</tbody>

You'll find plenty of JS code on how to hide or show an element
(document.getElementById('id').style.display = 'block' for example)

**adammc** · May 31, 2007, 21:00

thanx for the tips

Do you mean by using the "tbody id="paymate""

**Raju Gautam** · May 31, 2007, 21:04

Here is your complete code.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<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>
<body>
<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>
</body>
</html>

**adammc** · May 31, 2007, 21:41

rajug,
Thank you soooooo much. that is exactly what I was after. I didnt actually expect anyone to do it for me.

Thank you.

In regards to the "style="display:none;""...
Could I use this to hide / show an entire table?

**Raju Gautam** · May 31, 2007, 22:12

Yes of course you can hide/show any HTML element with. But remember i have used the ID, so define any ID for the hiding/showing table/div or whatever you want to hide/show.

**adammc** · May 31, 2007, 22:43

thanks for the great advice

**adammc** · Jun 3, 2007, 17:43

Need a little help

I tried adding another set of elements and it isnt doing anyting when I select the check box (radio)

PHP Code:


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

    }

    

    

    if(frm.cheques[2].checked == true){

        document.getElementById('Yes').style.display = '';

        document.getElementById('No').style.display = 'none';

        

    }

    if(frm.cheques[3].checked == true){

        document.getElementById('Yes').style.display = 'none';

        document.getElementById('No').style.display = '';

    }

    

    

}

    </script>





 <tr>

  <td width="133">Accept Cheque Payments</td>

    <td width="250">

    

    <input name="cheques" type="radio" value="Yes" onClick="ShowHide(this.form);">Yes &nbsp; 

    <input name="cheques" type="radio" value="No" onClick="ShowHide(this.form);">No

    </td>

  </tr>

      

  

    <tr id="Yes" style="display:none;">

  <td width="133">some text here</td>

    <td width="250">

     some text here

    </td></tr>

    

     <tr id="No" style="display:none;">

  <td width="133">some text here</td>

    <td width="250">some text here

    </td></tr>

**Raju Gautam** · Jun 3, 2007, 19:32

Since this is another set of elements (actually radio buttons) so you have to do like this:

Code:

<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 = '';
    }
}
function ShowHideCheque(){
    if(frm.cheques[0].checked == true){
        document.getElementById('Yes').style.display = '';
        document.getElementById('No').style.display = 'none';
    }
    if(frm.cheques[1].checked == true){
        document.getElementById('Yes').style.display = 'none';
        document.getElementById('No').style.display = '';
    }
}
</script>
 <tr>
  <td width="133">Accept Cheque Payments</td>
    <td width="250">
	<form name="frmcheck" method="post" action="">
    <input name="cheques" type="radio" value="Yes" onClick="ShowHideCheque(this.form);">Yes &nbsp; <br>
    <input name="cheques" type="radio" value="No" onClick="ShowHideCheque(this.form);">No<br>
	</form>
    </td>
  </tr>
    <tr id="Yes" style="display:none;">
  <td width="133">some text here</td>
    <td width="250">
     some text here
    </td></tr>
     <tr id="No" style="display:none;">
  <td width="133">some text here</td>
    <td width="250">some text here
    </td></tr>

**adammc** · Jun 3, 2007, 19:42

Hi rajug, thanks for the reply

I tried your code and nothign is appearing when using the radio check box?

**Raju Gautam** · Jun 3, 2007, 19:53

Oh i m really sorry that i just forgot to pass an argument in to the funciton. Please check like this:

Code:

<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 = '';
    }
}
function ShowHideCheque(frm){
    if(frm.cheques[0].checked == true){
        document.getElementById('Yes').style.display = '';
        document.getElementById('No').style.display = 'none';
    }
    if(frm.cheques[1].checked == true){
        document.getElementById('Yes').style.display = 'none';
        document.getElementById('No').style.display = '';
    }
}
</script>
 <tr>
  <td width="133">Accept Cheque Payments</td>
    <td width="250">
	<form name="frmcheck" method="post" action="">
    <input name="cheques" type="radio" value="Yes" onClick="ShowHideCheque(this.form);">Yes &nbsp; <br>
    <input name="cheques" type="radio" value="No" onClick="ShowHideCheque(this.form);">No<br>
	</form>
    </td>
  </tr>
    <tr id="Yes" style="display:none;">
  <td width="133">some text here</td>
    <td width="250">
     some text here
    </td></tr>
     <tr id="No" style="display:none;">
  <td width="133">some text here</td>
    <td width="250">some text here
    </td></tr>

**adammc** · Jun 3, 2007, 20:43

you are a star!!!
Thank you so much, think I even managed to learn a few things

One question, If I wanted to display a few lines of <tr>'s containing data if the 'Yes' button is selected..... How do I format the javascript function, as this doesnt work:

PHP Code:




 <tr id="Yes" style="display:none;">

  <td width="133">Account Name</td>

    <td width="250">

     <input type="text" name="account_nuame" size="20">

    </td></tr>

  <tr id="Yes" style="display:none;">

  <td width="133">Account #</td>

    <td width="250">

     <input type="text" name="account_number" size="20">

    </td></tr>

    

       <tr id="Yes" style="display:none;">

  <td width="133">BSB #</td>

    <td width="250">

     <input type="text" name="bsb_number" size="20">

    </td></tr>

**Raju Gautam** · Jun 3, 2007, 21:05

Hey find the full HTML page for you:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<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 = '';
    }
}
function ShowHideCheque(frm){
    if(frm.cheques[0].checked == true){
        document.getElementById('Yes').style.display = '';
        document.getElementById('No').style.display = 'none';
    }
    if(frm.cheques[1].checked == true){
        document.getElementById('Yes').style.display = 'none';
        document.getElementById('No').style.display = '';
    }
}
</script>
</head>
<body>
<table width="100&#37;" border="0" cellspacing="1" cellpadding="2" style="border:1px #CCCCCC solid;">
  <tr>
    <td>
	<form name="frmcheck" method="post" action="">
    <input name="cheques" type="radio" value="Yes" onClick="ShowHideCheque(this.form);">Yes &nbsp; <br>
    <input name="cheques" type="radio" value="No" onClick="ShowHideCheque(this.form);">No<br>
	</form>	</td>
  </tr>
  <tr id="Yes" style="display:none;">
    <td><table width="100%" border="0" cellspacing="0" cellpadding="2">
      <tr>
        <td width="20%">Account Name </td>
        <td width="80%"><input type="text" name="textfield"></td>
      </tr>
      <tr>
        <td>Something Else </td>
        <td><input type="text" name="textfield2"></td>
      </tr>
    </table></td>
  </tr>
  <tr id="No" style="display:none;">
    <td><table width="100%" border="0" cellspacing="0" cellpadding="2">
      <tr>
        <td width="20%">Account Name </td>
        <td width="80%"><input type="text" name="textfield3"></td>
      </tr>
      <tr>
        <td>Something Else </td>
        <td><input type="text" name="textfield22"></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>