Переключатель HTML всегда передает последний вариант в PHP

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;
});