programing

jQuery ajax post를 사용하여 여러 확인란을 전달하는 방법

lovejava 2023. 10. 11. 20:22

jQuery ajax post를 사용하여 여러 확인란을 전달하는 방법

jQuery ajax post를 사용하여 여러 확인란을 전달하는 방법

이것은 아약스 함수입니다.

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

이것이 제 폼입니다.

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

POST용 jquery 문서(제3 예)에서:

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

그래서 체크박스를 반복해서 배열을 만들겠습니다.뭐 이런 거.

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

같은 문제에 대한 해결책을 찾다가 우연히 발견했습니다.Paul의 해결책을 실행하면서 나는 이것이 제대로 작동하도록 몇 가지 수정을 했습니다.

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

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

간단히 말해 입력의 추가:checked to :checked와 반대로 배열에 입력되는 필드를 양식의 확인란으로만 제한합니다.Paul은 정말로 옳습니다.this로 동봉될 필요가 있는$(this)

다음을 이용해서 포스트 결과를 폭발시킬 수 있습니다.explode(",", $_POST['data']);여러 가지 결과를 제공합니다.

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

여기 좀 더 유연한 방법이 있습니다.

이것이 당신의 양식이라고 치자.

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

그리고 이건 아래에 있는 당신의 jquery ajax...

                // Don't get confused at this portion right here
                // cuz "var data" will get all the values that the form
                // has submitted in the $_POST. It doesn't matter if you 
                // try to pass a text or password or select form element.
                // Remember that the "form" is not a name attribute
                // of the form, but the "form element" itself that submitted
                // the current post method
                var data = $("form").serialize(); 

                $.ajax({
                    url: "link/of/your/ajax.php", // link of your "whatever" php
                    type: "POST",
                    async: true,
                    cache: false,
                    data: data, // all data will be passed here
                    success: function(data){ 
                        alert(data) // The data that is echoed from the ajax.php
                    }
                });

그리고 당신의 ajax.php에서는 당신의 게시물을 echo 또는 print_r로 출력하여 그 안에서 무슨 일이 일어나고 있는지 확인합니다.이거는 이렇게 해야 돼요.선택한 확인란만 반환됩니다.확인하지 않으셨다면 오류를 반환해 드립니다.

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

그것이 충분히 분명하기를 바랍니다.

이것이 더 좋고 쉬울 것입니다.

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

console.log(arr);

폴 타잔의 다음과 같은 내용이 저를 위해 도움이 되었습니다.

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

하지만 제 페이지에 여러 양식이 있었고 모든 양식에서 체크박스를 꺼냈기 때문에 다음과 같이 수정하여 하나의 양식에서만 꺼냈습니다.

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

양식의 name_of_your_form을 양식의 이름으로 변경하기만 하면 됩니다.

사용자가 어떤 상자도 선택하지 않으면 PHP에 배열이 설정되지 않는다는 점도 언급하겠습니다.사용자가 모든 상자를 선택하지 않았는지 알아야 해서 양식에 다음을 추가했습니다.

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

이런 방식으로 상자를 선택하지 않으면 배열이 "none" 값으로 설정됩니다.

function hbsval(arg) {
  // $.each($("input[name='Hobbies']:checked"), function (cobj) {
  var hbs = new Array();
  $('input[name="Hobbies"]:checked').each(function () {
    debugger

    hbs.push($(this).val())
  });

  alert("No. of selected hbs: " + hbs.length + "\n" + "And, they are: " + hbs[0] + hbs[1]);
}

언급URL : https://stackoverflow.com/questions/908708/how-to-pass-multiple-checkboxes-using-jquery-ajax-post