how to pass from a function to another function? (script>script) <= element
how do I pass the value of the field validator into the second function?
<script>
$('#card_number').validateCreditCard(function(result) {
if (result.valid) {
const infosuccess = result.card_type == null ? '-' : result.card_type.name
const valid = result.valid
const validlunn = result.luhn_valid
const validlenght = result.length_valid
console.log(infosuccess);
} else {
// $(this)
// const inforeject = result.valid
// console.log(result);
}
});
</script>
<script>
$('#nextaction').click(function(e) {
e.preventDefault();
// my code...
})
</script>
>Solution :
You cannot pass arguments directly in to event handlers. However, there are other approaches you can use.
In this case you can set the ‘Next’ button to be disabled when the page loads. You can then enable/disable it depending on the result of the credit card validation.
To retrieve the entered card number you can simply read the value from the input when the button is clicked, like this:
const $cardInput = $('#card_number');
const $validateBtn = $('#validate_card');
const $nextBtn = $('#next-action');
$cardInput.validateCreditCard(function(result) {
$nextBtn.prop('disabled', !result.valid); // enable/disable 'next' button
if (result.valid) {
// update the UI to show card details if necessary here...
} else {
console.log('enter a valid credit card number...');
}
});
$nextBtn.on('click', function(e) {
e.preventDefault();
const cardNumber = $cardInput.val();
console.log(cardNumber);
console.log('move to next action here...');
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-creditcardvalidator/1.0.0/jquery.creditCardValidator.min.js" integrity="sha512-7omJBgl5QF4QuC3Ge745IO3rDZVMrZWIGK8lSs5lQIFxbWt4d2c7YQg3ZcnonFyRuQslrJ1Ai33Zj/rnXC15+Q==" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<p>
Test Card number: 5404000000000084
</p>
<label>
Credit card number:
<input type="text" id="card_number" />
<button type="button" id="validate_card">Validate</button>
</label>
<button type="button" id="next-action" disabled>Next...</button>