如何使用 jquery 提交多个输入

Question

似乎我无法在谷歌上找到正确的答案，因为我不知道如何提出问题......所以我将尝试描述这种情况。

我有 HTML（智能模板）：

{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}

我想像这样将这些输入字段提交到我的 PHP：

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

我通过 jquery 使用 AJAX：

 $("#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;
            }
        });
    });

如何实现我的目标？我知道输入字段必须具有唯一的 ID，但我通过带有 [] 的名称选择它们。

Answer 1

所以您输入的所有名称都是record[]，这将使record[] 的值类似于：

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

那你可以试试这个：

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++;
});

它将遍历所有record[]，为每个分组输入创建新变量。它将是：

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

Answer 2

这是我的问题的解决方案：

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)
        });

这里是 HTML 部分：

<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>

在柜台做笔记。它迭代数组。这很重要！