如何将多个值附加到 html 表单中的单个参数?
Posted
技术标签:
【中文标题】如何将多个值附加到 html 表单中的单个参数?【英文标题】:How to append multiple values to a single parameter in html form? 【发布时间】: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¶meter=a
如何使当点击提交时所有复选框最终成为“参数”的一部分,但用逗号分隔?所以换句话说就是:
process.php?parameter=a,oats,beans
如果没有 html 解决方案,最好使用最少的 javascript/jquery/html 解决方案。
【问题讨论】:
可能重复***.com/questions/2433727/… 是 process.php 期待 AJAX 调用吗? process.php 期待什么并不重要,重要的是操作的结果“GET” url。 对字段名使用数组语法 【参考方案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();
【讨论】:
以上是关于如何将多个值附加到 html 表单中的单个参数?的主要内容,如果未能解决你的问题,请参考以下文章