I can't seem to get the code right for submitting and validating a credit card form. I have tried changing different js codes but can't seem to get it right there is something I am missing as you can see I am new to js.
I have the go to other website button working just can't get the submit button to do anything
here is the HTML i have been working with i have validated this with no errors but something just not working Please help.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CC FORM</title>
</head>
<body>
<div class="container">
<header></header>
<form id="ccdetails">
<fieldset>
<legend>Customer details</legend> <br>
<table>
<tr id="fname"><td>First Name </td><td><input type="text"></td></tr>
<tr id="lname"><td>Last Name </td><td><input type="text"></td></tr>
<tr id= "postcode"><td>Postcode </td><td><input type="text"></td></tr>
<tr id="email"><td>Email </td><td><input type="text"></td></tr>
</table>
</fieldset>
<fieldset>
<legend>Payment Details</legend><br>
<table>
<tr><td>Credit Card </td><td>
<select name="cardtype" id="cardtype">
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="American Express">American Express</option>
</select></td></tr>
<tr id="c_num"><td>Card Number </td><td><input type="text"></td></tr>
<tr id="ccv"><td>CVV </td><td><input type="text"></td></tr>
<tr><td>Expiry MM/YY
<select name="month" id="month">
<option value="number">1</option>
<option value="number">2</option>
<option value="number">3</option>
<option value="number">4</option>
<option value="number">5</option>
<option value="number">6</option>
<option value="number">7</option>
<option value="number">8</option>
<option value="number">9</option>
<option value="number">10</option>
<option value="number">11</option>
<option value="number">12</option>
</select>
<td>/
<select name="year" id="year">
<option value="number">2023</option>
<option value="number">2024</option>
<option value="number">2025</option>
<option value="number">2026</option>
<option value="number">2027</option>
<option value="number">2028</option>
<option value="number">2029</option>
<option value="number">2030</option>
<option value="number">2031</option>
<option value="number">2032</option>
</select></td>
</table>
</fieldset>
<br>
<br>
<button type="button" onclick="submitform ()">Submit</button>
<script src="../js/gotoweb.js">
</script>
<button type="button" onclick="form_help">Help</button>
<br>
<br>
<button type="button" onclick="goToWebsite()">Go to other Pages</button>
<script src="../js/gotoweb.js">
</script>
</form>
</div>
</body>
</html>
Here is my js i have been using i know it is something in here i just cant seem to find it. i am more intersted in the submitform area as i have the goto other website working.
function goToWebsite () {
let validChoice = false;
let errorMessage = "Payment Options\n";
while (!validChoice) {
const usersChoice = prompt(errorMessage + "\n1.Postbillpay \n2.Afterpay \n3.Applepay");
if (usersChoice === null) {
return;
}
switch (usersChoice) {
case "1":
window.open("https://www.postbillpay.com.au/","blank", "width=800,height=800");
vaildChoice=true;
break;
case "2":
window.open("https://www.afterpay.com/en-AU","blank", "width=800,height=800");
vaildChoice=true;
break;
case "3":
window.open("https://www.apple.com/au/apple-pay/","blank", "width=800,height=800");
vaildChoice=true;
break;
default:
errorMessage = "invalid choice. ";
break;
}
}
}
function submitform () {
// Check all fields have been filled in
const required_fields = document.getElementById ("c_num","month","year", "ccv", "fname" , "lname", "postcode", "emai");
let all_fields_filled = true;
for (const field of required_fields) {
if (!field) {
all_fields_filled = false;
break;
}
}
if (all_fields_filled) {
// Proceed to the next field
} else {
display ("Please check all fields");
}
// Check email is valid
const email_address = document.getElementById("email");
if (email_address.length < 8 || !email_address.includes('@') || !email_address.includes('.')) {
console.log("Invalid email address. Please enter a valid email address.");
} else {
// Proceed to the next field
}
// Check post code has 4 digits
const postcode = document.getElementById('postcode').value;
if (postcode.length !== 4 || isNaN(postcode)) {
alert('Please enter a valid postcode');
} else {
// proceed with the rest of the form
}
// Credit card field only contains 16 numbers
const c_num = document.getElementById('c_num').value;
if (/^\d+$/.test(c_num) && c_num.length === 16) {
// proceed to the next field
} else {
alert('Invalid credit card number');
}
// CVV only has 3 numbers
const ccv = document.getElementById('ccv').value;
if (ccv.length === 3) {
// proceed with the rest of the form
} else {
alert('Please enter a valid CCV');
}
// Check if card is not expired
const currentMonth = new Date().getMonth() + 1;
const currentYear = new Date().getFullYear().toString().substr(-2);
const expiryMonth = document.getElementById('month').value;
const expiryYear = document.getElementById('year').value;
if (currentYear > expiryYear || (currentYear === expiryYear && currentMonth > expiryMonth)) {
alert('The card has expired, please enter a valid card');
} else {
// proceed with submit form
}
}
i have also tried using js validater but to no effect
