hiding the credit card detail fields when the paypal option is selected

Report · Jul 17, 2012

Hey BC community,

Has anyone had any experience in hiding the credit card detail fields when the 'paypal option' is selected. No need making the shopper fill in fields twice...??

Any help would be appreciated,

Cheers,

Pat

Report · Jul 17, 2012

Hi Pat,

This can be achieved by using some css and javascript - pop the CC fields in a div then display none on the div when the PayPal option is clicked.

Steve

Report · Jul 17, 2012

Hey Steve.

Yeah in theory I know how to do it, I had worked that aprt out, just got to work out how to write the js, that's all.

Cheers,

Pat

Report · Jul 18, 2012

Let me know your site's URL and I'll have a look. Basically you need to assign "onclick" to the payment option radio buttons so that every time an user clicks any of the payment options the divs containing the credit card info are shown\hidden.

Report · Jul 18, 2012

Hi MihaiTica,

Thanks for the response....it's strange I have got the actual 'order_registration-AU.html' file to work, chuck it into a template and it breaks it....not the first time either.

It's driving me nuts....

Any ideas?

Thanks in advance,

Pat

Report · Jul 18, 2012

I will need to have a look at your setup, if you do not want your site URL to appear publicly send me a PM with the URL and I will look into this for you.

Report · Jul 18, 2012

Hey MihaiTica, no that's cool - www.glomesh.com

Report · Jul 19, 2012

Check out your template, it throws an error at this line - http://screencasteu.worldsecuresystems.com/Mihai/2012-07-19_1013.png

This error is also thrown on the shopping cart (as there are no poplets there either). To solve this I would recommend adding a condition at the beginning of the script to determine whether you want it to run or want to skip it (if you ar eon the checkout form or the shopping cart for example).

Something like

if (document.getElementsByClassName('poplets').length)

{your script here}

This would execute the script only if there is an element with the class "poplets" on the page and do nothing otherwise. I'd also recommend using Firebug or the Chrome inspector to troubleshoot these types of errors.

Hope this helps!

Report · Jul 19, 2012

Hi MihaiTica,

Just took that jquery out as suggested, rather than write extra code. That poplet jquery wasn't needed so it is all working fine now too. Thanks very much for all the help, really appreciate it.

Cheers,

Pat

Report · Jul 19, 2012

Some bits to help you form your function:

if ( $j("input#PaymentMethodType_1:checked").val() == "1" )
 {
 }
 if ( $j("input#PaymentMethodType_3:checked").val() == "3" )
 {
 }
 if ( $j("input#PaymentMethodType_5:checked").val() == "5" )
 {
 }
 if ( $j("input#PaymentMethodType_7:checked").val() == "7" )
 {
 }
 if ( $j("input#PaymentMethodType_8:checked").val() == "8" )
 {
 }
 $j("#PaymentMethodType_1").change(function()
 {
 if ( $j(this).val() == "1" )
 {
 }
 });
 $j("#PaymentMethodType_3").change(function()
 {
 if ( $j(this).val() == "3" )
 {
 }
 });
 $j("#PaymentMethodType_5").change(function()
 {
 if ( $j(this).val() == "5" )
 {
 }
 });
 $j("#PaymentMethodType_7").change(function()
 {
 if ( $j(this).val() == "7" )
 {
 }
 });
 $j("#PaymentMethodType_8").change(function()
 {
 if ( $j(this).val() == "8" )
 {
 }
 });
 if ( $j("#Amount").val() == "0.00" )
 {
 }

These are only bits of examples to help show you what you can do. You can .show() and .hide() elements as you need to.
The first set are on page load, the latter set if a set of radio buttons are changed.

Having a value of 0.00 is the gift voucher/free use cases and you can run things and show/hide as you need to with regard to this.
You could even do things like description area that changes depending on the payment type as well for example.

Report · Jul 19, 2012

Hey Liam,

Thanks for that, got it sorted but seemed some of the other jquery was conflicting, so it is all working as of this morning. Much appreciated as always.

Cheers,

Pat

Report · Jan 09, 2013

You can also try this:

<html>

<head>

function off() {

document.getElementById("hidethis").style.display = 'none';

}

function on() {

document.getElementById("hidethis").style.display = '';

}

</script>

</head>

<body>

<table>

<tr>

<td>Payment Type</td>

Credit Card

PayPal

</tr>

</table>

<tr>

<td>Put Credit Card input fields in this table section</td>

</tr>

</table>

</body>

</html>