How to group values posted from HTML form by key if input fields can be dynamically added or deleted

Question

I have a form where rows can be added on click of a button. They can also be removed on click.

My html on page load looks like this:


  
    
      Aantal
      
        
      
    
    
      Titel
      
        
      
    
    
      Prijs
      
        
      
    
    
      Totaal
      €99,05
    
    
      
    
    
      Beschrijving

I want to group all results together when there are multiple invoicerow elements present.

Now when I post the posted array looks like this:

Array
(
    [other_info] => 
    [invoice_row] => Array
        (
            [0] => Array
                (
                    [invoice_quantity] => 
                )

            [1] => Array
                (
                    [invoice_title] => 
                )

            [2] => Array
                (
                    [invoice_price] => 
                )

            [3] => Array
                (
                    [invoice_desc] => 
                )

            [4] => Array
                (
                    [invoice_quantity] => 
                )

            [5] => Array
                (
                    [invoice_title] => 
                )

            [6] => Array
                (
                    [invoice_price] => 
                )

            [7] => Array
                (
                    [invoice_desc] => 
                )

        )

)

While this is what I am looking for:

Array
(
    [other_info] => 
    [invoice_row] => Array
        (
            [0] => Array
                (
                    [invoice_quantity] => 
                    [invoice_title] => 
                    [invoice_price] => 
                    [invoice_desc] => 
                )

            [1] => Array
                (
                    [invoice_quantity] => 
                    [invoice_title] => 
                    [invoice_price] => 
                    [invoice_desc] => 
                )

        )

)

I know I can change this invoice_row[][invoice_price] to invoice_row[0][invoice_price] for example to group them but this won't work since my input fields can be dynamically added and removed.

What is the best solution for this?

This is my code that adds and removes the input fields:

$(".add_invoice_row").click(function () {
  var invoicehtml = '' + 
  '' +
  '  ' +
  '    ' +
  '      Aantal' +
  '      ' +
  '        ' +
  '      ' +
  '    ' +
  '    ' +
  '      Titel' +
  '      ' +
  '        ' +
  '      ' +
  '    ' +
  '    ' +
  '      Prijs' +
  '      ' +
  '        ' +
  '      ' +
  '    ' +
  '    ' +
  '      Totaal' +
  '      €99,05' +
  '    ' +
  '    ' +
  '      ' +
  '    ' +
  '    ' +
  '      Beschrijving' +
  '      ' +
  '        ' +
  '      ' +
  '    ' +
  '  ' +
  '' +
  '';
  $('.new_invoice_row').append(invoicehtml);

  create_invoice_form = $(".create_invoice_form").serialize();
  $.ajax({
    type:'post',
    url:"invoice_custom.php",
    data:({
      create_invoice_form: create_invoice_form
    }),
    success:function(data){
      console.log(data);
    }
  });
});

$(document).on('click', '.delete_invoice_row', function () {
  $(this).closest('.invoicerow').remove();
});

jsFiddle example: https://jsfiddle.net/xbLyp9f2/1/

user_201078 · Answer

IMHO: Don't embed HTML literal into your JS code unless really needed. Hide the HTML template in a script tag containing replacement text markers (e.g. for the index).

You can then have an actual index value inserted for each added row (I usually add 1 to the highest existing row value present):

$('#rowtemplate').html() will give you the template as a string.

https://jsfiddle.net/TrueBlueAussie/j41fzubp/2/

I left a comment in the JSFiddle where the string replacements would go, but as you have already accepted another answer, I leave it up to you to complete.

user_15273968 · Answer

You can use jquery.serializeJSON, a small jquery plugin, to get output in nice JSON format. The JSON can be easily parsed at server side.

$(".add_invoice_row").click(function() {
  var invoicehtml = '' +
    '' +
    '  ' +
    '    ' +
    '      Aantal' +
    '      ' +
    '        ' +
    '      ' +
    '    ' +
    '    ' +
    '      Titel' +
    '      ' +
    '        ' +
    '      ' +
    '    ' +
    '    ' +
    '      Prijs' +
    '      ' +
    '        ' +
    '      ' +
    '    ' +
    '    ' +
    '      Totaal' +
    '      €99,05' +
    '    ' +
    '    ' +
    '      ' +
    '    ' +
    '    ' +
    '      Beschrijving' +
    '      ' +
    '        ' +
    '      ' +
    '    ' +
    '  ' +
    '' +
    '';
  $('.new_invoice_row').append(invoicehtml);
});


//create_invoice_form = $(".create_invoice_form").serialize();
/*$.ajax({
  type: 'post',
  url: "invoice_custom.php",
  data: ({
    create_invoice_form: create_invoice_form
  }),
  success: function(data) {
    console.log(data);
  }
});
*/
function onSubmit(form) {
  var data = $(form).serializeJSON();

  console.log(data);
  console.log(JSON.stringify(data, undefined, 3));
  return false;
}

$(document).on('click', '.delete_invoice_row', function() {
  $(this).closest('.invoicerow').remove();
});





  See the console logs for output.
  
    

    
      
        Emailadres
        
          
        
      
      
        Datum
        
          
        
      
      
        
          
            
              Aantal
              
                
              
            
            
              Titel
              
                
              
            
            
              Prijs ex. BTW
              
                
              
            
            
              Totaal
              €99,05
            
            
              
            
            
              Beschrijving
              
                description

Note how I named the inputs invoice[row][][invoice_quantity].

Output:

{
   "invoice": {
      "mail": "abc@gmail.com",
      "date": "",
      "row": [
         {
            "invoice_quantity": "10",
            "invoice_title": "item 1",
            "invoice_price": "btw",
            "invoice_desc": "description"
         },
         {
            "invoice_quantity": "a",
            "invoice_title": "t",
            "invoice_price": "g",
            "invoice_desc": "sd"
         },
         {
            "invoice_quantity": "3",
            "invoice_title": "3",
            "invoice_price": "3",
            "invoice_desc": "des3"
         }
      ]
   }
}

In php you can convert the request JSON string to object using $jObj = json_decode($jsonString);

user_6090603 · Answer

For the dynamic solution (adding the indexes to the form names explicitly) to work reliably, all you need to do is handle the re-indexing when you remove an item:

$(document).on('click', '.delete_invoice_row', function () {
  $(this).closest('.invoicerow').remove();
  $('.invoicerow').each(function(idx, el) {
    $(el).find('[name^="invoice_row"]').each(function(iidx, iel) {
      $(iel).attr("name", iel.name.replace(/invoice_row$$\d+$$/, "invoice_row[" + idx + "]"));
    });
  });
});

Fiddle: https://jsfiddle.net/fg8rwexp/2/

How to group values posted from HTML form by key if input fields can be dynamically added or deleted

3 Answers