Предполагая, что у меня есть следующий вид:
<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
Лучшее решение с минимальным javascript / jquery / html лучше всего, если нет html-решения.
Если вам нужно несколько значений в одном параметре, вы должны называть его как parameter[]
Fe:
<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>
Существует очень полезный метод для динамической группировки данных.
<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>
Более или менее здесь идея: первая форма, 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
ДОБАВИТЬ ВЕРСИЯ ОДНОЙ ФОРМЕ
Вы должны знать имя поля и игнорировать другие параметры в ответе
<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>
Меня действительно интересовали только флажки, которые были проверены на самом деле, поэтому я построил 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(); } }