Question

我试图操纵隐藏字段的值，而不提交表单。我找到的最接近的是Add and Remove values in a hidden field array

我遇到的问题是它提交了表单。在我的项目中，我还没有准备好提交表格。还有更多问题要问。 Here's a JSFiddle of my problem

我觉得我错过了像“返回假”这样的东西。

感谢您的帮助。

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

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

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

阻止提交。

我认为你应该问一个单独的问题，但无论如何我都要深入研究这个问题。我修改了HTML in the jFiddle。由于您正在使用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);
});

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

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

2 个答案: