添加和删除隐藏字段数组中的值，而不提交表单

Add and Remove values in a hidden field array, without submitting form

本文关键字：表单 提交 删除 隐藏 字段 数组 添加      更新时间：2023-09-26

我试图在不提交表单的情况下操作隐藏字段的值。我发现最接近的是在隐藏字段数组中添加和删除值

我的问题是它提交了表格。在我的项目中，我还没有准备好提交表格。还有更多的问题要问。这是我的问题的一个JSFiddle。

我觉得我错过了一个类似"return false"的东西。

谢谢你的帮助。

jQuery.fn.extend({
addToArray: function(value) {
    return this.filter(":input").val(function(i, v) {
       var arr = v.split(',');
       arr.push(value);
       return arr.join(',');
    }).end();
},
removeFromArray: function(value) {
    return this.filter(":input").val(function(i, v) {
       return $.grep(v.split(','), function(val) {  
                return val != value;
              }).join(',');
    }).end();
}
});

解决方案是预防默认事件。

解决方案如下：

            event.preventDefault();

http://jsfiddle.net/4kbq0veq/

您可以在onClick代码中添加return false;：

<button onclick='$("#myField").addToArray("21"); return false;'>

防止提交。

我想你应该单独问一个问题，但我还是要深入探讨这个问题。我在jFiddle中修改了HTML。由于您使用的是jQuery，所以我利用了单击事件处理程序。最初，我创建了一个单独的处理程序来查看需要什么代码。最初看起来是这样的：

$( "#strength" ).click(function() {
  event.preventDefault();
  if ($( '#goals' ).val().indexOf(',strength') >= 0) {
    $( '#goals' ).val($( '#goals' ).val().replace(',strength', ''));
    $( this ).removeClass('button');
    $( this ).addClass('buttonSelected');
  } else {
    $( '#goals' ).val($( '#goals' ).val() + ',strength');
    $( this ).removeClass('buttonSelected');
    $( this ).addClass('button');
  }
});

这是计算所需代码的一个不错的起点。但是，我不想为每个按钮重复该代码。所以我考虑了我知道可以重复用于其他按钮的代码。所以看起来是这样的：

$( "#strength" ).click(function() {
  event.preventDefault();
  toggle(',strength', this);
});
function toggle(str, thisObj) {
  if ($( '#goals' ).val().indexOf(str) >= 0) {
    console.log(str + ' is already selected');
    $( '#goals' ).val($( '#goals' ).val().replace(str, ''));
    $( thisObj ).removeClass('buttonSelected');
    $( thisObj ).addClass('button');
  } else {
    console.log(str + ' is about to be selected');
    $( '#goals' ).val($( '#goals' ).val() + str);
    $( thisObj ).removeClass('button');
    $( thisObj ).addClass('buttonSelected');
  }
}

然后，用一些重复的代码来处理额外的按钮是非常简单的：

$( "#weight" ).click(function() {
    event.preventDefault();
  toggle(',weight', this);
});
$( "#tone" ).click(function() {
    event.preventDefault();
  toggle(',tone', this);
});

你也许可以减少重复，但我又累又饿。希望这能帮到你！

相关文章：