在隱藏字段數組中添加和刪除值，而無需提交表單

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

您也許可以減少重復，但我又累又餓。 希望這可以幫助你！