12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

is this called "checkbox orderform" script?

by glasshalffull
10 replies
Hi

I need to make potential customers agree to my terms of service before they pay for my offer.

I've seen on other pages where the terms of service is located in a box with a checkbox and the payment button is greyed out below this, not able to be clicked. Once the checkbox is checked the payment button is no longer unavailable and then you can proceed to make payment.

How can we do that with a paypal button? DOes anyone have this script? I've searched for it here but haven't found it. Honestly, I'm not sure what it's called.

thanks for any help
#called #checkbox orderform #script
  • Profile picture of the author mikeonrails
    You can do this with javascript. You could do this in pure JS, but JQuery makes life so much better. I just wrote and tested, so hopefully it works for you:

    This is in your <head></head>:

    <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    //Make the button initally disabled
    $('#myForm input[type=submit]').attr("disabled", "disabled");

    $("#myForm input:checkbox[name=tos]").click(function(){
    if($(this).attr('checked')){
    //Show the button and enable
    $('#myForm input[type=submit]').removeAttr("disabled");

    }else{
    //Gray out the button and disable
    $('#myForm input[type=submit]').attr("disabled", "disabled");
    }
    });

    });
    </script>

    This is in your <body></body>:
    <form id="myForm" method="post" action="welcome.php">
    <input type="checkbox" name="money" value="1000000" /> Do you want a million dollars?<br/>
    <input type="checkbox" name="tos" value="1" /> Do you agree to the TOS?<br />

    <input type="submit" value="Submit" />
    </form>

    You need to download this file from the jquery website and place on your server: "jquery-1.4.2.min.js"
    {{ DiscussionBoard.errors[2764063].message }}
  • Profile picture of the author SteveJohnson
    Which works fine as long as the visitor doesn't have javascript turned off in their browser. If you're going to force a javascript solution to your question, you'll also need to force the visitor to have javascript turned on, i.e. deny access to the page at all in browsers with javascript disabled.

    And yes, the vast majority of users don't have javascript disabled - but some still do - somewhere around 5%, according to the latest w3 figures that I've been able to get.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[2765725].message }}
  • Profile picture of the author zeeshi570
    you need to hide the button before checkbox is checked and when it is checked display the button.
    {{ DiscussionBoard.errors[2767786].message }}
  • Profile picture of the author Jay Rhome
    I've tried the code but I have modified this since my button is an image

    This is the head:
    <script src="../jquery-1.6.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    //Make the button initally disabled
    $('#myForm input[type=image]').attr("disabled", "disabled");

    $("#myForm input:checkbox[name=tos]").click(function(){
    if($(this).attr('checked')){
    //Show the button and enable
    $('#myForm input[type=image]').removeAttr("disabled");

    }else{
    //Gray out the button and disable
    $('#myForm input[type=image]').attr("disabled", "disabled");
    }
    });

    });
    </script>


    In the body:

    <form id="myForm" name="PaymentForm" method="post" action="http://mysite.com/dap/paypalCoupon.php" />
    <input type="hidden" name="cmd" value="_xclick"/>
    <input type="hidden" name="currency_code" value="USD" />
    <input type="hidden" name="item_name" value="Product1" />
    <input type="hidden" name="redirect" value="http://mysite.com/go/site.php" />
    <div><input type="image" src="http://mysite.com/wp-content/themes/mysite/images/add.jpg" border="0" name="submit" alt="Make payments with PayPal - its fast, free and secure!" /></div><br>
    <div><strong><font color="#32424a" size="-1">Coupon Code:</font></strong>
    <input type="text" name="coupon_code" size="20" /></div><br>
    <input type="checkbox" name="tos" value="1" /><font size="-1">I have read and agree to the <a href="http://mysite.com/site-terms-of-service/" target="_blank">Terms of Service</a></font><br />
    </form>

    In red is the part I'm not sure.

    As it stands now, the button can be clicked, whether the checkbox has been checked or not. Of course the goal is to have the button non-functioning until the checkbox has been checked.

    It could be too that I have not uploaded the jquery-1.6.4.min.js file to the right place. I have placed it at the root folder. Is that good?
    {{ DiscussionBoard.errors[4978764].message }}
  • Profile picture of the author johnnyN
    I just tested your code and it works correctly for me.

    see here. Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

    if you click the add button when the check box is unchecked, then nothing happens. If you click it when checkbox is checked then it goes to next page.

    I only tried it in chrome, but it should be good in others.
    {{ DiscussionBoard.errors[4979552].message }}
  • Profile picture of the author johnnyN
    one thing you might want to do is
    1. load a greyed out image when unchecked
    2. change cursor to arrow when unchecked
    {{ DiscussionBoard.errors[4979561].message }}
  • Profile picture of the author johnnyN
    missed your comment about the jquery.
    you are correct, if it is not working then jquery may not be loading.

    normally people will link to google's free hosting of jquery the url is below
    https://ajax.googleapis.com/ajax/lib.../jquery.min.js
    {{ DiscussionBoard.errors[4983205].message }}
    • Profile picture of the author Jay Rhome
      Originally Posted by johnnyN View Post

      missed your comment about the jquery.
      you are correct, if it is not working then jquery may not be loading.
      I see that you uploaded my code, and yep, it does work in Firefox too... but not on my site

      normally people will link to google's free hosting of jquery the url is below
      https://ajax.googleapis.com/ajax/lib.../jquery.min.js
      Here's my new coding
      Still doesn't do anything...

      <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript">
      $(function(){
      //Make the button initally disabled
      $('#myForm input[type=image]').attr("disabled", "disabled");

      $("#myForm input:checkbox[name=tos]").click(function(){
      if($(this).attr('checked')){
      //Show the button and enable
      $('#myForm input[type=image]').removeAttr("disabled");

      }else{
      //Gray out the button and disable
      $('#myForm input[type=image]').attr("disabled", "disabled");
      }
      });

      });
      </script>
      </head>


      I don't get it, since as your test proves, it's supposed to work.

      BTW thanks for the help!
      {{ DiscussionBoard.errors[4984798].message }}
  • Profile picture of the author johnnyN
    hmmm....

    ok... maybe something else on the page is interfering.
    can you PM me the url?
    {{ DiscussionBoard.errors[4984963].message }}

Trending Topics