Dynamically add dropdown box in laravel. Javascript and laravel

Question

I want to add dynamic dropdown & textbox. But for textbox is ok. I am not ok in dropdown. The Data are not include in Dropdown.I am loop to retrieve data in blade.I am describe my code.

form.blade.php

 <div class="form-group">
                <label for="type">Gas Container Type</label>
                <select class="form-control input-sm" name="gas" id="gas">
                    @foreach($gass as $gas)
                        <option value="{{$gas->name}}">{{$gas->name}}</option>
                    @endforeach


                </select><!-- end of Item_Drop_Down -->
            </div>
            <input name="name[]" type="text" id="name" class="name" placeholder="Input 1">
            <a href="#" id="add">Add More Input Field</a>

master.blade.php

<script>

$(document).ready(function () {
    var e = document.getElementById("gas");

    $('#add').click(function () {

        var inp = $('#box');

        var i = $('input').size() + 1;

        $('<div id="box' + i + '">' + '' +
                '<input type="text" id="name" class="name" name="name[]" placeholder="Input ' + i + '"/>' + '' +
                '<select id="gas"  name="gas[]" ' + i + '"/><img src="remove.png" width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>')
                .appendTo($('#box form'));

        i++;

    });

    {{--<select data-bind="options: availableCountries, optionsText: 'name', optionsValue: 'value'"></select>--}}

    $('body').on('click', '#remove', function () {

        $(this).parent('div').remove();


    });


});

controller.php

public function store(Request $request)
{

    foreach ($request->get('name') as $name) {
        $kg = new WarehouseGasIn();
        $kg->kg = $name;
        //dd($request->get('name'));
        $kg->save();

    }

@SanzeebAryal Do u mean I will write $gass instead of $gas? I am not trying yet!!! — Myat Htut
– Myat Htut, Commented Aug 27, 2016 at 10:01
public function index() { $shop = Shop::all(); $gas=GasContainer::all(); return view("wearehouse.firstform")->with('shops', $shop)->with('gass',$gas); } From Controller — Myat Htut
– Myat Htut, Commented Aug 28, 2016 at 0:41

Myat Htut · Accepted Answer · 2016-10-05 04:34:36Z

 <script>


        $(document).ready(function () {

            $('#add').click(function () {

                var inp = $('#box');

                var i = $('input').size() + 1 - 2;

                $('<div id=box' + i + '"><input type="text" id="name" class="name" name="name[0][]" placeholder="Input ' + i + '"/><select class="form-control input-sm" name="shop" id="shop"><option value="">{{"Shop"}}</option>@foreach($branches as $branch)<option value="{{$branch->id}}">{{$branch->name}}</option>@endforeach</select><select name="name[1][]" id="gas" ' + i + '>@foreach($gass as $gas) <option value="{{$gas->id}}">{{$gas->name}}</option>@endforeach</select><img src="remove.png" width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>').appendTo($('#box form'));


                i++;

            });


            $('body').on('click', '#remove', function () {

                $(this).parent('div').remove();


            });


        });


    </script>

Pete Gaulton · Accepted Answer · 2016-10-04 13:37:11Z

is this the sort of thing you are trying to achieve?

$(document).ready(function () {
  var boxesWrap = $('#boxes-wrap');
  var boxRow = boxesWrap.children(":first");
  var boxRowTemplate = boxRow.clone();
  boxRow.find('button.remove-gas-row').remove();
  
  // nb can't use .length for inputCount as we are dynamically removing from middle of collection
  var inputCount = 1; 

  $('#add').click(function () {
    var newRow = boxRowTemplate.clone();
    inputCount++;
    newRow.find('input.name').attr('placeholder', 'Input '+inputCount);
    boxesWrap.append(newRow);
  });  
  
  $('#boxes-wrap').on('click', 'button.remove-gas-row', function () {
  	$(this).parent().remove();
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes-wrap">
  <div>
    <div class="form-group">
      <label>Gas Container Type</label>
      <select class="form-control input-sm" name="gas[]">
        <option value="gas-1">Container 1</option>
        <option value="gas-2">Container 2</option>
      </select><!-- end of Item_Drop_Down -->
    </div>
    <input name="name[]" type="text" class="name" placeholder="Input 1"> 
    <button class="remove-gas-row" type="button">Remove</button>
  </div>
</div>

<a href="#" id="add">Add More Input Field</a>

Collectives™ on Stack Overflow

Dynamically add dropdown box in laravel. Javascript and laravel

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related