Vfrdtyky

I have a dynamic list which can be ordered, the id of these elements changes accordingly.

My problem: I serialize the entire form and send it through ajax to a PHP script, but the id is not sent with that.

My array now looks like this for example:

Array

(

    [title] => lijsttitle

    [Category 1] => Array

        (

            [0] => Question 1

        )



    [Category 2] => Array

        (

            [0] => Question 1

        )



    [Category 3] => Array

        (

            [0] => Question 1

        )



    [Category 4] => Array

        (

            [0] => Question 1

        )



)

My HTML form which when posted generates above array looks like this:

<form id="lijstform">

    <div class="row">

        <div class="col-md-8">

            <label class="lijstnaamtitle">Lijst naam</label>

            <input class="form-control name_list catinput lijsttitle" type="text" name="lijsttitle">

        </div>

    </div>

    <div id="dynamic_field" class="ui-sortable">

        <div class="row sortwrap ui-sortable-handle" id="1">

            <div class="col-md-8">

                <input type="text" name="category" placeholder="1. Voeg een categorie toe" class="form-control name_list catinput">

                <i class="mdi mdi-sort dragndrop"></i>

                <div class="questionlist questionwrap">

                    <div class="row">

                        <div class="col-md-8">

                            <button class="btn btn-success questionbutton">Extra vraag</button>

                            <input type="text" name="question" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput">

                        </div>

                        <div class="col-md-4">

                        </div>

                    </div>

                </div>

            </div>

            <div class="col-md-4">

            </div>

        </div>

        <div class="row sortwrap ui-sortable-handle" id="2">

            <div class="col-md-8">

                <input type="text" name="category" placeholder="2. Voeg een categorie toe" class="form-control name_list catinput"> <i class="mdi mdi-sort dragndrop"></i>

                <div class="questionlist questionwrap">

                    <div class="row">

                        <div class="col-md-8">

                            <button class="btn btn-success questionbutton">Extra vraag</button>

                            <input type="text" name="question" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput"> </div>

                        <div class="col-md-4"> </div>

                    </div>

                </div>

            </div>

            <div class="col-md-4">

                <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>

            </div>

        </div>

        <div class="row sortwrap" id="3">

            <div class="col-md-8">

                <input type="text" name="category" placeholder="3. Voeg een categorie toe" class="form-control name_list catinput"> <i class="mdi mdi-sort dragndrop"></i>

                <div class="questionlist questionwrap">

                    <div class="row">

                        <div class="col-md-8">

                            <button class="btn btn-success questionbutton">Extra vraag</button>

                            <input type="text" name="question" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput"> </div>

                        <div class="col-md-4"> </div>

                    </div>

                </div>

            </div>

            <div class="col-md-4">

                <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>

            </div>

        </div>

        <div class="row sortwrap" id="4">

            <div class="col-md-8">

                <input type="text" name="category" placeholder="4. Voeg een categorie toe" class="form-control name_list catinput"> <i class="mdi mdi-sort dragndrop"></i>

                <div class="questionlist questionwrap">

                    <div class="row">

                        <div class="col-md-8">

                            <button class="btn btn-success questionbutton">Extra vraag</button>

                            <input type="text" name="question" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput"> </div>

                        <div class="col-md-4"> </div>

                    </div>

                </div>

            </div>

            <div class="col-md-4">

                <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>

            </div>

        </div>

    </div>

</form>

As you can see every sortable row has an id: <div class="row sortwrap" id="4">

I would like that id inside my array for every category so I can update my database and later display the saved list in its correct order.

I've tried the following:

$( ".lijstbutton" ).on( "click", function( event ) {

  event.preventDefault();

  url = 'includes/createlist.php';



  $lijst = $( '#lijstform' ).serializeArray();

  $idorder = $('.sortwrap').attr('id');



  var posting = $.post(url, {

    lijst: $lijst,

    idorder: $idorder

  });



    posting.done(function( data ) {

     $( ".lijstresult" ).empty().slideDown('fast').append( data );

   });

  });

But when posted this is what I see in my network tab:

lijst[0][name]: lijsttitle

lijst[0][value]: List name

lijst[1][name]: category

lijst[1][value]: Category 1

lijst[2][name]: question

lijst[2][value]: Question 1

lijst[3][name]: category

lijst[3][value]: Category 2

lijst[4][name]: question

lijst[4][value]: Question 1

lijst[5][name]: category

lijst[5][value]: Category 3

lijst[6][name]: question

lijst[6][value]: Question 1

lijst[7][name]: category

lijst[7][value]: Category 4

lijst[8][name]: question

lijst[8][value]: Question 1

idorder: 1

Only the first one is posted.

This is how I generate the array in my PHP script:

$arr = $_POST['lijst'];



$store = ;



// pull off first arr element

$title = array_shift($arr);

// save title to store

$store['title'] = $title['name'];



$currCat = '';

foreach($arr as $a) {

  $val = $a['value'];

  // handle category

  if($a['name'] == 'category') {

    // save cat name

    $currCat = $val;

    // init questions array

    $store[$currCat] = ;

  }

  else {

    // add question to question array

    $store[$currCat] = $val;

  }

}

Not sure what the best method is to add the order id to my array and how to do it.

Maybe add the id to every key after a barely used character? Something like [Category 1|1] and then explode on |

Easy approach will be to create hidden input under each row sortwrap which will get posted to when form is submitted.

<div class="row sortwrap ui-sortable-handle" id="1">

    <div class="col-md-8">

        <input type="text" name="category" placeholder="1. Voeg een categorie toe" class="form-control name_list catinput">

        <i class="mdi mdi-sort dragndrop"></i>

        <div class="questionlist questionwrap">

            <div class="row">

                <div class="col-md-8">

                    <button class="btn btn-success questionbutton">Extra vraag</button>

                    <input type="text" name="question" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput">

                </div>

                <div class="col-md-4">

                </div>

            </div>

        </div>

    </div>

    <div class="col-md-4">

    </div>

    <input type="hidden" name="id" value="1" /> <!-- POST ID in Hidden input -->

</div>

Similarly, do it under all sortwrap container.

Another approach using your current flow is to use jQuery map function to retrieve all IDs.

Change

$idorder = $('.sortwrap').attr('id');

To

$idorder = $('.sortwrap').map(function() {

               return $(this).attr("id");

           }).get();