passing arrays in jquery post request not working

Question

im trying to pass javascript arrays in a jquery .post, but it's not showing on the page. What am i doing wrong? i see that my arrays are filled, but the data is not showing on the page post. The console log shows the p element also i dont know why it's doing that.

jquery code:

 $("#submitboeking").click(function(event) {

        event.preventDefault();


        //Cursisten
        var voornamen = [];
        var achternamen = [];
        var geslachten = [];
        var geboortedata = [];

        $("[id^='txtCursistVoornaam']").each(function() {
            voornamen.push($(this).val());
        });
        $("[id^='txtCursistAchternaam']").each(function() {
            achternamen.push($(this).val());
        });
        $("[id^='radCursistGeslacht']:checked").each(function() {
            geslachten.push($(this).val());
        });
        $("[id^='txtCursistGeboortedatum']").each(function() {
            geboortedata.push($(this).val());
        });

        // console.log(voornamen);
        // console.log(achternamen);
        // console.log(geslachten);
        // console.log(geboortedata);

        $.post('/wp-content/themes/tweb/processboeking.php',
         {


            voornamen: voornamen,
            geslachten: geslachten,
            voornamen: voornamen,
            achternamen: achternamen,
            geboortedata: geboortedata,
            })
            .done(function(data)
             {
                console.log(data)
                $('#overzichtboeking').html(data);

            }).fail(function(data) {
                alert(response.responseText);
            });

        var li_count = $('.nav-tabs li').length;
        var current_active = $('.nav-tabs li.active').index();
        if (current_active < li_count) {
            $('.nav-tabs li.active').next('li').find('a').attr('data-toggle', 'tab').tab('show');
            var txt = $(".oplselect option:selected").text();
            var val = $(".oplselect option:selected").val();
            $('.showoplnaam').html('Uw selectie: ' + txt);
        }

    });

console.log data:

Array
(
    [voornamen] => Array
        (
            [0] => G.F.
        )

    [geslachten] => Array
        (
            [0] => Dhr.
        )

    [achternamen] => Array
        (
            [0] => martens
        )

    [geboortedata] => Array
        (
            [0] => 25-10-1993
        )

)
<p id="overzichtboeking"></p>  

processboeking.php

<?php
include '/home/vhosts/tweb.nl/httpdocs/wp-content/themes/tweb/db/dbcon.php';

print_r($_POST);

?>
<p id="overzichtboeking"></p>  

Answer 1

Get complete form data as array and json stringify it.

var formData = JSON.stringify($("#myForm").serializeArray());

You can use it later in ajax. Or if you are not using ajax; put it in hidden textarea and pass to server. If this data is passed as json string via normal form data then you have to decode it using json_decode. You'll then get all data in an array.

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});

Taken from this stackoverflow post: How to send a JSON object using html form data

To go from JSON input on the server side, take a look at this article for converting back to a PHP array: https://www.dyn-web.com/tutorials/php-js/json/decode.php