i have "terms of use" page, have page have payment , such. on page user have check checkbox "if accepts terms of use", javascript, payment service stripe, check if checkbox checked , if not alert user check , if proceed always.
i have commented in script different functions. want function if click checkbox , click submit button, work usual if don't check checkbox, make alert box. using "if" function. checkbox has in form id "payment-form", rest of inputs are.
the javascript whole function in tags. whole function has disabled if checkbox isn't checked.
my code far:
<!doctype html> <html> <head> <script src="https://checkout.stripe.com/checkout.js"></script> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script type="text/javascript"> /* javascript function has "launch" if checkbox checked , if not has make alert box user , not of other functin in javascript. */ $(document).ready(function() { var handler = stripecheckout.configure({ key: 'removed safety', image: 'image2.png', token: function(token) { var $form = $('#payment-form'); $form.append($('<input type="hidden" name="stripetoken" />').val(token.id)); $form.get(0).submit(); } }); $('#custombutton').on('click', function(e) { var amount = math.round($("#amount").val()*100); handler.open({ name: 'payment', description: 'describtion', amount: amount }); e.preventdefault(); }); $(window).on('popstate', function() { handler.close(); }); }); </script> </head> <body> <div id="header"> </div> <div id="container"> <div id="content"> <div class="firstproductbidwrap" style="height:500px width:800px"> <form id="payment-form" action="chargecard.php" method="post" name="payment-form"> <!-- form add checkbox --> <input onkeypress="return isnumberkey(event)" type="text" name="amount" id="amount" value="" readonly/> <input type="text" name="emailforpayment" id="emailforpayment" placeholder="enter email"/> <input type="text" name="displaynameforpayment" id="displaynameforpayment" placeholder="enter display name" maxlength="12"/> <input type="image" src="button3.png" id="custombutton" value="submit" alt="button"/> </form> <script type="text/javascript"> function todec(code) { return code - 48; } function isnumberkey(evt) { var charcode = (evt.which) ? evt.which : event.keycode if (charcode > 31 && (charcode < 48 || charcode > 57 || todec(charcode) != currentvar + 1)) return false; return true; } </script> <script type="text/javascript"> var request = new xmlhttprequest(); request.open('get', 'textfilevariables.txt', false); request.send(); var currentvar= parseint(request.responsetext) var nextvar = currentvar + 1; document.getelementbyid("currentvar").innerhtml = currentvar; document.getelementbyid("nextvardisplay").innerhtml = nextvar ; document.getelementbyid("amount").value = nextvar ; </script> <div class="acceptrules"> when participating <!-- text accept terms link --> <br> agree rules <a href="">terms of use</a> </div> </div> </div> </div> </body> </html>
what this:
<!--replace thing --> <input type="image" src="button3.png" id="custombutton" value="submit" alt="button"/> <!-- --> <input id="mybutton" type="submit" disabled="disabled" /> then in css
<style> #mybutton{ background: url(path/to/your/image.png); width: 100px; /*your image size*/ height: 50px; /*your image height*/ } </style> then, add input before submit
<label><input type="checkbox" id="terms" /> accept terms , condition</label> then in js
$('#terms').on('change', function(){ if ($(this).is(':checked')){ $('#mybutton').removeprop('disabled'); } else{ $('#mybutton').attr('disabled', 'disabled'); } }); 