Skip navigation
Currently Being Moderated

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

Jul 17, 2012 1:25 AM

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

 
Replies
  • Currently Being Moderated
    Jul 17, 2012 5:51 AM   in reply to pat macy

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 18, 2012 5:01 AM   in reply to pat macy

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 18, 2012 11:52 PM   in reply to pat macy

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 12:24 AM   in reply to pat macy

    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!

     
    |
    Mark as:
  • Liam Dilley
    4,030 posts
    Feb 28, 2012
    Currently Being Moderated
    Jul 19, 2012 2:01 AM   in reply to pat macy

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 9, 2013 4:34 PM   in reply to pat macy

    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>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points