javascript - HTML单选按钮在数据库中保存第一个单选按钮值

Question

我是 Javascript 和 ajax 的新手。我正在创建一个基本表单并将值保存在 Mysql 数据库中。点击提交按钮后，只有第一个单选按钮值被保存在数据库中。谁能帮我吗？
这是我的 HTML 代码:

<form>
    <div class="form-group">

        <div class="form-group">
            <label>Email:</label>
            <input type="email"  class="from-control" name="Name">
        </div>

        <label class="form-check-label">Gender</label>
        <div class="form-check-inline">
            <input type="radio" class="form-check-input" name="Sex" id="Sex" value="Male" />Male
            <input type=radio class="form-check-input" name="Sex" id="Sex" value="Female" /> Female
        </div>

        <div class="form-group">
            <button class="btn btn-primary" type="submit" id="btn_submit">Submit</button>
            <button class="btn btn-seconday" type="button" id="btn_cancel">Cancel</button>
        </div>
    </div>
</form>

还有我的 Javascript 代码:

<script type="text/javascript">
    $(document).ready(function () {
        $('#btn_save').on('click',function() {
            var Email = $('#Email').val();
            var Sex = $('#Sex').val();

            $.ajax({
                type : "POST",
                url : "https://localhost/newCrud/test/save",
                dataType : "JSON",
                data: {Email:Email, Sex:Sex},
                success : function (data) {
                    $('[name = "Email"]').val("");
                    $('[name = "Sex"]').val("");
                }
            });
            return true;
        });
    });
</script>

数据库结构

表单提交中保存的数据


请帮助我解决我的问题，我做了大量的研究，但找不到解决我的问题的方法。谢谢你的建议。

Answer 1

id HTML 的属性应该是唯一的。在这种情况下，您将始终获得相应 id 的第一个值。 .

更简单的方法来解决您的问题:

var Sex = $('input[name="Sex"]:checked').val();