Мои php vairables не работают должным образом из-за jQuery

Question

Когда я нажимаю кнопку «Отправить», мое имя, фамилия и адрес электронной почты остаются пустыми, даже если они правильно заполнены, поэтому они возвращают шрифты красного цвета.

Вот код PHP:

<?php
if (isset($_POST['submit'])) {

    include_once 'dbh.inc.php';

    $first = mysqli_real_escape_string($conn, $_POST['first']);
    $last = mysqli_real_escape_string($conn, $_POST['last']);
    $email = mysqli_real_escape_string($conn, $_POST['email']);
    $college = mysqli_real_escape_string($conn, $_POST['college']);
    $pwd = mysqli_real_escape_string($conn, $_POST['password']);

    // Error handlers
    $errorfirst=false;
    $erroremail=false;
    $errorlast=false;
    $errorpwd=false;
    // Check for empty fields
    if (empty($first) || empty($email) || empty($pwd)) {
        echo "
              <span class='form-error'>*Please check one of the fields before submitting<br></span>
              <span class='form-error'>*Please check first name <br></span>
              <span class='form-error'>*Please check  last name <br></span>
              <span class='form-error'>*Please check email <br></span>
        ";
        $errorfirst=true;
        $erroremail=true;
    } else {
            // Check if input characters are valid
            if (!preg_match("/^[a-zA-Z]*$/", $first) || !preg_match("/^[a-zA-Z]*$/", $last)) {
                echo "<span class='form-error'>*write properly</span>";
                $errorfirst=true;
                $errorlast=true;
            } else {
                //Check if email is valid
                if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
                    echo "<span class='form-error'>*write a proper email</span>";
                } else {
                    $sql = "SELECT * FROM name WHERE user_email='$email'";
                    $result = mysqli_query($conn, $sql);
                    $resultCheck = mysqli_num_rows($result);

                    if ($resultCheck > 0) {
                        echo "<span class='form-error'>This E-mail ID is already existed</span>";
                    } else {
                        //Hashing the password
                        $hashedPwd = password_hash($pwd, PASSWORD_DEFAULT);
                        // Insert the user into the database
                        $sql = "INSERT INTO name (id,user_first, user_last, user_email, user_uid, user_pwd) VALUES (NULL,'$first', '$last', '$email', '$uid', '$hashedPwd');";
                        mysqli_query($conn, $sql);

                    }
                }
            }
    }

} else {
    header("Location: ../signupform.php");
    exit();
}
?>


<script type="text/javascript">
    $('.first-input,.last-input,.email-input').removeClass('input-error');
    var errorfirst="<?php echo '$errorfirst';  ?>";
    var errorlast="<?php echo '$errorlast';  ?>";
    var erroremail="<?php echo '$erroremail';  ?>";

     if (errorfirst==true) {
        $('.first-input').addClass('input-error');
     }
     if (errorlast==true) {
        $('.last-input').addClass('input-error');
     }
     if (erroremail==true) {
        $('.email-input').addClass('input-error');
     }
     if (erroremail==false && errorfirst==false  && errorlast==false) {
        $('.first-input,last-input,.email-input').val('');
     }
</script>

Не отправляет никакое значение в базу данных.Я использовал jQuery для проверки формы без обновления, но я думаю, что из-за jQuery моя форма не работает

Вот мой код jQuery

<script>
        $(document).ready(function () {
            $('.signup-Form').submit(function(event){
                event.preventDefault();
                var first=$(".first-input").val();
                var last=$(".last-input").val();
                var email=$(".email-input").val();
                var college=$(".college-input").val();
                var password=$(".password-input").val();
                var submit=$(".signup-btn").val();
                $(".form-message").load("includes/signup.inc.php", {
                    first:first,
                    last:last,
                    email:email,
                    college:college,
                    password:password,
                    submit:submit
                })
            });
        });
    </script>

А вот моя форма HTML

<form class="signup-Form" action="includes/signup.inc.php" method="post">

      <div class="first-input">
        <input type="text" name="first"  placeholder="First Name">
      </div>

      <div class="last-input">
        <input type="text" name="last" value="" placeholder="Last Name">
      </div>

      <div class="email-input">
        <input type="text" name="email" value="" placeholder="E-mail">
      </div>

      <div class="college-input">
        <input type="text" name="college" value="" placeholder="College Name">
      </div>

      <div class="password-input">
        <input type="password" name="password" value="" placeholder="Password">
      </div>
      <p class="form-message"></p>

      <div class="signup-btn">
        <button type="submit" name="button">sign-up</button>
      </div>

    </form>

Помогите мне в этом вопросе, и я также не знаю о безопасности в формах PHP, так что вы можете также предложить мне несколько советов по этому поводу, я буду очень признателен, потому что я хочу быть профессиональным внутренним разработчиком и сейчасЯ новичок

Answer 1

Вам нужно захватить ввод, а не контейнер

<form class="signup-Form" action="includes/signup.inc.php" method="post">

  <div class="first-input">
    <input id="first-input" type="text" name="first"  placeholder="First Name">
  </div>

  <div class="last-input">
    <input id="last-input" type="text" name="last" value="" placeholder="Last Name">
  </div>

  <div class="email-input">
    <input id="email-input" type="text" name="email" value="" placeholder="E-mail">
  </div>

  <div class="college-input">
    <input id="college-input" type="text" name="college" value="" placeholder="College Name">
  </div>

  <div class="password-input">
    <input id="password-input" type="password" name="password" value="" placeholder="Password">
  </div>
  <p class="form-message"></p>

  <div class="signup-btn">
    <button id="signup-btn" type="submit" name="button">sign-up</button>
  </div>

</form>

<script>
    $(document).ready(function () {
        $('.signup-Form').submit(function(event){
            event.preventDefault();
            var first=$("#first-input").val();
            var last=$("#last-input").val();
            var email=$("#email-input").val();
            var college=$("#college-input").val();
            var password=$("#password-input").val();
            var submit=$("#signup-btn").val();
            $(".form-message").load("includes/signup.inc.php", {
                first:first,
                last:last,
                email:email,
                college:college,
                password:password,
                submit:submit
            })
        });
    });
</script>

Answer 2

Ваш jQuery использует $(".first-input").val(), но у вас есть class="first-input" на DIV, а не на входе.

Либо переместите атрибут класса на входы, либо измените селектор на $(".first-input input").val() (и аналогичнодля всех остальных входов).