使用jQuery提交表单失败：后端提示undefined index lname问题排查

问题根源 #

后端报错说明前端未正确传递表单数据到PHP，核心错误有以下几点：

• 选择器不匹配：HTML表单的id是contact_form（下划线），但jQuery里写成了#contact-form（横杠），导致无法选中表单；同时提交按钮没有subButton这个id，jQuery绑定的点击事件根本不会触发。
• 表单数据获取错误：$('#contact-form').submit()是触发表单默认提交行为，不是获取表单数据，这会导致AJAX请求没有携带任何表单参数。
• 事件绑定逻辑混乱：HTML按钮用了onclick="formSubmit(event);"，但jQuery里的函数是绑定#subButton的click，两者完全不对应，无法触发正确的AJAX请求。

修正后的代码 #

HTML部分（仅修改提交按钮）

<span id="answer"></span>
<form id='contact_form' method="post">
    <div class="modal-body">
        <div id='name_error' class='error'>Please enter your name.</div>
        <div>
            <input type='text' name='lname' id='name' class="form-control" placeholder="Your Name" required>
        </div>

        <div id='email_error' class='error'>Please enter your valid E-mail ID.</div>
        <div>
            <input type='email' name='email' id='email' class="form-control" placeholder="Your Email" required>
        </div>

        <div id='phone_error' class='error'>Please enter your phone number.</div>
        <div>
            <input type='text' name='phone' id='phone' class="form-control" placeholder="Your Phone" required>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <!-- 移除onclick，给按钮加对应id -->
        <button type="submit" id="subButton" class="btn btn-primary">I Agree</button>
    </div>
</form>

jQuery部分（修正选择器和数据获取）

$('#subButton').click(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    // 正确获取表单序列化数据
    var formData = $('#contact_form').serialize();
    $.ajax({
        type: "POST",
        url: "admin/backend/leads.php",
        data: formData,
        dataType: "json",
        success: function(data) {
            var html = '';
            if (data.errors) {
                html = '<div class="alert alert-danger">' + data.errors + '</div>';
            }
            if (data.success) {
                html = '<div class="alert alert-success">' + data.success + '</div>';
                $('#contact_form')[0].reset(); // 修正表单选择器
                localStorage.setItem('phone', true); // 移除键名里的#符号
            }
            $('#answer').html(html);
        },
        error: function(xhr) {
            // 错误回调参数为xhr对象，修正错误信息获取方式
            var errorMsg = xhr.responseJSON?.errors || '提交失败，请重试';
            var html = '<div class="alert alert-danger">' + errorMsg + '</div>';
            $('#answer').html(html);
        }
    });
});

额外优化说明 #

• 移除了localStorage键名中的#，键名不需要带选择器符号
• 错误回调中修正了错误信息的获取逻辑，适配AJAX错误回调的参数结构
• 统一了表单选择器的格式，避免再次出现匹配错误

内容的提问来源于stack exchange，提问作者Beast69