2009-05-26 29 views
25

Làm thế nào để vượt qua nhiều hộp kiểm sử dụng jQuery ajax bàiLàm thế nào để vượt qua nhiều hộp kiểm sử dụng jQuery ajax bài

này là chức năng ajax

function submit_form(){ 
$.post("ajax.php", { 
selectedcheckboxes:user_ids, 
confirm:"true" 
}, 
function(data){ 
    $("#lightbox").html(data); 
    }); 
} 

và đây là hình thức của tôi

<form> 
<input type='checkbox' name='user_ids[]' value='1'id='checkbox_1' /> 
<input type='checkbox' name='user_ids[]' value='2'id='checkbox_2' /> 
<input type='checkbox' name='user_ids[]' value='3'id='checkbox_3' /> 
<input name="confirm" type="button" value="confirm" onclick="submit_form();" /> 
</form> 

Trả lời

46

Từ tài liệu jquery cho POST (3rd example):

$.post("test.php", { 'choices[]': ["Jon", "Susan"] }); 

Vì vậy, tôi sẽ lặp qua các hộp được chọn và tạo mảng. Một cái gì đó như

var data = { 'user_ids[]' : []}; 
$(":checked").each(function() { 
    data['user_ids[]'].push($(this).val()); 
}); 
$.post("ajax.php", data); 
+0

Cảm ơn sự giúp đỡ – ahmed

+0

tôi vẫn không thể POST nó .. nó cho đối tượng Object nếu tôi làm một window.alert cho dữ liệu ... nơi có thể vấn đề được ?? – mkamthan

+0

Nếu nó không phải là data.user_ids.push ($ (this) .val()); ? –

2

Nếu bạn không đặt trên giải pháp của riêng của bạn, hãy kiểm tra jQuery plugin này:

malsup.com/jquery/form/

Nó sẽ làm điều đó và nhiều hơn nữa cho bạn. Nó rất khuyến khích.

9

Có thể sử dụng thông tin sau và sau đó phát nổ kết quả bài đăng explode(",", $_POST['data']); để cung cấp một loạt kết quả.

var data = new Array(); 
$("input[name='checkBoxesName']:checked").each(function(i) { 
    data.push($(this).val()); 
}); 
+0

trong "input [name = 'checkBoxesName']: được chọn" đừng quên đặt "[]" vào tên của checkBoxesName, theo cách này: "input [name = 'checkBoxesName []']: checked" – Zanoldor

14

Chỉ cần bắt gặp vấn đề này để tìm giải pháp cho cùng một vấn đề. Thực hiện giải pháp của Paul Tôi đã thực hiện một vài tinh chỉnh để làm cho chức năng này đúng cách.

var data = { 'venue[]' : []}; 

$("input:checked").each(function() { 
    data['venue[]'].push($(this).val()); 
}); 

Trong ngắn hạn, nhập vào: được đánh dấu trái ngược với: kiểm tra giới hạn các trường nhập vào mảng để chỉ các hộp kiểm trên biểu mẫu. Paul thực sự là đúng với this cần phải được đính kèm như $(this)

6

Dưới đây là một cách linh hoạt hơn.

giả sử đây là biểu mẫu của bạn.

<form> 
<input type='checkbox' name='user_ids[]' value='1'id='checkbox_1' /> 
<input type='checkbox' name='user_ids[]' value='2'id='checkbox_2' /> 
<input type='checkbox' name='user_ids[]' value='3'id='checkbox_3' /> 
<input name="confirm" type="button" value="confirm" onclick="submit_form();" /> 
</form> 

Và đây là jquery ajax của bạn dưới đây ...

Và trong ajax.php, bạn cố gắng lặp lại hoặc print_r bài viết của bạn để xem những gì đang xảy ra bên trong nó. Điều này sẽ giống như thế này. Chỉ các hộp kiểm mà bạn đã chọn sẽ được trả lại. Nếu bạn không chọn bất kỳ, nó sẽ trả về một lỗi.

<?php 
    print_r($_POST); // this will be echoed back to you upon success. 
    echo "This one too, will be echoed back to you"; 

Hy vọng điều đó là đủ rõ ràng.

0

này sẽ tốt hơn và dễ dàng

var arr = $('input[name="user_ids[]"]').map(function(){ 
    return $(this).val(); 
}).get(); 

console.log(arr); 
1

Sau đây từ Paul Tarjan làm việc cho tôi,

var data = { 'user_ids[]' : []}; 
$(":checked").each(function() { 
    data['user_ids[]'].push($(this).val()); 
}); 
$.post("ajax.php", data); 

nhưng tôi đã nhiều hình thức trên trang của mình và nó kéo kiểm tra hộp từ khắp nơi các biểu mẫu, vì vậy tôi đã thực hiện sửa đổi sau để nó chỉ lấy từ một biểu mẫu,

var data = { 'user_ids[]' : []}; 
$('#name_of_your_form input[name="user_ids[]"]:checked').each(function() { 
    data['user_ids[]'].push($(this).val()); 
}); 
$.post("ajax.php", data); 

Chỉ cần thay đổi name_of_your_form vào tên biểu mẫu của bạn.

Tôi cũng sẽ đề cập rằng nếu người dùng không chọn bất kỳ hộp nào thì không có mảng nào được đặt trong PHP. Tôi cần phải biết nếu người dùng bỏ chọn tất cả các ô, vì vậy tôi đã thêm dòng sau vào các hình thức,

<input style="display:none;" type="checkbox" name="user_ids[]" value="none" checked="checked"></input> 

Bằng cách này nếu không có hộp được kiểm tra, nó vẫn sẽ thiết lập các mảng với giá trị là "none".

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