使用jquery和ajax删除空表单输入后，防止它向数据库提交空值

Question

你好，我已经在这个网站上读了一整天所有可能的问题和答案，我知道我几乎得到了正确的答案，但是这里的一些建议似乎对我不起作用。我有一个动态表单，用户可以添加和删除文本字段，并通过ajax和php提交请求。表单由两个必需的文本字段和按钮组成，以添加和删除另一个字段(除了两个必需字段)。即使不使用其他字段，用户也可以提交表单。

我的问题是，如果我按下add按钮，然后决定删除它，那么即使在按下remove按钮之后，我也会在相应的表中得到一个'0‘值。

以下是我的HTML：

   <form method="POST">
    <span class="text-label">Subject:</span>
    <input type="text" name="subject" id="subject-field" placeholder="Subject name here" maxlength="10" class="record-input-forms" /> <span class="text-label">Section:</span>
    <input type="text" name="section" id="section-field" placeholder="Subject section here" maxlength="3" class="record-input-forms" /> <a href="#" class="add-field" title="Add student field">+</a> <a class="remove-field" href="#" title="Remove student field">&#215;</a> <a href="#" id="save-button" title="Save">&#8594;</a>
    <div id="student-box-wrap"></div> <span id="status-message"></span> </form>

这是我的AJAX

 $(document).ready(function() {
    $("#save-button").click(function() {
        var subject = $("input#subject-field").val();
        if (subject == "") {
            $('#status-message').css({
                "color": "#ec3f8c"
            });
            $('#status-message').html('Please fill the subject fields');
            return false;
        }
        var section = $("input#section-field").val();
        if (section == "") {
            $('#status-message').css({
                "color": "#ec3f8c"
            });
            $('#status-message').html('Please fill the section fields');
            return false;
        }
        var studid = [];
        $('input[name="studid[]"]').map(function() {
            studid.push($(this).val());
        });
        var dataString = 'subject=' + subject + '&section=' + section + '&studid=' + studid;
        $.ajax({
            type: "POST",
            url: 'save.php',
            data: dataString,
            dataType: "html",
            success: function(data) {
                $("input#subject-field").val('');
                $("input#section-field").val('');
                $("input#field-wrap").remove();
                $("#status-message").css({
                    "color": "#39b1c6"
                });
                $("#status-message").html('Save successfully');
                $("#status-message").fadeOut(2000);
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(thrownError);
            }
        });
        return false;
    });
});

我的Jquery计数器

    $(document).ready(function() {
    var counter = 0;
    $(".add-field").click(function() {
        counter += 1;
        $("#student-box-wrap").append('<div class="field-wrap-' + counter + '"><span id="number-' + counter + '">' + counter + '.</span> Student ID: <input type="text" name="studid[]" class="record-input-forms" /></div>');
    });

    $(".remove-field").click(function() {
        if (counter == 0) {
            alert("Nothing to remove!");
        } else {
            $(".field-wrap-" + counter + "").remove();
            counter--;
        }
    });
});

和我的PHP

    <?php
require 'connection.php';
session_start();
$studid  = (explode(",", $_POST['studid']));
$subject = mysql_real_escape_string(strtoupper($_POST['subject']));
$section = mysql_real_escape_string(strtoupper($_POST['section']));
$adminid = $_SESSION['AdminID'];
mysqli_query($con, "INSERT INTO tbl_subjects(SubjectName, SubjectSection, AdminID) VALUES ('$subject', '$section', '$adminid')");
if (!empty($studid) && !empty($name)) {
    foreach ($studid as $new) {
        $sql_1 = "INSERT INTO tbl_student(StudentID, SubjectID) VALUES ('$new', LAST_INSERT_ID())";
        mysqli_query($con, $sql_1);
    }
}
if (!mysqli_query($con, $sql)) {
    die('Error: ' . mysqli_error($con));
}
?>

我用了！空在我的php和im中得到了同样的结果。如果我根本不按“添加”按钮，我就没有任何问题。在按下它时，甚至在移除它之后，ajax中的变量似乎将一个空数据传送到数据库。

Answer 1

我认为您的问题是，在PHP中，在检查是否设置了值之前，先调用$studid = (explode(",", $_POST['studid']));。

explode()

如果分隔符是一个空字符串("")，FALSE ()将返回FALSE。如果分隔符包含的值不包含在字符串中，并且使用了负限制，则将返回一个空数组，否则将返回，否则包含字符串的数组将返回。

实际上，您正在对空字符串调用explode()并返回空字符串。

在PHP中，在检查是否设置了if语句之后，尝试将explode()移动到if语句中：

<?php
require 'connection.php';
session_start();
$subject = mysql_real_escape_string(strtoupper($_POST['subject']));
$section = mysql_real_escape_string(strtoupper($_POST['section']));
$adminid = $_SESSION['AdminID'];
mysqli_query($con, "INSERT INTO tbl_subjects(SubjectName, SubjectSection, AdminID) VALUES ('$subject', '$section', '$adminid')");
if ( isset( $_POST['studid'] )) {  
    $studid  = (explode(",", $_POST['studid']));
    foreach ($studid as $new) {
        $sql_1 = "INSERT INTO tbl_student(StudentID, SubjectID) VALUES ('$new', LAST_INSERT_ID())";
        mysqli_query($con, $sql_1);
    }
}
if (!mysqli_query($con, $sql)) {
    die('Error: ' . mysqli_error($con));
}
?>

另外，在jquery中，请更改：

var dataString = 'subject=' + subject + '&section=' + section + '&section=' + section;

至：

// only add  `studid` if there is one or more present
var studidStr = studid != '' ? '&studid=' + studid : '';
var dataString = 'subject=' + subject + '&section=' + section + studidStr;