Hello. In need of a little help here. On my sites checkout page, there is a drop down list of PSP's - Protx and Paypal. If Protx is selected, and the user clicks Next - they are forwarded to Protx' server where they enter their details. That is great. If the user selects Paypal, they then enter their card details into the same web page on our site, as it is Paypal Website Payments Pro. What I would like to do is create some form of script so that the fields for CC number, expiry date, issue no. etc are only shown if they select Paypal. I haven't been able to find a similar script so wondered if anyone can help me out? Thanks
You could use a div tag to hide the CC fields (style=visibility:hidden) and then just toggle the div's visibility to visible with a javascript onchange of the dropdown list. <HTML> <HEAD> <TITLE>DHTML</TITLE> <SCRIPT LANGUAGE = "JavaScript"> var isIE = (document.all) ? true : false; function hideLayer(lay) { if (isIE) { document.all[lay].style.display = "none"; } } function showLayer(lay) { if (isIE) { document.all[lay].style.display = ""; } } function changeObjectAppearance(object1) { if(document.SubmitForm.selectname.selectedIndex == 4) showLayer(object1) else hideLayer(object1) } </SCRIPT> </HEAD> <BODY BGCOLOR=#FFFFFF> <form name="SubmitForm"> <select name="selectname" onchange ="changeObjectAppearance('showbankinfo')"> <option>case 0 - DON'T show table</option> <option>case 1 - DON'T show table</option> <option>case 2 - DON'T show table</option> <option>case 3 - DON'T show table</option> <option>case 4 - Show table !</option> </select> <BR> Some text <DIV class="class1" ID="showbankinfo" name="showbankinfo"> <table border="0" cellpadding="1" cellspacing="1"> <tr> <td class="smallHeadingBurg" align="right" name="Name"></font>Name</td> <td class="regularParagraph"> <input type="text" size="30" maxlength="9" name="name" id="name" value=""> </td> </tr> <tr> <td class="smallHeadingBurg" align="right">Phone:</td> <td class="regularParagraph"> <input type="text" size="30" name="phone" id="phone" value=""> </td> </tr> </table> </div> </form> </BODY> </HTML> Code (markup):
Hey. Thanks for your reply. This is exactly what I'm looking for - except it doesn't work in FF2 Is there any way this can be coded to be compatible with FF2? Thanks
Sorry, just replace the javascript with this: <SCRIPT LANGUAGE = "JavaScript"> function hideLayer(lay) { document.all[lay].style.display = "none"; } function showLayer(lay) { document.all[lay].style.display = ""; } function changeObjectAppearance(object1) { if(document.SubmitForm.selectname.selectedIndex == 4) showLayer(object1) else hideLayer(object1) } </SCRIPT> Code (markup):
That't fantastic - though, how would I go about hiding the fields as default? Thanks for all your help, much appreciated!
<form name="form1" method="post"> Select a page to visit: <select name="dd1" size="1"> <option value="http://address_for_page_1">Page # 1</option> <option value="http://address_for_page_2">Page # 2</option> <option value="http://address_for_page_3">Page # 3</option> </select> <input type="button" onclick= "location = document.form1.dd1.options [document.form1.dd1.selectedIndex].value;" value="GO"> </form> Code (markup): This is a drop down menu in XHTML. It only redirects to / directories on your site, so say i was to put in the address chat it would redirect you to www.yourdomain.com/chat, if you chance the size value, it changes the box size, so if its set to 1 (default) itll be a drop down menu, if set to 2 itll be a scroll down menu with 2 links showing, try it and se if you like! To add another address simply add; <option value="http://address_for_page_3">Page # 3</option>
Hey. Unfortunately this isn't what I was looking for, try the code in the above examples to see what it is I need to do - except I need to make the code given load the fields as hidden as default, and only appear when the 'show table' option is selected. Thanks
You could use a body onload event to trigger the hideLayer(lay) function. Or you could simply make the style visibility: hidden;
Disregard that last post; just change this line: <DIV class="class1" ID="showbankinfo" name="showbankinfo" style="display: none;"> Code (markup): All you have to do is add the style="display: none;"
Scrap this initial post. I just tried your latest invention and it works perfectly - this is exactly what I wanted to do. Now it's time to check cross-browser compatibility. Thanks for the help, +rep added Thanks Ps. My apologies, we keep adding/editing posts at the same time