页面多表单提交异常：提交非首表单却传递首表单数据

核心问题 #

你代码里的$(".expHeadline").val()这类选择器，会直接抓取页面中第一个匹配该类名的元素值——不管是哪个表单触发的提交事件，拿到的都是第一个表单里的输入内容，这就是非首个表单提交数据错误的根源。

修复方案 #

在表单的submit事件里，先通过$(this)获取当前触发提交的表单对象，再在这个表单范围内查找对应的输入元素，就能拿到当前提交表单的正确数据了。

修改后的完整代码：

$(".mixForm").submit(function (event) {
    event.preventDefault();
    
    // 获取当前提交的表单实例
    var $currentForm = $(this);
    // 仅在当前表单内查找目标输入框
    var headline = $currentForm.find(".expHeadline").val();
    var content = $currentForm.find(".expContent").val();
    var vid = $currentForm.find(".IDv").val();
    
    alert(headline);
 
    // Ajax请求逻辑保持不变
    $.ajax({
        url: ajaxurl,
        method: 'post',
        data: {
            'action': 'enyc_add_exp_row',
            'head' : headline,
            'cont' : content,
            'vid' : vid,
        },
        success:function(data) {
            alert('hi');
            console.log(data);
            $(".response").html(data);
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });  
});

额外优化建议 #

如果每个表单里的输入元素都有唯一的name属性，可以用serialize()方法一键序列化表单数据，省去逐个取值的麻烦：

$(".mixForm").submit(function (event) {
    event.preventDefault();
    
    // 序列化当前表单的所有数据
    var formData = $(this).serialize();
    // 手动添加action参数（也可以在表单里加隐藏input传递该值）
    formData += '&action=enyc_add_exp_row';
    
    $.ajax({
        url: ajaxurl,
        method: 'post',
        data: formData,
        success:function(data) {
            alert('hi');
            console.log(data);
            $(".response").html(data);
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });  
});

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