web-dev-qa-db-ja.com

複数のチェックボックスデータをPHP jQuery ajax（）経由で送信

JQueryの.ajaxを使用して、textareaフィールドと入力フィールド（任意/可変数のチェックボックスを持つtype = "checkbox"）を含むPOSTフォーム）を自分のWebサイトに送信したい（）。PHPはtextareaデータを受け取り、ajax応答はユーザーに正しく表示されます。ただし、PHPはチェックボックスデータを受け取りません（チェックされたかどうか）これを機能させるにはどうすればよいですか？ここにあるコードは次のとおりです。

HTML：

<form method="post" action="myurl.php" id=myForm>
    <textarea id="myField" type="text" name="myField"></textarea>
    <input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" />
    <input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" />
    ...(maybe some more checkboxes - dynamically generated as necessary)
    <input id="submit" type="submit" name="submit" value="Submit" onclick="submitForm()" />
</form>

JQuery：

function submitForm() {
$(document).ready(function() {
$("form#myForm").submit(function() {

        var myCheckboxes = new Array();
        $("input:checked").each(function() {
           myCheckboxes.Push($(this).val());
        });

        $.ajax({
            type: "POST",
            url: "myurl.php",
            dataType: 'html',
            data: { myField:$("textarea[name=myField]").val(),
                    myCheckboxes:myCheckboxes },
            success: function(data){
                $('#myResponse').html(data)
            }
        });
        return false;
});
});

さて、PHP

$myField = htmlspecialchars( $_POST['myField'] ) );
if( isset( $_POST['myCheckboxes'] ) )
{
    for ( $i=0; $i < count( $_POST['myCheckboxes'] ); $i++ )
    {
        // do some stuff, save to database, etc.
    }
}
// create the response
$response = 'an HTML response';
$response = stripslashes($response);
echo($response);

すべてがうまく機能します。フォームが送信されると、新しいレコードがデータベースに保存され、応答はWebページに戻されますが、チェックボックスデータは送信されません。チェックボックスのうちどれがチェックされているかを知りたいのですが。 .serialize（）、JSONなどについて読んだことがありますが、これでうまくいきませんでした。 jQueryとPHPでJSONをシリアル化する必要がありますか？どうやって？チェックボックス付きのフォームデータを送信するときに、ある方法が別の方法より優れていますか？私は2日間これにこだわっています。どんな助けも大歓迎です。事前に感謝します！

phpjqueryajaxcheckbox
24
John Anderson
var myCheckboxes = new Array();
$("input:checked").each(function() {
   data['myCheckboxes[]'].Push($(this).val());
});

チェックボックスを間違った配列にプッシュしていますdata['myCheckboxes[]'] の代わりに myCheckboxes.Push

22
sbczk

はい、それはjquery.serialize（）でかなり動作します

HTML

<form id="myform" class="myform" method="post" name="myform">
<textarea id="myField" type="text" name="myField"></textarea>
<input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue1" />
<input type="checkbox" name="myCheckboxes[]" id="myCheckboxes" value="someValue2" />
<input id="submit" type="submit" name="submit" value="Submit" onclick="return submitForm()" />
</form>
 <div id="myResponse"></div>

JQuery

function submitForm() {
var form = document.myform;

var dataString = $(form).serialize();


$.ajax({
    type:'POST',
    url:'myurl.php',
    data: dataString,
    success: function(data){
        $('#myResponse').html(data);


    }
});
return false;
}

今PHP、私はPOSTデータをエクスポートします

 echo var_export($_POST);

すべてのチェックボックスの値が送信されていることを確認できます。

31
Winn Minn Soe

これをチェックしてください。

_<script type="text/javascript">
    function submitForm() {
$(document).ready(function() {
$("form#myForm").submit(function() {

        var myCheckboxes = new Array();
        $("input:checked").each(function() {
           myCheckboxes.Push($(this).val());
        });

        $.ajax({
            type: "POST",
            url: "myurl.php",
            dataType: 'html',
            data: 'myField='+$("textarea[name=myField]").val()+'&myCheckboxes='+myCheckboxes,
            success: function(data){
                $('#myResponse').html(data)
            }
        });
        return false;
});
});
}
</script>
_

また、myurl.phpではprint_r($_POST['myCheckboxes']);を使用できます

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

したがって、チェックボックスを反復処理して配列を作成します。何かのようなもの。

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

あなたが現在持っているコードは大丈夫のようです。これを使用して、チェックボックス配列に含まれるものを確認します。このコードをphpスクリプトの上部に追加し、チェックボックスがスクリプトに渡されるかどうかを確認します。

echo '<pre>'.print_r($_POST['myCheckboxes'], true).'</pre>';
exit;
0
blackpla9ue

これも試してみてください

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

console.log(arr);
0
SagarPPanchal