Php form unable to send data to database using validation ajax, no errors

I am running my php code through validation using ajax and sweet alert 2 but for some reason, I am not getting any data to the sql database and also receiving no errors. I confirm there is no data in my sql database by using phpmyadmin. The form is redirecting correctly so I am at a loss as to why and what I might be missing.

Here is my form code:

<form action="student-enrollment.php" id="zitalk-register-1" method="post" class="wpcf7-form" autocomplete="off">
  <!--Field sweet and sticky-->
  <input name="username" type="text" id="username" class="hide-sweets" autocomplete="new-user-name" placeholder="User Name">
  <!--End yummy field-->
  <div class="form-group">
      <span class="wpcf7-form-control-wrap your-name">
        <div class="input-wrapper">
          <input type="text" id="firstname" name="firstname" value="" size="40"  autocomplete="new-firstname"
                    class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true"
                    aria-invalid="false" placeholder="First Name" required></span>
            <i class="fa fa-exclamation-circle"></i>
            <i class="fa fa-check-circle"></i>
            <small></small>
          </div>
         </div>
       <div class="form-group">
           <span class="wpcf7-form-control-wrap your-name">
              <div class="input-wrapper">
                 <input type="text" id="lastname" name="lastname" value="" size="40"  autocomplete="new-lastname"
                    class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true"
                    aria-invalid="false" placeholder="Last Name" required></span>
             <i class="fa fa-exclamation-circle"></i>
             <i class="fa fa-check-circle"></i>
             <small></small>
            </div>
          </div>
          <div class="form-group">
             <span class="wpcf7-form-control-wrap your-e-mail">
                <div class="input-wrapper">
                  <input type="email" name="email" value="" id="email"  autocomplete="new-email"
                    size="40"
                    class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email"
                    aria-required="true" aria-invalid="false" placeholder="E-mail" required></span>
              <i class="fa fa-check-circle"></i>
              <i class="fa fa-exclamation-circle"></i>
              <small></small>
             </div>
            </div>
            <div class="form-group">
                <span class="wpcf7-form-control-wrap your-number">
                  <input id="tel" type="tel" name="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
                    class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true"
                    aria-invalid="false" placeholder="Telephone Number ex. 123-456-7890" required></input></span>
             </div>
      
             <div class="form-group">
                <button style="width: 70%; margin-bottom: 30px;" name="next"  type="submit" id="register" class="wpcf7-form-control wpcf7-submit">Next</button>
              </div>
</form>

My validation and ajax code:

<script>
  $(function() {
      $('#register').click(function(e){
        let valid = this.form.checkValidity();

        
        if(valid) {
          let firstname  = $('#firstname').val();
          let lastname   = $('#lastname').val();
          let email      = $('#email').val();
          let tel     = $('#tel').val();
          
          e.preventDefault();
          $.ajax({
            type: 'POST',
            url: 'process.php',
            data: {
              firstname: firstname,
              lastname: lastname,
              email: email,
              tel: tel 
            },
            success: function(data) {
              Swal.fire({
                'title': 'THANK YOU!',
                'text': 'You have successfully registered. Someone from Zitalk will be in touch with you shortly.',
                'icon': 'success'
              });
            },
            error: function(data) {
              Swal.fire({
                'title': 'Something Went Wrong!',
                'text': 'Something Went Wrong. Please contact us and we will help you resolve this.',
                'icon': 'error'
              });
            }
          });
          window.setTimeout(function() {
            window.location.href = 'thank-you-for-enrolling.php';
          }, 5000);
        } else {
          console.log("false");
        }
      });  
    });
</script>

And finally, my process.php file:

<?php require_once('config.php') ?>
<?php 
if(isset($_POST)){
    $stickySweet = $_POST['firstname'];
    $firstname  = $_POST['firstname'];
    $lastname   = $_POST['lastname'];
    $email      = $_POST['email'];
    $tel        = $_POST['tel'];
    $sql = "INSERT INTO users (`firstname`, `lastname`, `email`, `tel`) VALUES (?,?,?,?)";
    $stmtinsert = $db->prepare($sql);
    $result = $stmtinsert->execute([$firstname, $lastname, $email, $tel]);
    if($result) {
      echo 'You have successfully registered. Someone from Zitalk will be in touch with you shortly.';
    } elseif(! empty($stickySweet)) {
       return;
    } else {
      echo 'Something went wrong';
    }
  } else {
      echo 'No data';
  }

And just in case, my config minus any sensative data:

<?php 
    $db_user = "mydbuserdata";
    $db_pass = "mydbpassword";
    $db_name = "mydbname";

    $db = new PDO('mysql:host=server235.web-hosting.com;dbname=' . $db_name . ';charset=utf8', $db_user, $db_pass);
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

If anyone can spot anything I might be missing, I really appreciate it. Thank you in advance.

Answer: Checking my phpmyadmin, somehow the autoincrement field turned off. By re-checking this box, everything worked as expected.

1 Like
Sponsor our Newsletter | Privacy Policy | Terms of Service