页面上有多个表单提交特定表单的数据

Question

我有一个页面，上面有多个表单，当您提交其中一个表单（通过 Ajax）时它可以工作，但是当我提交除第一个表单之外的任何其他表单时，它会发布第一个表单的数据，而不是第二个表单形式。我认为这与 .each() 函数有关，或者与找到该表单的点击有关，但不确定如何，我被困住了。到目前为止，这是我的代码，任何帮助将不胜感激。短暂性脑缺血发作。

$(".mixForm").submit(function (event) {

event.preventDefault();
          
var headline =  $(".expHeadline").val();
var content = $(".expContent").val();
var vid = $(".IDv").val();
alert(headline);
 
// This does the ajax request
$.ajax({
    url: ajaxurl,
    method: 'post',
    data: {
        'action': 'enyc_add_exp_row',
        'head' : headline,
        'cont' : content,
        'vid' : vid,
        
    },
    success:function(data) {
        // This outputs the result of the ajax request
        alert('hi');
        console.log(data);
         $(".response").html(data);
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
});  
  

});

Answer 1

我想

.expHeadline

、

.expContent

和

.IDv

是每个表单中的元素？

如果是这样，则它们没有特定的上下文，因此 jQuery 使用他在 dom 上找到的第一个元素，而不是在提交的表单上。

在您的函数中使用

this

更好地定位此元素。

this

指的是

submit

事件

所针对的元素

var headline =  $(this).find(".expHeadline").val();
var content = $(this).find(".expContent").val();
var vid = $(this).find(".IDv").val();