動態表單未提交

Question

我正在為容量有限的活動制作動態注冊表格，但是在某些情況下我無法提交表格。 請允許我解釋一下......

表單字段之一要求用戶選擇他們想要保留的座位數。 該字段補充有一個計數器，該計數器列出了剩余的可用座位數。 計數器通過將MySQL數據庫中的相關列相加來計算所占的席位總數，然后從可用的席位總數中減去該數量。 看起來是這樣的...

<div id="seat_field">
    <select name="seats" id="seats" class="field" required>
        <option value="" disabled selected>select</option>
        <option value="0">None</option>
        <option value="1">1</option>
        <option value="2">2</option>                    
    </select>                      
</div>

<?php
    $servername = "localhost";
    $username = "***";
    $password = "***";
    $dbname = "***";

    $conn = new mysqli($servername, $username, $password, $dbname);

    $query = mysqli_query($conn, "SELECT SUM(seats) AS total_seats FROM event");

    $row = mysqli_fetch_assoc($query);

    $total_seats = $row['total_seats'];
    $available_seats = 44-$total_seats;

    echo "<div><div id='available_seats' class='seats'>$available_seats</div><div id='seats_remaining' class='seats'>&nbspseats remaining</div></div>";             
?>

當所有座位都坐好時（$ available_seats == 0），我將select元素替換為一個復選框，該復選框允許用戶指示是否應將他們的宴會添加到候補列表中。 這是腳本，它位於正文的底部...

$(document).ready(function() {
    var available_seats = document.getElementById("available_seats").innerHTML;

    if (available_seats == 0){
        $("#seats").hide();
        $("#seats").prop('required', false);
        $("#seat_field").prepend("<strong>Check to add your party to the bus waiting list</strong>&nbsp&nbsp<input type='checkbox' name='waitlist' /> ");
    };
});

select元素已成功隱藏，並且該復選框處於前面。 但是，該表單未提交...沒有控制台錯誤，沒有任何反應。 誰能提供任何建議？ 非常感謝。

編輯 -添加完整的表格...

<form action="volunteer.php" method="post" name="volunteer_form" id="plumb_form">
    <input type="text" name="first_name" value="" class="field" id="first_name" required>
    <input type="text" name="last_name" value="" class="field" id="last_name" required>
    <input type="text" name="email" value="" class="field" id="email" required>

    <div id="seat_field">
    <select name="seats" id="seats" class="field" required>
        <option value="" disabled selected>select</option>
        <option value="0">None</option>
        <option value="1">1</option>
        <option value="2">2</option>                    
    </select>                      
</div>

<?php
    $servername = "localhost";
    $username = "***";
    $password = "***";
    $dbname = "***";

    $conn = new mysqli($servername, $username, $password, $dbname);

    $query = mysqli_query($conn, "SELECT SUM(seats) AS total_seats FROM event");

    $row = mysqli_fetch_assoc($query);

    $total_seats = $row['total_seats'];
    $available_seats = 44-$total_seats;

    echo "<div><div id='available_seats' class='seats'>$available_seats</div><div id='seats_remaining' class='seats'>&nbspseats remaining</div></div>";             
?>

    <input type="submit" name="submit" value="Submit" id="submit"></p>

</form>

<script>

$(document).ready(function() {
    var available_seats = document.getElementById("available_seats").innerHTML;

    //THIS IS THE PART THAT'S CAUSING ME TROUBLE...
    if (available_seats == 0){
        $("#seat").hide();
        $("#seats").prop('required', false);
        $("#seat_field").prepend("<strong>Check to add your party to the bus waiting list</strong>&nbsp&nbsp<input type='checkbox' name='waitlist' value='1' /> ");
    };



    $("#plumb_form").submit(function() {

        var first_name = document.forms["plumb_form"]["first_name"].value;
        var last_name = document.forms["plumb_form"]["last_name"].value;
        var email = document.forms["plumb_form"]["email"].value;
        var seats = document.forms["plumb_form"]["seats"].value;


        if(first_name == "" || last_name == "" || email == "" || phone == "" || number == "" || seats == ""){
            return false;
        }


        else if (seats > available_seats) {
            alert("There are not enough seats remaining for your party. Please reduce the number of seats needed or email Darren at dklein@nycaudubon.org to place your party on a waiting list.");
            return false;
         }

        else{
            $("#submit").hide();
            //YOU CAN IGNORE THIS LAST LINE, JUST A LITTLE ANIMATION THING, NOT RELEVANT HERE
            $("#thing").append('<div id="submitting" class="buttonText animated flash">Submitting...</br><div class="againStop" id="stop">Please wait</div></div>');
        };
    });
});

</script>

Answer 1

您的jQuery正在檢查“電話”和“號碼”值，如果未找到則返回false。 這些字段不在您的表單中。 從jQuery中刪除該驗證，或將其作為輸入字段添加到表單中。

Answer 2

感謝所有查看此郵件的人-我發現了罪魁禍首是在我的表單驗證中，盡管並不是Konrad提到的那樣（盡管如此，非常感謝Konrad促使我特別關注驗證並因此引起我注意我的身份）實際錯誤）-

if(first_name == "" || last_name == "" || email == "" || seats == ""){
    return false;
}

在所有座位都被占用的情況下，我忘記了從驗證中刪除“座位”，因此表格返回了false。

如果我自己這么說，這是一個非常愚蠢的錯誤……我很掛念這個想法，即使用條件腳本交換基於我完全忽略的PHP / MySQL結果的元素會帶來一些問題現在非常明顯的非常簡單的解決方案。