实施例

Question

有没有办法通过表单帖子将值作为一个参数发布？

我有一个包含多个复选框组的表单，用户可以在其中选择多个选项。

<form id="form" action="url" method="post">
<input type="checkbox" name="option" id="first" value="1">
<input type="checkbox" name="option" id="first" value="2">
<input type="checkbox" name="option" id="first" value="3">
<input type="checkbox" name="option" id="first" value="4">

<input type="checkbox" name="option2" id="second" value="1">
<input type="checkbox" name="option2" id="second" value="2">
<input type="checkbox" name="option2" id="second" value="3">
<input type="checkbox" name="option2" id="second" value="4">

<input type="submit" name="submit" id="button">

我还编写了一些Jquery，它们连接每个名称的值，逗号将它们分开，以便输出看起来像这样，我通过控制台看到它：

$("form").submit(function(){
        var arr=[];
        $('input:checked[name="option"]').each(function(){
        arr.push($(this).val());
            });

            $('#first').val(arr.join(','));
            console.log('#first').val();
        });

Console.log输出：

option: 1,2,3,4

但是，当我提交表单时，值会像这样（解析版本）分开传递，并且不使用我编写的Jquery代码。

option: 1
option: 2
option: 3
option: 4

实际查询字符串如下所示：

option=1&option=2&option=3&option=4

我想要完成的是参数被聚合或分组，以便最终输出看起来像这样

option=1,2,3,4&option2=1,2,3,4...

我不确定为什么它不使用Jquery编写的值

Answer 1

这不是实现此目的的最佳方式，最好通过AJAX进行POST调用并将选项作为参数发送。

向表单添加隐藏的输入。

<input type="hidden" id="checkedValues" value="">

将你的js更改为：

$("form").submit(function(){
     var arr=[];
     $('input:checked[name="option"]').each(function(){
        arr.push($(this).val());
     });

     $('#checkedValues').val(arr.join(','));
     console.log($('#checkedValues').val());
});

Answer 2

这有点难看，但如果你想组合选中框的值而不是在处理表单action的页面上的请求数据中看到它们，我会创建两个新的{{ 1}}字段。然后，当您使用jQuery处理表单的提交时，您可以将其他字段的值组合为关联的隐藏字段的值。最后，在表单提交完成之前删除您不希望在处理页面上看到的字段：

<input type="hidden"

实施例

表单提交仅适用于整页视图：https://codepen.io/VAggrippino/full/XNBQEo/
在编辑器视图中查看代码：https://codepen.io/VAggrippino/pen/XNBQEo/

注意

您不能拥有与原始示例代码中相同$(function() { $("#form").submit(function() { var optionCount = 0; var optionValue = ""; $("input[name=option]:checked").each(function() { if (optionCount > 0) optionValue += ","; optionValue += $(this).val(); optionCount++; }); $("#option").val(optionValue); var optionCount = 0; var optionValue = ""; $("input[name=option2]:checked").each(function() { if (optionCount > 0) optionValue += ","; optionValue += $(this).val(); optionCount++; }); $("#option2").val(optionValue); $("input:checkbox").remove(); }); $("#received").html(decodeURIComponent(window.location.search)); });的多个字段。

Answer 3

您可以制作ajax POST并向其提交您的数据类型。请参阅以下代码段：

$("form").submit(function(e) {
  e.preventDefault();
  var arr = [];
  $('input:checked[name="option"]').each(function() {
    arr.push($(this).val());
  });
  var myData = arr.join(',');
  $.ajax({
    'url': 'url',
    'type': 'POST',
    'data': {
      options: myData
    },
  });
  return false;
});

请参阅此fiddle

如何将复选框值聚合为一个值以发布表单Jquery

3 个答案:

实施例

注意