title: Data isnt recode in my database when i add javascript file to the index.html
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
    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 &amp; 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 /^(([^&lt;&gt;()\[\]\\.,;:\s@"]+(\.[^&lt;&gt;()\[\]\\.,;:\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);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    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</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
  
  $pdo = new PDO('mysql:host=localhost;port=3306;dbname=employee','root','');
  $pdo-&gt;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('y-m-d H:i:S')
      $email = $_POST['email'];
      $phone_number = $_POST['phone_number'];
      $gender = $_POST['gender'];
  
      $statement = $pdo-&gt;prepare("INSERT INTO employee_data(full_name,address,birthday,email,phone_number,gender)
                      VAlUES(:full_name, :address, :birthday, :email, :phone_number,:gender )");
      
      $statement-&gt;bindValue(':full_name', $full_name);
      $statement-&gt;bindValue(':address', $address);
      $statement-&gt;bindValue(':birthday', $birthday);
      $statement-&gt;bindValue(':email', $email);
      $statement-&gt;bindValue(':phone_number', $phone_number);
      $statement-&gt;bindValue(':gender', $gender);
      $statement-&gt;execute();
  }
  
  
  ?&gt;
  
    &lt;!DOCTYPE html&gt;
    &lt;html lang="en" dir="ltr"&gt;
  
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Registration&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="title"&gt;Registration&lt;/div&gt;
        &lt;div class="content"&gt;
          &lt;form action="" method="post" id="form"&gt;
            &lt;div class="user-details"&gt;
              &lt;div class="input-box"&gt;
                &lt;span class="details"&gt;Full Name&lt;/span&gt;
                &lt;input type="text" id="full_name" name="full_name" placeholder="Enter your name"&gt;
                &lt;small&gt;Error message &lt;/small&gt;
              &lt;/div&gt;
              &lt;div class="input-box"&gt;
                &lt;span class="details"&gt;Address&lt;/span&gt;
                &lt;input type="text" id="address" name="address" placeholder="Enter your address"&gt;
                &lt;small&gt;Error message &lt;/small&gt;
              &lt;/div&gt;
              &lt;div class="input-box"&gt;
                &lt;span class="details"&gt;Date of Birthday&lt;/span&gt;
                &lt;input type="date" id="birthday" name="birthday" placeholder="Enter your birthday"&gt;
                &lt;small&gt;Error message &lt;/small&gt;
              &lt;/div&gt;
              &lt;div class="input-box"&gt;
                &lt;span class="details"&gt;Email&lt;/span&gt;
                &lt;input type="text" id="email" name="email" placeholder="Enter your email"&gt;
                &lt;small&gt;Error message &lt;/small&gt;
              &lt;/div&gt;
              &lt;div class="input-box"&gt;
                &lt;span class="details"&gt;Phone Number&lt;/span&gt;
                &lt;input type="text" id="phone_number" name="phone_number" placeholder="Enter your number"&gt;
                &lt;small&gt;Error message &lt;/small&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="gender-details"&gt;
              &lt;input type="radio" name="gender" value="male" id="dot-1"&gt;
              &lt;input type="radio" name="gender" value="female" id="dot-2"&gt;
              &lt;input type="radio" name="gender" value="Prefer not to say" id="dot-3"&gt;
              &lt;span class="gender-title"&gt;Gender&lt;/span&gt;
              &lt;div class="category"&gt;
                &lt;label for="dot-1"&gt;
              &lt;span class="dot one"&gt;&lt;/span&gt;
              &lt;span class="gender"&gt;Male&lt;/span&gt;
            &lt;/label&gt;
                &lt;label for="dot-2"&gt;
              &lt;span class="dot two"&gt;&lt;/span&gt;
              &lt;span class="gender"&gt;Female&lt;/span&gt;
            &lt;/label&gt;
                &lt;label for="dot-3"&gt;
              &lt;span class="dot three"&gt;&lt;/span&gt;
              &lt;span class="gender"&gt;Prefer not to say&lt;/span&gt;
              &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="gr"&gt;&lt;small&gt;Error message &lt;/small&gt;
            &lt;/div&gt;
            &lt;div class="button"&gt;
              &lt;input type="submit" value="Submit"&gt;
            &lt;/div&gt;
          &lt;/form&gt;
          &lt;div class="employeeDataTable"&gt;
            &lt;a href="table.php" target="_blank"&gt;Employee Data Table&lt;/a&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="main.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  
    &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>i tried to run it without js then its worked fine and some times it showsWarning
  : Undefined array key &quot;gender&quot; in
  C:\xampp\htdocs\registration\index.php
  on line
  13 when i submit empty form
  i think its a problem in java script code</p>
  <p>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,</p>