SitePoint Sponsor

User Tag List

Results 1 to 18 of 18

Hybrid View

  1. #1
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    762
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Web Form - display input box on event

    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?

  2. #2
    SitePoint Wizard triexa's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    2,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...
    AskItOnline.com - Need answers? Ask it online.
    Create powerful online surveys with ease in minutes!
    Sign up for your FREE account today!
    Follow us on Twitter

  3. #3
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    762
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Wizard triexa's Avatar
    Join Date
    Dec 2002
    Location
    Canada
    Posts
    2,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)
    AskItOnline.com - Need answers? Ask it online.
    Create powerful online surveys with ease in minutes!
    Sign up for your FREE account today!
    Follow us on Twitter

  5. #5
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    762
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx for the tips

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

  6. #6
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  7. #7
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    762
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  8. #8
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  9. #9
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    762
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the great advice

  10. #10
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    762
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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> 

  11. #11
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  12. #12
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    762
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi rajug, thanks for the reply
    I tried your code and nothign is appearing when using the radio check box?

  13. #13
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  14. #14
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    762
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  15. #15
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  16. #16
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    762
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for your help

  17. #17
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Aren't id's supposed to be unique across a document?

  18. #18
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    762
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dan, yeah I just figured that out.
    Changed the IDs on the 2nd set of elements to '1&0'


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •