Làm cách nào để nối nhiều giá trị vào một tham số duy nhất dưới dạng html?

Question

Giả sử tôi có các hình thức sau đây:

<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> 

gì thường xảy ra là sau khi nhấp vào URL, trình duyệt chuyển hướng đến:

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

Làm thế nào để làm cho nó như vậy mà khi gửi là đã nhấp vào tất cả hộp kiểm kết thúc như một phần của "tham số", nhưng được phân tách bằng dấu phẩy? Nói cách khác, nó sẽ là:

process.php?parameter=a,oats,beans 

Giải pháp tốt nhất với javascript/jquery/html tối thiểu là tốt nhất nếu không có giải pháp html.

Answer 1

Nếu bạn muốn nhiều giá trị trong một tham số, bạn phải đặt tên nó như 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> 

Answer 2

Nhiều hay ít ở đây ý tưởng: hình thức đầu tiên, 1 đầu vào ẩn sẽ bắt tất cả các hình tròn thứ hai và không có giá trị

<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> 

thêm một số sửa chữa, gửi biểu mẫu phù hợp. Thử nghiệm trên jsfiddle:

JsFiddel "working" example

THÊM MẪU SINGLE VERSION

Bạn đã biết tên của lĩnh vực này, và bỏ qua những params khác trong câu trả lời

<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>​ 

Answer 3

Có là một phương pháp rất hữu ích để sử dụng cho nhóm dữ liệu động.

<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> 

Answer 4

Tôi thật sự chỉ quan tâm đến hộp kiểm mà thực sự đã được kiểm tra - vì vậy tôi đã xây dựng myfunc() từ các ví dụ khác như thế này:

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(); 
    } 
}