在隐藏字段数组中添加和删除值，而无需提交表单

Question

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

我对此的问题是它提交了表单。 在我的项目中，我尚未准备好提交表单。 还有更多问题要问。 这是我的问题的中庸之道 。

我觉得我缺少诸如“返回假”之类的东西。

谢谢您的帮助。

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();
}
});

Answer 1

解决方案是防止发生默认事件。

解决方法如下：

            event.preventDefault();

http://jsfiddle.net/4kbq0veq/

Answer 2

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

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

为了防止提交。

我认为您应该问一个单独的问题，但是无论如何我都在深入探讨。 我在jFiddle中修改了HTML。 由于您使用的是jQuery，因此我利用了click事件处理程序。 最初，我创建了一个处理程序来查看所需的代码。 最初看起来像这样：

$( "#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);
});

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