I have a "terms of use" page, then I have the page where I have payment and such. On this page I would like the user to have to check a checkbox where it will say "if he accepts the terms of use", but I would also like a javascript, for the payment service Stripe, to check if the checkbox is checked and if not it will alert the user to check it and if it is just proceed like always.
I have commented in the script the different functions. I want it to function so if I were to click the checkbox and then click the submit button, it will then work as usual but if I don't check the checkbox, it will then make an alert box. I would like to do this using an "if" function. The checkbox has to be in the form with the id "payment-form", where the rest of the inputs are.
The javascript is the whole function in the tags. It is the whole function that has to be disabled if the checkbox isn't checked.
My code so far:
<!DOCTYPE html>
<html>
<head>
<script src="http://ift.tt/1doUtf9"></script>
<script src="http://ift.tt/1Jnp6Q0"></script>
<script type="text/javascript"> /* this is the javascript function that only has to "launch" if the checkbox is checked and if not it has to make an alert box to the user and not do any of the other functin in the javascript. */
$(document).ready(function() {
var handler = StripeCheckout.configure({
key: 'Removed for 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"> <!-- this is the form I would like to add the checkbox to -->
<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 <!-- this is the text for accept terms with the link -->
<br>
you agree to the rules <a href="">Terms of Use</a>
</div>
</div>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire