发送多个阵列，以在laravel AJAX到控制器

Question

我已经自定义表单在我看来附加，当我将数据发送到控制器我不能获得超过1种形式的数据，我需要发送数据的阵列。

DD

这是我送目前：

array:7 [
  "_token" => "ZMyuEaT3SJpdwo7toCUA95zNxjSfzDn9G6xSm7G0"
  "title" => "ujykuyl"
  "type" => "color"
  "vals" => "fgj"
  "sku" => "gj"
  "price" => "47"
  "color" => "547457"
]

这是它应该是：

array:7 [▼
  "_token" => "ZMyuEaT3SJpdwo7toCUA95zNxjSfzDn9G6xSm7G0"
  "title" => "ujykuyl"
  "type" => "color"
  "vals" => array:2 [▼
    0 => "fgj"
    1 => "hstghtrh"
  ]
  "sku" => array:2 [▼
    0 => "gj"
    1 => "36457"
  ]
  "price" => array:2 [▼
    0 => "47"
    1 => "676484"
  ]
  "color" => array:2 [▼
    0 => "547457"
    1 => "537637"
  ]
]

Code

所有部件都在评论下面这样你就可以了解各个部件没有什么码。

<div id="buildyourformaddtitl">
    // title
    <div class="col-md-4 mt-20">
        {{Form::label('opttitle', 'Group Title')}}
        {{Form::text('opttitle', null, array('class' => 'form-control'))}}
    </div>
    // group type
    <div class="col-md-4 mt-20">
        {{Form::label('opttype', 'Group Type')}}
        <select name="opttype" id="opttype" class="form-control">
            <option value="">-- Select --</option>
            <option value="dropdown">DropDown</option>
            <option value="radio">Radio</option>
            <option value="color">Color/Texture</option>
        </select>
    </div>
</div>
<div class="col-md-4 mt-20">
    {{Form::label('addtitl', 'Add Values')}}
    <br>
    //adding value inputs to view (unlimited)
    //PS: this values must be send as array
    <input type="button" value="Add values" class="btn btn-success addtitl" id="addtitl" />

    //saving data
    <button type="button" class="optsave btn btn-danger">
        Save
    </button>
</div>

JavaScript

注：我已经作出这个数据在每个字段名称添加[]是作为数组。唯一的问题是由JavaScript让所有的人。 （目前我的JS代码只得到第一行）

<script>
    $(function(){
        // add values to view (unlimetd)
        $("#addtitl").click(function() {
            var lastField = $("#buildyourformaddtitl div:last");
            var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
            var fieldWrapper = $("<div class=\"col-md-8 mt-20\" id=\"field" + intId + "\"/>");
            fieldWrapper.data("idx", intId);
            var fName = $("<label for=\"optvals\">Value</label><input type=\"text\" name=\"optvals[]\" class=\"form-control optvals\" />");
            var fSku = $("<label for=\"optsku\">SKU</label><input type=\"text\" name=\"optsku[]\" class=\"form-control optsku\" />");
            var fPrice = $("<label for=\"optprice\">Price</label><input type=\"text\" name=\"optprice[]\" class=\"form-control optprice\" />");
            var fColor = $("<label for=\"optcolor\">Color</label><input type=\"text\" name=\"optcolor[]\" class=\"form-control optcolor\" />");
            var removeButton = $("<button type=\"button\" class=\"btn btn-danger\"><i class=\"fa fa-minus\"></i></button>");
            removeButton.click(function() {
                $(this).parent().remove();
            });
            fieldWrapper.append(fName);
            fieldWrapper.append(fSku);
            fieldWrapper.append(fPrice);
            fieldWrapper.append(fColor);
            fieldWrapper.append(removeButton);
            $("#buildyourformaddtitl").append(fieldWrapper);
        });
        // send data to controller
        $(".optsave").on("click", function(e){
            e.preventDefault();
            var form = $(this).closest('form');
            $.ajax({
              type: "post",
              url: "{{ url('admin/optionsStoreAjax') }}",
              data: {
                '_token': $('input[name=_token]').val(),
                'title': $(this).closest('form').find('#opttitle').val(),
                'type': $(this).closest('form').find('#opttype').val(),
                'vals': $(this).closest('form').find('.optvals').val(),
                'sku': $(this).closest('form').find('.optsku').val(),
                'price': $(this).closest('form').find('.optprice').val(),
                'color': $(this).closest('form').find('.optcolor').val(),
              },
              success: function (data) {
                alert(data);
              },
              error: function (data) {
                console.log('Error!', data);
              }
            });
        });
        //end sending data
    });
</script>

Question

如何让我的所有附加字段的阵列？

Answer 1

您可以使用jQuery的地图功能来做到这一点像下面，

var arrOptvals = $(this).closest('form').find('input[name="optvals[]"]').map(function (){
    return this.value; // $(this).val()
}).get();