如何将多个值附加到 html 表单中的单个参数？答案

【问题标题】：How to append multiple values to a single parameter in html form?如何将多个值附加到 html 表单中的单个参数？
【发布时间】：2012-11-29 14:20:15
【问题描述】：

假设我有以下表格：

<form action="process.php">
<input type="checkbox" name="option1" value="oats"> Oats
<input type="checkbox" name="option2" value="beans"> Beans
<input type="hidden" name="parameter" value="a"/>
<input type="submit" value="Submit"/>
</form>

通常情况下，点击 URL 后，浏览器会重定向到：

process.php?option1=oats&option2=beans&parameter=a

如何使当点击提交时所有复选框最终成为“参数”的一部分，但用逗号分隔？所以换句话说就是：

process.php?parameter=a,oats,beans

如果没有 html 解决方案，最好使用最少的 javascript/jquery/html 解决方案。

【问题讨论】：

可能重复stackoverflow.com/questions/2433727/…
是 process.php 期待 AJAX 调用吗？
process.php 期待什么并不重要，重要的是操作的结果“GET” url。
对字段名使用数组语法

标签： php jquery html

【解决方案1】：

如果您想在一个参数中包含多个值，则必须将其命名为parameter[]

f.e.：

<form action="process.php">
<input type="checkbox" name="parameter[]" value="oats"> Oats
<input type="checkbox" name="parameter[]" value="beans"> Beans
<input type="hidden" name="parameter[]" value="a"/>
<input type="submit" value="Submit"/>
</form>

【讨论】：

请注意，参数名称中丑陋的 [] 是 PHP 特定的功能/怪癖，以便能够从中获取数组。在 HTTP（以及几乎所有其他服务器端语言，如 JSP/ASP/等）中，[]s 是不必要的，因此您可以将多个输入元素与 name="parameter" 一起使用。
是的，我知道@BalusC，但他正在使用 php：<form action="process.php"> 这就是我放 [] 的原因

【解决方案2】：

有一种非常有用的方法可用于动态数据分组。

<form action="file.php" method="post">

<?php for ( $i = 0; $i < count( $something ); $++ ) { ?>
    <input type="checkbox" name="<?php $something[$i]; ?>[]" value="user_id"> Oats
    <input type="checkbox" name="<?php $something[$i]; ?>[]" value="user_name"> Beans
<?php } ?>
<input type="submit" value="Submit"/>
</form>

【讨论】：

【解决方案3】：

这里或多或少的想法是：第一种形式，1 个隐藏的输入将捕获第二种和无效形式的所有值

<script type="text/javascript">
function myfunc(){
    $('#void input').each(function(id,elem){
         b = $("#res").val();
         if(b.length > 0){
            $("#res").val( b + ',' + $(this).val() );
        } else {
            $("#res").val( $(this).val() );
        }

    });
        alert("VAL "+$("#res").val());
    $("#real").submit();

return false;
}

</script>

<form id="real" action="process.php">
<input id="res" type="hidden" name="parameter" value=""/>
</form>

<form id="void">
<input type="checkbox" name="option1" value="oats"> Oats
<input type="checkbox" name="option2" value="beans"> Beans
<input type="hidden" name="parameter" value="a"/>
<input type="submit" value="Submit" onClick="javascript:myfunc()"/>
</form>

添加一些修复，提交正确的表单。在 jsfiddle 上测试：

JsFiddel "working" example

添加单一表单版本

您必须知道字段的名称，并忽略答案中的其他参数

<script type="text/javascript">
function myfunc(){
    // can use more selector
    $('#real input').each(function(id,elem){
        // append the data to this field so no need to process it
        if(this.id == 'res'){
            return;                
        }
        // here I concat the values 
        b = $("#res").val();
        if(b.length > 0){
            $("#res").val( b + ',' + $(this).val() );
        } else {
            $("#res").val( $(this).val() );
        }

    });
    alert("VAL "+$("#res").val());  // remove me
    $("#real").submit();

    return false;
}

</script>

<form id='real' method='POST' action="#">
<input type="checkbox" name="option1" value="oats"> Oats
<input type="checkbox" name="option2" value="beans"> Beans
<input id="res" type="hidden" name="parameter" value="a"/>
<input type="submit" value="Submit" onClick="javascript:myfunc()"/>
</form>

【讨论】：

【解决方案4】：

我真的只对实际选中的复选框感兴趣 - 所以我从其他示例中构建了myfunc()，如下所示：

function myfunc(){
    $('#void input[type="checkbox"]').each(function(id,elem){
        if ( ! $(this).is(':checked') ) return;
        b = $("#res").val();
        if(b.length > 0){
            $("#res").val( b + ',' + $(this).val() );
        } else {
            $("#res").val( $(this).val() );
        }
    });
    var stuff = $("#res").val();
    if ( stuff.length < 1 ) {
        alert('Please select at least one');
    } else {
        $("#real").submit();
    }
}

【讨论】：