I'm trying to hide/show a button on my form depending on whether the credit card validation returns true. So they can click checkout if it is true, and otherwise they cannot.
<script>
$(function test() {
$('#cardNo').validateCreditCard(function (result) {
$('.log').html('Card type: ' + (result.card_type == null ? '-' : result.card_type.name)
+ '<br>Valid: ' + result.valid
+ '<br>Length valid: ' + result.length_valid
+ '<br>Luhn valid: ' + result.luhn_valid);
console.log(result.valid);
console.log(result.length_valid);
console.log(result.luhn_valid);
if (result.valid == true && result.length_valid == true && result.luhn_valid == true) {
console.log('we have entered the if statement');
document.getElementById("checkoutButton").style.dislay = 'block';
}
else {
console.log('we are not in the if statement');
document.getElementById("checkoutButton").style.display = 'none';
}
});
});
</script>
I have verified that when I enter a correct credit card number, we do go into the if statement. The console will read 'we have entered the if statement'. However, the checkout button will not become visible on the page.
I am wondering if it is even possible to do something like this in javascript? Thanks for the help!
just replace your code with this one:
if (result.valid == true && result.length_valid == true && result.luhn_valid == true) {
console.log('we have entered the if statement');
document.getElementById("checkoutButton").style.display = 'block';
}
else {
console.log('we are not in the if statement');
document.getElementById("checkoutButton").style.display = 'none';
}
That's it, Enjoy coding :)
Change from
document.getElementById("checkoutButton").style.dislay = 'block';
to
document.getElementById("checkoutButton").style.display = 'block';
You have the error which tends to be a Typical grammatical error in the JavaScript code.
In the JS code the Error is defined as the TYPO Error. Hence by rectifying the typo error you can get the hide/show function working on well.
You have used the Style display Property in JavaScript.
Brief about that: - The display property sets or returns the element's display type.
Elements in HTML are mostly "inline" or "block" elements: An inline element has floating content on its left and right side. A block element fills the entire line, and nothing can be displayed on its left or right side.
The display property also allows the author to show or hide an element. It is similar to the visibility property. However, if you set display:none, it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.
Syntax:
document.getElementById("myDIV").style.display = "none";
Replace This code since it has the typo error:
document.getElementById("checkoutButton").style.dislay = 'block';
With:
document.getElementById("checkoutButton").style.display = "block";