How to submit multiple inputs with jquery

Question

Seems I can't google the right answer, because I don't know how to ask the question... So I will try to describe the situation.

I have HTML (smarty template):

{foreach $dns_records as $record}
                  <tr>
                    <td class="text-center align-middle">
                      <a href="javascript:void(0);" class="text-danger delete-record" title="Delete record"><i class="fas fa-times-circle"></i></a>
                    </td>
                    <td>
                      <input type="text" name="record[]" id="name" class="form-control" value="{$record.name|escape:html}" />
                    </td>
                    <td>
                      <select class="form-select" name="record[]" id="ttl" {if !$record.ttl}disabled{/if}>
                        <option value="">-</option>
                        {if $record.ttl}
                        {foreach from=$dns_allowed_ttl item=ttl key=key}
                            <option value="{$ttl}" {if $ttl eq $record.ttl}selected{/if}>{$ttl} min.</option>
                        {/foreach}
                        {/if}
                      </select>
                    </td>
                    <td>
                      <select class="form-select" name="record[]" id="type">
                        <option value="">-</option>
                        {foreach from=$dns_record_types item=type key=key}
                            <option value="{$type}" {if $type eq $record.type}selected{/if}>{$type}</option>
                        {/foreach}
                      </select>
                    </td>
                    <td style="width: 10%">
                      <input type="text" name="record[]" id="prio" class="form-control" value="{if $record.priority}{$record.priority|escape:html}{else}-{/if}" {if $record.type neq 'MX'}disabled{/if}/>
                    </td>
                    <td>
                      <input type="text" name="record[]" id="content" class="form-control" value="{$record.content|escape:html}"/>
                    </td>
                  </tr>
                  {foreachelse}
                  <tr>No records found.</tr>
                  {/foreach}

I want to submit those input fields to my PHP like this:

0: ['name', 'ttl', 'type', 'prio', 'content'],
1: ['name', 'ttl', 'type', 'prio', 'content'],
2: ['name', 'ttl', 'type', 'prio', 'content'],
<...>

I use AJAX via jquery:

 $("#records-table").submit(function(event) { 

        event.preventDefault();

        if (request) {
            request.abort();
        }

        var $inputs = $("#records-table").find("input, select");

        var record = $('input[name="record[]"]').map(function(){ 
            return this.value; 
        }).get();

        var data = {
            records:  record,
            zone_id:  $inputs.find("#zone_id").val(),
            action:  $inputs.find("#action").val(),
            csrf: $inputs.find("#csrf").val(),
        }

        console.log(data);

        request = $.ajax({
            cache: false,
            url: 'ajax/dns_zone.php',
            type: "post",
            dataType: "json",
            data: JSON.serialize(data)
        });

        request.done(function (response) {
            if (response.response == '1') {
                window.location = response.redirecturl;
            }
        });
    });

How to achieve my goal? I understand that input field must have unique ID's, but I select them via name with [].

Answer 1

Here is a solution to my problem:

var final = [];
        var value = [];
        var i = 1;
        $("input[name='record[]']").each(function() {
        value.push($(this).val());
        if(i % 5 == 0) {
            final.push(value);
            value = [];
        }
        i++;
        });


        var data = {
            records:  value,
            zone_id:  $(this).find("input[name='zone_id']").val(),
            action:  $(this).find("input[name='action']").val(),
            csrf: $(this).find("#csrf").val(),
        }

        request = $.ajax({
            cache: false,
            url: 'ajax/dns_zone.php',
            type: "post",
            dataType: "json",
            data: $(this).serialize(data)
        });

Here is HTML part:

<form id="records-table">
                {$csrf}
                <input type="hidden" name="action" value="edit_records" />
                <input type="hidden" name="zone_id" value="{$zone.id}" />
                {counter assign=i start=1 print=false}
                {foreach $dns_records as $record}
                  <tr>
                    <td class="text-center align-middle">
                      <a href="javascript:void(0);" class="text-danger delete-record" title="Delete record"><i class="fas fa-times-circle"></i></a>
                    </td>
                    <td>
                      <input type="text" name="record[{$i}][name]" id="name" class="form-control" value="{$record.name|escape:html}" />
                    </td>
                    <td>
                      <select class="form-select" name="record[{$i}][ttl]" id="ttl" {if !$record.ttl}disabled{/if}>
                        <option value="">-</option>
                        {if $record.ttl}
                        {foreach from=$dns_allowed_ttl item=ttl key=key}
                            <option value="{$ttl}" {if $ttl eq $record.ttl}selected{/if}>{$ttl} min.</option>
                        {/foreach}
                        {/if}
                      </select>
                    </td>
                    <td>
                      <select class="form-select" name="record[{$i}][type]" id="type">
                        <option value="">-</option>
                        {foreach from=$dns_record_types item=type key=key}
                            <option value="{$type}" {if $type eq $record.type}selected{/if}>{$type}</option>
                        {/foreach}
                      </select>
                    </td>
                    <td style="width: 10%">
                      <input type="text" name="record[{$i}][prio]" id="prio" class="form-control" value="{if $record.priority}{$record.priority|escape:html}{else}-{/if}" {if $record.type neq 'MX'}disabled{/if}/>
                    </td>
                    <td>
                      <input type="text" name="record[{$i}][content]" id="content" class="form-control" value="{$record.content|escape:html}"/>
                    </td>
                  </tr>
                  {counter}
                  {foreachelse}
                  <tr>No records found.</tr>
                  {/foreach}
                 </form>

Take a note at counter. It iterates array. It is important!

Answer 2

So all of your input's name is record[], that will make the record[] value to be something like:

['name', 'ttl', 'type', 'prio', 'content','name', 'ttl', 'type', 'prio', 'content','name', 'ttl', 'type', 'prio', 'content']

Then you could try this:

var final = [];
var value = [];
var i = 1;
$("input[name='record[]']").each(function() {
  value.push($(this).val());
  if(i % 5 == 0) {
    final.push(value);
    value = [];
  }
  i++;
});

It will iterate over all of the record[], creating the new variable for each grouped input. It will be:

[["name", "ttl", "type", "prio", "content"], ["name", "ttl", "type", "prio", "content"], ["name", "ttl", "type", "prio", "content"]]