如何将变量和数组变量一起提交给jQuery并返回给PHP？

Question

I have created a form (for testing) which include text field with id and name attribute. Also in the same form i have a check boxes which the user will check to submit to php. html form is as follows:

<form id="f1" action="chkbx.php" method="get">
    <input type="text" name="t1" id="txt" />
    <br>
    <input type=checkbox name="color[]" class="color" value="c1"/>
    <label>chk1</label>
    <hr>
    <input type="checkbox" name="color[]" class="color" value="c2"/>
    <label>chk2</label>
    <hr>
    <input type="checkbox" name="color[]" class="color" value="c3"/>
    <label>chk3</label>
    <hr>
    <input type="checkbox" name="color[]" class="color" value="c4"/>
    <label>chk4</label>
    <hr>
    <input type="button" id="btn" value="Submmit" name="sub" />
</form>

I have jquery to handle the form so that the text field is stored in a variable, and a loop that will go through the check boxes to see which box is checked and store its value in an array. Everything work fine so far. In jquery i'm using ajax to pass the form to php file as follows:

$(document).ready(function(){
$("#btn").click(function(){
    var dest = $("#f1").attr("action");
    var meth = $("#f1").attr("method");
    var txt = $("#txt");
    var col = [];
    $(".color").each(function(){
        if ($(this).is(":checked")){
            col.push($(this).val());
        }
    });
    console.log(col); // indicate that all checked values inserted in the array
    $.ajax({
        data: {d1: col, d2: txt},
        url: dest,
        method: meth,
        success: function(res){
            alert(res);
        }
    });
});

});

Lastly, this is my code in php:

<?php

   $arrV = $_GET["d1"];
   $txtV = $_GET["t1"]; // i tried the variable name from jquery and tried d2 written in data section in ajax

   print_r($arrV);
   echo $txtV;

?>

Please notice when i try to alert back each variable sepratley it works just fine (works with the array alone and the varable alone with tiny cahnges in ajax section and php). However when i try to retrieve them both it won't work. After several tries i got the following errors returned back from php (syntax_error undefined index, rangeError maximum call stack size exceeded)

what am I doing wrong? Please help!

Answer 1

There are a number of flaws in the above code ... you're using <form> to submit AND $.ajax for one. I'd simplify as follows:

HTML

<form id="f1">
    <input type="text" name="t1" id="txt">
    <br>
    <input type=checkbox name="color[]" class="color" value="c1"/>
    <label>chk1</label>
    <hr>
    <input type="checkbox" name="color[]" class="color" value="c2"/>
    <label>chk2</label>
    <hr>
    <input type="checkbox" name="color[]" class="color" value="c3"/>
    <label>chk3</label>
    <hr>
    <input type="checkbox" name="color[]" class="color" value="c4"/>
    <label>chk4</label>
    <hr>
    <input type="button" id="btn" value="Submmit" name="sub" />
</form>

JS

<script>
    function getInputs( el ){
        var values = {};
        $(el + ' :input').not('[type="button"]').each(function(){
            if ($(this).attr('type') == 'radio' && $(this).is(':checked')) {
                values[this.name] = this.value;
            } else if ($(this).attr('type') == 'checkbox') {
                values[this.name] = $(this).is(':checked') ? 1 : 0;
            } else {
                values[this.name] = this.value;
            }
        });
        return values;
    }

    $(function(){

        $("#btn").click(function(){
            var $data = getInputs('#btn');
            $.ajax({
                url      : 'chkbx.php',
                type     : 'POST',
                dataType : 'json',
                data     : {data: $data}
            });
            return false;
        });

    });
</script>

PHP (chkbx.php)

<?php
    $data = $_POST['data'];
    echo print_r($data,true);
?>

The above will probably NOT work as-is, but should give you an idea of a cleaner approach that does work.