Question

无论选择什么选项，此代码始终会将第二个选项提交给PHP。

这是我的表格：

<div class="modal">
    <div class="modalContent">
        <div class="modalHeader">
        <p>Add an income / expense</p>
        <span class="closeBtn" onclick="closeit()">&times;</span>
        </div>
        <form class="insertData" action="insert.php" method="post" id="form">
            <label for="name">Name</label>
            <input type="text" name="name" required>
            <label for="category">Category</label>
            <select name="category" required>
            <option value="food">Food</option>
            <option value="bills">Bills</option>
            <option value="rent">Rent</option>
            </select>
            <label for="amount">Amount</label>
            <div class="radios">
            <input type="radio" name="ie" value="income"><p>Income</p>
            <input type="radio" name="ie" value="expense"><p>Expense</p>
            </div>
            <input type="number" name="amount" required>
            <label for="description">Description (optional)</label>
            <textarea type="text" name="description"></textarea>
            <input id="start" type="text" name="start" value="" required style="display:none;">
            <input id="end" type="text" name="end" value="" required style="display:none;">
            <input class='submitBtn' type="submit" name="" value="Submit">
        </form>
    </div>
</div>

这是PHP（现在只是出于调试目的而回显）：

if (isset($_POST['name'])) {
echo htmlspecialchars($_POST['ie']);
}

数据通过AJAX进入此处（使用FullCalendar）

select: function (start, end) {
                document.getElementsByClassName('modal')[0].style.display = 'block';
                document.getElementById('start').value = $.fullCalendar.formatDate(start,
                    "Y-MM-DD HH:mm:ss");
                document.getElementById('end').value = $.fullCalendar.formatDate(end,
                    "Y-MM-DD HH:mm:ss");
                $('form.insertData').on('submit', function () {
                    var that = $(this),
                        url = that.attr('action'),
                        type = that.attr('method'),
                        data = {};

                    that.find('[name]').each(function (index, value) {
                        var that = $(this),
                            name = that.attr('name'),
                            value = that.val();

                        data[name] = value;
                    });
                    $.ajax({
                        url: url,
                        type: type,
                        data: data,
                        success: function (response) {
                            calendar.fullCalendar('refetchEvents');
                            location.reload();
                            document.getElementsByClassName('modal')[0].style
                                .display = 'none';
                        }
                    });
                    return false;
                });
            },

无论选择什么选项，它都将始终提交“费用”。如果我在表格上交换它们，那么它将始终提交“收入”，因此似乎总是在提交最后一个选项。

Answer 1

发生此错误是因为您循环所有元素具有名称属性，并获取值。包括单选按钮。如果要选择单选按钮，则必须添加if，以检查单选按钮是否已选中。您可以使用以下代码，此代码更简单，然后必须选中单选按钮：

$('form.insertData').on('submit', function () {
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
    $.ajax({
        url: url,
        type: type,
        data: $('form.insertData').serialize(),
        success: function (response) {
            calendar.fullCalendar('refetchEvents');
            location.reload();
            document.getElementsByClassName('modal')[0].style
                .display = 'none';
        }
    });
    return false;
});

HTML单选按钮始终向PHP提交最后一个选项

1 个答案: