SitePoint Sponsor |
|
User Tag List
Results 1 to 18 of 18
-
May 31, 2007, 21:06 #1
- Join Date
- Aug 2004
- Location
- Cairns, Australia
- Posts
- 762
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
May 31, 2007, 21:16 #2
- 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
-
May 31, 2007, 21:22 #3
- 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
<input type=radio name="payment_method" class="radio" value="paypal" />Paypal </td>
</tr>
PHP Code:<tr>
<td width="133">Paymate ID</td><td width="148"><input type="text" name="paymate_id" size="20"></td>
</tr>
PHP Code:<tr>
<td width="133">Paypal ID</td><td width="148"><input type="text" name="paypal_id" size="20"></td>
</tr>
-
May 31, 2007, 21:28 #4
- 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 <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>
(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
-
May 31, 2007, 22:00 #5
- 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""
-
May 31, 2007, 22:04 #6
- 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
-
May 31, 2007, 22:41 #7
- 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?
-
May 31, 2007, 23:12 #8
- 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
-
May 31, 2007, 23:43 #9
- Join Date
- Aug 2004
- Location
- Cairns, Australia
- Posts
- 762
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanks for the great advice
-
Jun 3, 2007, 18:43 #10
- 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
<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>
-
Jun 3, 2007, 20:32 #11
- 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 <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
-
Jun 3, 2007, 20:42 #12
- 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?
-
Jun 3, 2007, 20:53 #13
- 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 <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
-
Jun 3, 2007, 21:43 #14
- 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>
-
Jun 3, 2007, 22:05 #15
- 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%" 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 <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
-
Jun 3, 2007, 22:31 #16
- Join Date
- Aug 2004
- Location
- Cairns, Australia
- Posts
- 762
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thank you for your help
-
Jun 3, 2007, 22:36 #17
- Join Date
- Aug 2000
- Location
- Philadephia, PA
- Posts
- 20,578
- 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
-
Jun 5, 2007, 16:46 #18
- 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