javascript - 发布字段数组 w

Question

我在 Bootstrap 3 上有动态字段。该表单由三个部分组成，以选项卡形式显示。

表单标签会在模式中自动删除，因此我的字段已被删除。我可以使用 jquery 属性选择器 $("input[name='invoice-date']").val() 发布其余的值。然而，我的困境在于:

 <div class="tab-pane" id="tab_2">
                <div class="row">
                  <br/>
                  <div class="form-group">
                    <div class="col-lg-2">
                      <label>#</label>
                    </div>
                    <div class="col-lg-7">
                      <label>Description</label>
                    </div>
                    <div class="col-lg-3">
                      <label>Amount</label>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-lg-2">
                      <label>Item 1.</label>
                    </div>
                    <div class="col-lg-7">
                      <input type="text" class="form-control" name="items[1][description]" />
                    </div>
                    <div class="col-lg-3">
                      <input type="text" class="form-control" name="items[1][amount]" />
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-lg-2">
                      <label>Item 2.</label>
                    </div>
                    <div class="col-lg-7">
                      <input type="text" class="form-control" name="items[2][description]" />
                    </div>
                    <div class="col-lg-3">
                      <input type="text" class="form-control" name="items[2][amount]" />
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-lg-2">
                      <label>Item 3.</label>
                    </div>
                    <div class="col-lg-7">
                      <input type="text" class="form-control" name="items[3][description]" />
                    </div>
                    <div class="col-lg-3">
                      <input type="text" class="form-control" name="items[3][amount]" />
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-lg-2">
                      <label>Item 4.</label>
                    </div>
                    <div class="col-lg-7">
                      <input type="text" class="form-control" name="items[4][description]" />
                    </div>
                    <div class="col-lg-3">
                      <input type="text" class="form-control" name="items[4][amount]" />
                    </div>
                  </div>
            </div>
       </div>

考虑到它是一个数组，我如何发布项目值？如果我能够将字段括在标签中，那么简单的 .serialize() 就可以了。

这是我迄今为止的 ajax 帖子:

$('#gen-invoice').on('click',function()
{
  $.ajax(
  {
    url: 'path("create-invoice")',
    data: { invoiceDate: $("input[name='invoice-date']").val(), job: $("input[name='inv-job-id']").val(), att: $("input[name='att']").val(), summary: $("input[name='inv-remarks']").val(), additional: $("input[name='inv-add']").val(), vattable: $("input[name='inv-vattable']").val(), items: $("input[name='items[]']").serialize(), deductions: $("input[name='deductions[]']").serialize()  },
    success:  function(response)
    {
      if(response.response == 200)
      {
        window.open(response.path,'_blank');
      }
      else
      {

      }
    }
  }
  )
});

Answer 1

为什么不迭代发票中的项目？
首先为项目指定一个不同的类名称 (.invoice-item)。
然后迭代这些项目并将它们插入一个数组，然后您可以将其作为参数传递给 ajax 调用。

var invoice_items = [];
$(".invoice-item").each(function(){
  invoice_items.push({name: $(this).val(),
  description: $(this).parent().prev().children().val()});
});

如您所见，可以通过更简单的方式完成遍历，但这只是为了传达要点。