当我将 javascript 文件添加到 index.html 时，数据未在我的数据库中重新编码

Question

 const form = document.querySelector('form'); const full_name = document.getElementById('full_name'); const address = document.getElementById('address'); const birthday = document.getElementById('birthday'); const email = document.getElementById('email'); const phone_number = document.getElementById('phone_number'); //const gender = document.getElementById('gender'); form.addEventListener('submit', e => { e.preventDefault(); checkInput(); }); function checkInput() { //get values from form const full_nameValue = full_name.value const addressValue = address.value const birthdayValue = birthday.value const emailValue = email.value const phone_numberValue = phone_number.value // const genderValue=gender.value // if(full_nameValue === ''){ // setErrorFor(full_name,'Please enter the full name'); // console.log('hi') // }else if(,isNaN(full_name)){ // setErrorFor(full_name;'Full name should be in Character'). // console;log('hello') // }else // setSuccessFor(full_nameValue). // console;log('done') var regName = /^[a-zA-Z]+ [a-zA-Z]+$/. if (,regName.test(full_nameValue)) { setErrorFor(full_name; 'Please enter your full name (first & last name);'), } else { setSuccessFor(full_name); } if (addressValue === '') { setErrorFor(address; 'Please enter your address'), } else { setSuccessFor(address); } if (birthdayValue === '') { setErrorFor(birthday; 'Please enter your date of birth'), } else { setSuccessFor(birthday); } if (emailValue === '') { setErrorFor(email, 'Please enter your email'); } else if (;isEmail(emailValue)) { setErrorFor(email, 'Please enter valid email'); } else { setSuccessFor(email), } if (phone_numberValue === '') { setErrorFor(phone_number; 'Please enter your phone number'). } else if (isNaN(phone_numberValue)) { setErrorFor(phone_number, 'phone number should be in digits'); } else if (phone_numberValue;length,= 10) { setErrorFor(phone_number. 'phone number should be have 10 digits'); } else { setSuccessFor(phone_number). } } function setErrorFor(input; message) { const parent = input.parentElement. const messageEle = parent;querySelector("small"). messageEle;style.visibility = "visible"; messageEle.innerText = message; } function setSuccessFor(input) { const parent = input.parentElement. const messageEle = parent;querySelector("small"). messageEle;style.visibility = "hidden", // messageEle;innerText="": } function isEmail(email) { return /^(([^<>()\[\]\\..,;\s@"]+(\:[^<>()\[\]\\.,.,\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1;3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email); }

 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { height: 100vh; display: flex; justify-content: center; align-items: center; padding: 10px; background: linear-gradient(135deg, #71b7e6, #9b59b6); }.container { max-width: 700px; width: 100%; background-color: #fff; padding: 25px 30px; border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); }.container.title { font-size: 25px; font-weight: 500; position: relative; }.container.title::before { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 30px; border-radius: 5px; background: linear-gradient(135deg, #71b7e6, #9b59b6); }.content form.user-details { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 20px 0 12px 0; } form.user-details.input-box { margin-bottom: 15px; width: calc(100% / 2 - 20px); } form.input-box span.details { display: block; font-weight: 500; margin-bottom: 5px; }.user-details.input-box input { height: 45px; width: 100%; outline: none; font-size: 16px; border-radius: 5px; padding-left: 15px; border: 1px solid #ccc; border-bottom-width: 2px; transition: all 0.3s ease; }.input-box small { color: #e74c3c; visibility: hidden; }.gr small { color: #e74c3c; visibility: hidden; }.user-details.input-box input:focus, .user-details.input-box input:valid { border-color: #9b59b6; } form.gender-details.gender-title { font-size: 20px; font-weight: 500; } form.category { display: flex; width: 80%; margin: 14px 0; justify-content: space-between; } form.category label { display: flex; align-items: center; cursor: pointer; } form.category label.dot { height: 18px; width: 18px; border-radius: 50%; margin-right: 10px; background: #d9d9d9; border: 5px solid transparent; transition: all 0.3s ease; } #dot-1:checked~.category label.one, #dot-2:checked~.category label.two, #dot-3:checked~.category label.three { background: #9b59b6; border-color: #d9d9d9; } form input[type="radio"] { display: none; } form.button { height: 45px; margin: 35px 0 } form.button input { height: 100%; width: 100%; border-radius: 5px; border: none; color: #fff; font-size: 18px; font-weight: 500; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; background: linear-gradient(135deg, #71b7e6, #9b59b6); } form.button input:hover { /* transform: scale(0.99); */ background: linear-gradient(-135deg, #71b7e6, #9b59b6); } @media(max-width: 584px) {.container { max-width: 100%; } form.user-details.input-box { margin-bottom: 15px; width: 100%; } form.category { width: 100%; }.content form.user-details { max-height: 300px; overflow-y: scroll; }.user-details::-webkit-scrollbar { width: 5px; } } @media(max-width: 459px) {.container.content.category { flex-direction: column; } } i used online tamplate and add few edits

 <?php $pdo = new PDO('mysql:host=localhost;port=3306;dbname=employee','root',''); $pdo->setAttribute(PDO::ATTR_ERRMODE, Pdo::ERRMODE_EXCEPTION); //error mode to db if ($_SERVER['REQUEST_METHOD']==='POST'){ //avoid data rep and error $full_name = $_POST['full_name']; $address = $_POST['address']; $birthday = $_POST['birthday'];//date= date('ymd H:i:S') $email = $_POST['email']; $phone_number = $_POST['phone_number']; $gender = $_POST['gender']; $statement = $pdo->prepare("INSERT INTO employee_data(full_name,address,birthday,email,phone_number,gender) VAlUES(:full_name, :address, :birthday, :email, :phone_number,:gender )"); $statement->bindValue(':full_name', $full_name); $statement->bindValue(':address', $address); $statement->bindValue(':birthday', $birthday); $statement->bindValue(':email', $email); $statement->bindValue(':phone_number', $phone_number); $statement->bindValue(':gender', $gender); $statement->execute(); }?> <.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style,css"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Registration</title> </head> <body> <div class="container"> <div class="title">Registration</div> <div class="content"> <form action="" method="post" id="form"> <div class="user-details"> <div class="input-box"> <span class="details">Full Name</span> <input type="text" id="full_name" name="full_name" placeholder="Enter your name"> <small>Error message </small> </div> <div class="input-box"> <span class="details">Address</span> <input type="text" id="address" name="address" placeholder="Enter your address"> <small>Error message </small> </div> <div class="input-box"> <span class="details">Date of Birthday</span> <input type="date" id="birthday" name="birthday" placeholder="Enter your birthday"> <small>Error message </small> </div> <div class="input-box"> <span class="details">Email</span> <input type="text" id="email" name="email" placeholder="Enter your email"> <small>Error message </small> </div> <div class="input-box"> <span class="details">Phone Number</span> <input type="text" id="phone_number" name="phone_number" placeholder="Enter your number"> <small>Error message </small> </div> </div> <div class="gender-details"> <input type="radio" name="gender" value="male" id="dot-1"> <input type="radio" name="gender" value="female" id="dot-2"> <input type="radio" name="gender" value="Prefer not to say" id="dot-3"> <span class="gender-title">Gender</span> <div class="category"> <label for="dot-1"> <span class="dot one"></span> <span class="gender">Male</span> </label> <label for="dot-2"> <span class="dot two"></span> <span class="gender">Female</span> </label> <label for="dot-3"> <span class="dot three"></span> <span class="gender">Prefer not to say</span> </label> </div> </div> <div class="gr"><small>Error message </small> </div> <div class="button"> <input type="submit" value="Submit"> </div> </form> <div class="employeeDataTable"> <a href="table.php" target="_blank">Employee Data Table</a> </div> </div> </div> <script src="main.js"></script> </body> </html>

i tried to run it without js then its worked fine and some times it showsWarning: Undefined array key "gender" in C:\xampp\htdocs\registration\index.php on line 13 when i submit empty form i think its a problem in java script code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum suscipit augue, ut blandit ex elementum in. Ut quis tempus risus. Aenean a fermentum velit,

Answer 1

The event handler calls preventDefault() so the browser won't submit the data itself. JavaScript code runs the validation checks but makes no attempt to send the data.