简体   繁体   中英

Unable to pass javascript array to php using ajax

I have the following code to pass a Javascript array to PHP using ajax :

in HTML :

echo "<input type=\"hidden\" id= \"que_id\" name= \"que_id[]\" value=".$questions['que_id'].">";

This is inside a loop.

in Javascript :

var que_id_array = new Array();
    $('input[name="que_id[]"]').each(function(){
       que_id_array.push($(this).val());
    });

AJAX Call :

$.ajax({
    type:"POST",
    url: 'questionmastermodify.php',
    data: { que_id:que_id_array},
    success: function(data) {
        $('.my_update_panel').html(data);
        $('#overlay').fadeOut();
    }
});

in PHP :

$que_id = $_REQUEST['que_id'];

echo count($que_id);    

The count displays 1 and not the size of the array, whereas in Javascript the console shows :

console.log(que_id_array);

output :

["151", "152", "153", "154", "155", "156", "157", "158", "159", "160", "161", "162", "163", "164", "165", "166", "167", "168", "169", "170", "171", "172", "173", "174", "175", "176", "177", "178", "179", "180", "181", "182", "183", "184", "185", "186", "187", "188", "189", "190", "191", "192", "193", "194", "195", "196", "197", "198", "199", "200"]

I am stuck as i need this array in PHP but unable to pass this array from JS to PHP.

Thanks in advance....

Sandy505

I made a quick test with your code... and with a few changes, It work's for me.
Take a look at your code, specially the loop when you create the <input> fields...

And also.. in the loop you have an ID in the <input> ... that's not good at all!.. change it for class for example...

As an example, this is what I tried:

Main PHP

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            $('#theForm').submit(function(event) {
                event.preventDefault();
                createTheArray();
            });
        });
        function createTheArray(){
            // Create the Array
            var que_id_array = new Array();
            $('input[name="que_id[]"]').each(function(){
                 que_id_array.push($(this).val());
            });
            console.log(que_id_array); // output ["151", "152", "153"] 
            sendTheForm(que_id_array); // do the ajax call
        }
        function sendTheForm(que_id_array){
            // AJAX Call
            $.ajax({
                    type:"POST",
                    url: 'questionmastermodify.php',
                    data: { que_id:que_id_array},
                    success: function(data) {
                            $('.my_update_panel').html(data);
                    }
            });
        }
    </script>
</head>
<body>
    <form id="theForm">
        <?php
            // your original Array
            $arrayName = array(
                array('que_id' => '151'),
                array('que_id' => '152'),
                array('que_id' => '153')
            );
            foreach ($arrayName as $key => $questions) {
                echo "<input type='text' class='que_id' name='que_id[]' value='{$questions['que_id']}'>";
            }
        ?>
        <input type="submit" value="send" />
    </form>
    <div class="my_update_panel">result will be loaded here...</div>
</body>
</html>

And your questionmastermodify.php PHP file

<?PHP
    $que_id = $_REQUEST['que_id'];
    echo '<pre>';
    print_r($que_id);
    echo '</pre>';
?>

Result

After form submit .. the HTML will print out:

<pre>Array
(
    [0] => 151
    [1] => 152
    [2] => 153
)
</pre>

And in the console.log();

["151", "152", "153"]

Give a try and good luck!

You could encode the array into JSON:

data: { que_id: JSON.stringify(que_id_array)},

In the PHP, decode it:

$que_id = json_decode($_REQUEST['que_id']);
echo count($que_id);  

The problem has been sorted out :

The culprit was the version of the jquery i was using. I was using jQuery JavaScript Library v1.3.2 - which caused this problem.

Using the latest : jquery-1.9.0.min.js solve the problem.

I am accepting the answer provided by #gmo as it brought me near to the problem solving and also about that helpful tip about not using id attribute in the Loop...

Thanks all...

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM