'Creating Combinations of Elements

I want to create product option system. I have a form look like this:

[![Sample image][2]][2]
(source: resmim.net)

Form's inputs are tag inputs. First input is option name. When you put any option name the new tag input added in the form.

My problem:

I can't create combinations in controller because the inputs name an quantity will be random.

Current Code:

I found this code but i cant customize it for my system

First inputs code id:

when i post data goes to controller post it another blade. i incude this in my page

In controller

 public function sendd(Request $request){
    $a = $request['data'];

    return view ('system.modules.variations', compact('a'));
}

In another blade

@if(!empty($a))
@foreach($a as $b)
    <label class="sr-only" for="{{$b}}"></label>
    <input type="text" class="form-control" placeholder="{{$b}}" name="{{$b}}" data-role="tagsinput" id="{{$b}}"/></br>
@endforeach

@endif

if will create new tag inputs which i can add the variations eg : Red, Blue

after i send form to another controller

 $(".btn-submit").click(function(e){

        e.preventDefault();

        $.ajax({

            type:'POST',

            url:'/mauuu',

            data: $("#addpro").serialize(),

            success:function(){
                
            }
        });
        
    });

I send data like this but i can't create combinations:

[![][1]][1]
(source: [resmim.net][3])

Okey I adding my all codes

This is my blade form

<form class="floating-labels m-t-40" id="addpro">
                                {{csrf_field()}}
                                <div class="form-group m-b-40">
                                    <input type="text" class="form-control" name="title" id="title" required>
                                    <span class="bar"></span>
                                    <label for="title">Title</label>
                                </div>
                                <div class="form-group m-b-5">
                                    <textarea class="form-control" rows="4"  name="description" id="description" required></textarea>
                                    <span class="bar"></span>
                                    <label for="description">Description</label>
                                </div>
                                <div class="form-group m-b-40">
                                    <textarea class="form-control" rows="4" name="bullet" id="bullet" required></textarea>
                                    <span class="bar"></span>
                                    <label for="bullet">Box</label>
                                </div>
                                <div class="form-group m-b-40">
                                    <a onclick="myFunction()" class="btn btn-outline-info btn-small" id="btn-x">Add variations</a>
                                </div>
                                <div id="options" style="display:none;">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group m-b-40">
                                                <input type="text" class="form-control" name="sku" id="sku" required>
                                                <span class="bar"></span>
                                                <label for="sku">Sku</label>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group m-b-40">
                                                <input type="text" class="form-control" name="price" id="price" required>
                                                <span class="bar"></span>
                                                <label for="price">Price</label>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group m-b-40">
                                                <input type="text" class="form-control" name="barcode" id="barcode" required>
                                                <span class="bar"></span>
                                                <label for="barcode">Barcode</label>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group m-b-40">
                                                <input type="text" class="form-control" name="rprice" id="rprice" required>
                                                <span class="bar"></span>
                                                <label for="rprice">Refence Price</label>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group m-b-40">

                                                <input type="text" class="form-control" name="option" data-role="tagsinput" id="option"/>


                                            </div>
                                        </div>
                                        <div class="col-md-12 asd">
                                            @include('system.modules.variations')
                                        </div>
                                    </div>
                                </div>
                                <button class="btn btn-success btn-submit">Submit</button>
                                <div class="col-md-12">
                                    @include('system.modules.variants')
                                </div>
                            </form>

and ajax post

       <script>
    $('#option').change(function(){
    var data = $('#option').tagsinput('items');

        $.ajax({

            type:'POST',

            url:'/mauu',

            data:{ _token: '{{ csrf_token() }}', data:data},

            success:function(returnedHtml){
                $(".asd").html(returnedHtml);

            }

        });
    });
</script>
<script>
    $(".btn-submit").click(function(e){

        e.preventDefault();

        $.ajax({

            type:'POST',

            url:'/mauuu',

            data: $("#addpro").serialize(),

            success:function(){

            }
        });

    });


</script>

this is the variations blade

    @if(!empty($a))
@foreach($a as $b)
    <label class="sr-only" for="{{$b}}"></label>
    <input type="text" class="form-control" placeholder="{{$b}}" name="{{$b}}" data-role="tagsinput" id="{{$b}}"/></br>
@endforeach
    @endif

And this is my controller

 public function sendd(Request $request){
    $a = $request['data'];

    return view ('system.modules.variations', compact('a'));
}

public function sent(Request $request){

  foreach ($request as $req ){
      $option = explode(',', $request['option']);

      $inputs = explode(',', $request->$option); // eg ['Color','Size']
      dd($inputs);
  }

Submit button's function is sent [1]: https://i.stack.imgur.com/41o1Z.jpg [2]: https://i.stack.imgur.com/i8oW5.jpg [3]: https://web.archive.org/web/20190718012105/https://resmim.net/f/NffcWv.jpg



Solution 1:[1]

You would need to have a fixed input which represents the other inputs.

For example inputs then using the input names given in inputs field (in your example they are Color and Size) you can adjust your current code to use them. For example to get you started:

$inputs = explode(',', $request->input('inputs', '')); // eg ['Color','Size']

// now foreach input in inputs, create new input controls combinations
$props = [];
foreach($inputs as $input)
{
    $input_key = strtolower($input);
    if ( !$request->has($input_key) ) continue;
    $input_values = explode(',', $request->input($input_key));
    $props[$input_key] = $input_values;
}
$combinations = make_combinations($props); // NOTE this is destructive, it will destroy the current $props array, copy it if you need it
// now you can handle the combinations as you want

Then have a utility recursive function make_combinations() (you can make it a controller method if you need to and call as $this->make_combinations($props) also update below code from make_combinations(..) to $this->make_combinations(..) ) for example:

// adjust this function to return the information you need
// right now it returns only the names of the combinations
// adjust or add comment on having more information, eg price
function make_combinations($props)
{
    if ( empty($props) ) return [];
    $keys = array_keys($props);
    $key = $keys[0];
    $values = $props[$key];
    unset($props[$key]);  // this prop is being processed, remove it
    $rest =  make_combinations($props); // process the rest
    if ( empty($values) ) return $rest;
    if ( empty($rest) ) return $values;
    $combinations = []
    foreach($rest as $comb)
    {
        foreach($values as $value)
        {
           $combinations[] = $value . '-' . $comb;
        }
    }
    return $combinations;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1