SitePoint Sponsor

User Tag List

Results 1 to 18 of 18

Thread: Web Form - display input box on event

  1. May 31, 2007 21:06 #1
    adammc
    adammc is offline
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    760
    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. May 31, 2007 21:16 #2
    triexa
    triexa is offline
    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. May 31, 2007 21:22 #3
    adammc
    adammc is offline
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    760
    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. May 31, 2007 21:28 #4
    triexa
    triexa is offline
    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. May 31, 2007 22:00 #5
    adammc
    adammc is offline
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx for the tips

    Do you mean by using the "tbody id="paymate""
  6. May 31, 2007 22:04 #6
    Raju Gautam
    Raju Gautam is offline
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,004
    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>
    JLangEditor - Joomla (1.5/1.7) Language Editor
    Personal Blog
    ZCE - PHP 5
  7. May 31, 2007 22:41 #7
    adammc
    adammc is offline
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    760
    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. May 31, 2007 23:12 #8
    Raju Gautam
    Raju Gautam is offline
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,004
    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.
    JLangEditor - Joomla (1.5/1.7) Language Editor
    Personal Blog
    ZCE - PHP 5
  9. May 31, 2007 23:43 #9
    adammc
    adammc is offline
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the great advice
  10. Jun 3, 2007 18:43 #10
    adammc
    adammc is offline
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    760
    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. Jun 3, 2007 20:32 #11
    Raju Gautam
    Raju Gautam is offline
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,004
    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>
    JLangEditor - Joomla (1.5/1.7) Language Editor
    Personal Blog
    ZCE - PHP 5
  12. Jun 3, 2007 20:42 #12
    adammc
    adammc is offline
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    760
    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. Jun 3, 2007 20:53 #13
    Raju Gautam
    Raju Gautam is offline
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,004
    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>
    JLangEditor - Joomla (1.5/1.7) Language Editor
    Personal Blog
    ZCE - PHP 5
  14. Jun 3, 2007 21:43 #14
    adammc
    adammc is offline
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    760
    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. Jun 3, 2007 22:05 #15
    Raju Gautam
    Raju Gautam is offline
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,004
    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>
    JLangEditor - Joomla (1.5/1.7) Language Editor
    Personal Blog
    ZCE - PHP 5
  16. Jun 3, 2007 22:31 #16
    adammc
    adammc is offline
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for your help
  17. Jun 3, 2007 22:36 #17
    Dan Grossman
    Dan Grossman is offline
    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?
    Try Improvely, your online marketing dashboard.
    → Conversion tracking, click fraud detection, A/B testing and more
  18. Jun 5, 2007 16:46 #18
    adammc
    adammc is offline
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    760
    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'
« Previous Thread | Next Thread »

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
  •  

Forum Rules