2012-05-12 21 views
6

Tôi đang sử dụng trình khởi động của Twitter và cần phải chuyển danh sách lựa chọn hộp kiểm được phân tách đến máy chủ của tôi để xử lý. HTML hộp trông như thế này:Tôi có thể chuyển nhiều giá trị hộp kiểm với một tên không?

<div class="controls"> 
    <label class="checkbox"><input type="checkbox" name="my_match[]" value="190">TEST 190</label> 
    <label class="checkbox"><input type="checkbox" name="my_match[]" value="200">TEST 200</label> 
    <label class="checkbox"><input type="checkbox" name="my_match[]" value="210">TEST 210</label> 
</div> 

... 

$.post("form.php", $("#form_id").serialize(), function(){ 
    ... 
}); 

Tôi đang đi qua các giá trị hình thức như là một chuỗi tuần tự sử dụng jquery nhưng các giá trị đang được gửi đi như vậy:

my_match=190&my_match=200 

Có thể gửi chúng trong định dạng sau?

my_match=190:200 

Tôi không chắc mình có cần thay đổi HTML hay đây là thứ tôi cần xử lý bằng javascript hay không. Có suy nghĩ gì không?

Trả lời

12

Something như thế này sẽ làm các trick:

<div class='controls'> 
    <label class="checkbox"> 
     <input type="checkbox" name="my_match[]" value="190">TEST 190</label> 
    <label class="checkbox"> 
     <input type="checkbox" name="my_match[]" value="200">TEST 200</label> 
    <label class="checkbox"> 
     <input type="checkbox" name="my_match[]" value="210">TEST 210</label> 
</div> 

<form> 
    <input id='my_match' type='hidden' name='my_match[]' /> 
    <button>Submit</button> 
</form> 

$('form').submit(function() { 
    var arr=[]; 

    $('input:checked[name=my_match[]]').each(function(){ 
     arr.push($(this).val()); 
    }); 

    $('#my_match').val(arr.join(':')); 
    alert($('#my_match').val()); 

    // Prevent actual submit for demo purposes: 
    return false; 
}); 
​ 
​ 

Try out the fiddle


Chỉnh sửa: Đây là cơ bản chính xác những gì Chase mô tả trong câu trả lời của mình.

+0

Sự kết hợp của trường này và trường ẩn đã thực hiện thủ thuật. Cảm ơn! – Paul

4

Tôi tin rằng các hộp kiểm có cùng tên sẽ trả lại bằng danh sách được phân cách bằng dấu phẩy. Những gì bạn có thể làm là tạo một trường ẩn, gắn thêm các giá trị hộp kiểm đã chọn của bạn theo cách bạn muốn và sau đó gửi trường ẩn thay thế.

0

Đối với bất kỳ ai khác được mang tới đây bởi Google:

Để theo sự hiểu biết của tôi, JavaScript là cách duy nhất để làm cho họ một chuỗi có dải phân cách bởi vì nó trở nên phức tạp nếu bạn muốn có một giải pháp chung mà có thể đối phó với tất cả các dấu phân cách mong muốn có thể và hỗ trợ thoát khỏi dấu tách nếu nó xuất hiện trong một trong các chuỗi giá trị.

Nếu có thể, tôi khuyên bạn chỉ nên chấp nhận định dạng my_match=190&my_match=200 và chuyển đổi chúng trên máy chủ.

Trong PHP, đó là tự động nếu bạn đặt [] ở cuối tên. Trong các ngôn ngữ khác, chẳng hạn như Python, thường sẽ có một getter đặc biệt trả về một danh sách chứ không phải là một giá trị duy nhất. (Ví dụ: request.POST.getlist('my_match') ở Django)

Dựa vào JavaScript làm cho trang của bạn trở nên mỏng manh hơn vì kết nối không ổn định, mạng bị trục trặc hoặc tường lửa lớp ứng dụng bị hỏng có thể ngăn JavaScript tải hoặc trì hoãn quá trình này đủ lâu để thử nhấp vào Gửi mà không có nó.

(Và nếu bạn vô hiệu hóa nút gửi cho đến khi JavaScript được tải, bạn sẽ chỉ làm phiền và/hoặc làm phiền khách truy cập của mình và cho họ thấy ấn tượng rằng trang web của bạn được xây dựng một cách shoddily bởi vì mọi người khác Luôn ghi nhớ cách hành động của bạn ảnh hưởng đến ấn tượng đầu tiên bạn thực hiện.)

... chưa kể, tùy thuộc vào JavaScript khi bạn không thực sự cần (ví dụ: trình đơn thả xuống không có :hover dự phòng phù phiếm yêu cầu JavaScript để gửi, v.v.) làm phiền những người như tôi, những người sử dụng các công cụ danh sách trắng JavaScript như NoScript tới:

  1. Làm cho quảng cáo trên web và "tham gia khảo sát!" quảng cáo trung gian ít gây phiền nhiễu
  2. Giảm sự chậm chạp của việc có tấn của các tab và phần mở rộng mở
  3. Hạn chế các cơ hội mà một 0-day khai thác sẽ thành công

Nếu bạn hoàn toàn phải sử dụng JavaScript trong một tình huống như thế này , hãy đảm bảo sử dụng thẻ <noscript> để cảnh báo mọi người tải lại với JavaScript được bật trước khi họ điền vào biểu mẫu.

Các vấn đề liên quan