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
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!
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.
You can also try this:
<html>
<head>
<script>
function off() {
document.getElementById("hidethis").style.display = 'none';
}
function on() {
document.getElementById("hidethis").style.display = '';
}
</script>
</head>
<body>
<table>
<tr>
<td>Payment Type</td>
<td><input type="radio" name="citizen" value="yes" onClick="on();">
Credit Card
<input type="radio" name="citizen" value="no" onClick="off();">
PayPal
</tr>
</table>
<table id="hidethis" style="display:none;">
<tr>
<td>Put Credit Card input fields in this table section</td>
</tr>
</table>
</body>
</html>
North America
Europe, Middle East and Africa
Asia Pacific