pass myArray by ajax to php

Question

Hello I am trying to pass array called myArray to php.

<script type = "text/javascript" >
    $(document).ready(function () {
        var tagApi = $(".tm-input").tagsManager();
        var myArray = [];


        jQuery(".typeahead").typeahead({
            name: 'email',
            displayKey: 'email',
            source: function (query, process) {
                return $.get('Data.php', {
                    query: query
                }, function (data) {
                    data = $.parseJSON(data);
                    console.log(data);
                    return process(data);

                });
            },
            afterSelect: function (item) {
                tagApi.tagsManager("pushTag", item);
                myArray.push(item);
                console.log('This is myArray', myArray);
            }


        });

        $.ajax({
            type: "POST",
            url: "Data.php",
            data: {
                myArray: myArray
            },
            success: function () {
                $("#submit").submit();
            }
        });
    }); 
</script>

But when I am trying to get myArray like:

<?php $myArray = $_REQUEST['myArray']; 
echo "This is myArray: ".$myArray; 
?>

I see only echo This is my Array without any data from myArray. How should I pass myArray to get it in php?

Submit is my button which got id submit. After submit form I just want to pass myArray and get it in my php file.

Or maybe I am doing something wrong and just myArray is empty? my console.log works good and I can see all data from myArray

Edit: There is html section

<form action="Data.php" method="post" id="submit">

    <div class="form-group">
        <label>Add Tags:</label><br />
        <input type="text" name="email" placeholder="Email" autocomplete="nope" autocomplete="off" class="typeahead tm-input form-control tm-input-info" />
    </div>

    <div class="form-actions form-group"><button type="submit" value="add" name="add" class="btn btn-success btn-block">Utwórz</button></div>
</form>

Possible duplicate of [Receive JSON POST with PHP](https://stackoverflow.com/questions/18866571/receive-json-post-with-php) — kemicofa ghost, Nov 24 '18 at 13:02
@defus did you checked the xhr request params through inspect element — sanu, Nov 24 '18 at 13:18
@defus can you add `dataType: "json"` in your ajax options and check — sanu, Nov 24 '18 at 13:20
@sanu yes I did i see only my Get response also see console.log and that jquery.min.js:4 XHR finished loading: POST, dataType also doesn't works — Defus, Nov 24 '18 at 13:24
@sanu I tried still nothing. I'll edit my question can you check html? — Defus, Nov 24 '18 at 13:30
@defus before calling ajax can you verify `myArray` having data — sanu, Nov 24 '18 at 13:32
@sanu i see data in myArray when I called console.log in afterSelect: function — Defus, Nov 24 '18 at 13:33
@sanu I tried to put ajax into afterSelect and every console.log with myArray i see XHR finished loading post. But still is null — Defus, Nov 24 '18 at 13:36

sanu · Accepted Answer · 2018-11-24T14:37:56.680

1

You are calling ajax inside .ready () which means it will call once your document is fully loaded. You have to call the ajax when user clicks on submit button

Try this

  <script type = "text/javascript" >
  $(document).ready(function () {
    var tagApi = $(".tm-input").tagsManager();
    var myArray = [];


    jQuery(".typeahead").typeahead({
        name: 'email',
        displayKey: 'email',
        source: function (query, process) {
            return $.get('Data.php', {
                query: query
            }, function (data) {
                data = $.parseJSON(data);
                console.log(data);
                return process(data);

            });
        },
        afterSelect: function (item) {
            tagApi.tagsManager("pushTag", item);
            myArray.push(item);
            console.log('This is myArray', myArray);
        }


    });

  $(".btn").click (function (e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "Data.php",
        data: {
            myArray: myArray
        },
        success: function () {
            $("#submit").submit();
        }
    });
   });
});

edited Nov 24 '18 at 14:37

answered Nov 24 '18 at 13:24

sanu

548
7
15

It can't by done like this because it works like this: http://demo.itsolutionstuff.com/demo/demo-php-input-multiple-tags-with-dynamic-autocomplete-exampleexample.html I want to take all tags and put in into my db – Defus Nov 24 '18 at 13:50
after click submit button – Defus Nov 24 '18 at 13:57
@defus I updated my answer please try and let me know – sanu Nov 24 '18 at 14:02
still myArray is null – Defus Nov 24 '18 at 14:09
Inspect element while clicking submit button you can see one xhr request under network tab. Click that request for more details and check is it sending your data or not – sanu Nov 24 '18 at 14:16
I tried add myArray into table like: $sql = "INSERT INTO test VALUES ('$myArray')"; and in my database i got value: Array without any data just text: Array. (It's works after click button ) So i Think that my array is empty and it works only in method afterSelect (hmm?) – Defus Nov 24 '18 at 14:21
1

yes this part works but still got empty Array. ANyway thank you – Defus Nov 24 '18 at 14:38

pass myArray by ajax to php

1 Answers1