foreach looping with javascript in laravel

Question

Please help me

how to enter sql database into javascript

HTML

<table width="100%">
<tbody class="input_fields_Pesanan">
<tr>
<td style="width: 15%;" align="center"><b>Kode BMN</b></td>
<td style="width: 15%;" align="center"><b>Nama Barang</b></td>
<td style="width: 15%;" align="center"><b>Kuantitas</b></td>
<td style="width: 15%;" align="center"><b>Satuan Ukuran</b></td>
<td style="width: 2%;"></td>

<tr>
<td><select type="text" style="width: 100%;" class="form-control select2" id="kode_bmn" name="kode_bmn" data-placeholder="--Pilih Kode BMN--">
    <option></option>

    @foreach($bmn as $b)
        <option>{{$b->kode_bmn}}-{{$b->nama_bmn}}</option>
        @endforeach
        </select></td>    
        <td><input type="text" class="form-control " id="jenis_barang" name="jenis_barang" ></td>
        <td><input type="number" min="1" class="form-control" id="kuantitas" name="kuantitas"></td>
        <td><select type="text" style="width: 100%;" class="form-control select2" id="satuan_ukuran" name="satuan_ukuran" data-placeholder="--Pilih Satuan Ukuran--">
                                <option></option>
                                <option>m</option>
                                <option>unit</option>
                                <option>kg</option>
                            </select></td>
        <td>&nbsp;<button class="add_field_pesanan" title="Tambah Field Pesanan"><i class="fas fa-plus"></i></button></td>
  </tr>
<!-- <tr><td><select type="text" style="width: 100%;" class="form-control select2" id="kode_bmn" name="kode_bmn" data-placeholder="--Pilih Kode BMN--"><option></option>@foreach($bmn as $b)<option>{{$b->kode_bmn}}-{{$b->nama_bmn}}</option>@endforeach</select></td><td><input type="text" class="form-control " id="jenis_barang" name="jenis_barang" ></td><td><input type="number" min="1" class="form-control" id="kuantitas" name="kuantitas"></td><td><select type="text" style="width: 100%;" class="form-control select2" id="satuan_ukuran" name="satuan_ukuran" data-placeholder="--Pilih Satuan Ukuran--">
<option></option><option>m</option><option>unit</option><option>kg</option></select></td><td>&nbsp;<button class="add_field_button" title="Tambah Field Pesanan"><i class="fas fa-plus"></i></button></td></tr> -->
     </tbody> 
  </table>

Javascript

$(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper_pesanan  = $(".input_fields_Pesanan"); //Fields wrapper
var add_pesanan      = $(".add_field_pesanan"); //Add button ID


var x = 1; //initlal text box count
$(add_pesanan).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper_pesanan).append('<tr><td><select type="text" style="width: 100%;" class="form-control select2" id="kode_bmn" name="kode_bmn" data-placeholder="--Pilih Kode BMN--"><option></option>@foreach($bmn as $b)<option>{{$b->kode_bmn}}-{{$b->nama_bmn}}</option>@endforeach</select></td><td><input type="text" class="form-control " id="jenis_barang" name="jenis_barang" ></td><td><input type="number" min="1" class="form-control" id="kuantitas" name="kuantitas"></td><td><select type="text" style="width: 100%;" class="form-control select2" id="satuan_ukuran" name="satuan_ukuran" data-placeholder="--Pilih Satuan Ukuran--"><option></option><option>m</option><option>unit</option><option>kg</option></select></td><td>&nbsp;&nbsp;&nbsp;<a href="#" class="remove_pesanan" title="Hapus"><i class="fas fa-trash-alt"></i></a></td></tr>'); // add input boxes.
    }
});


$(wrapper_pesanan).on("click",".remove_pesanan", function(e){
    e.preventDefault(); $(this).parent('td').parent('tr').remove(); x--;
})

});

how to enter sql database into javascript when adding new fields the database is unreadable

@foreach($bmn as $b)
        <option>{{$b->kode_bmn}}-{{$b->nama_bmn}}</option>
        @endforeach

the foreach in html cannot be declared by javascript, how can the foreach in html be read by javascript

It's a pretty complex UI, and I think jQuery couldn't enough. Please consider use Vue.js that bundled in Laravel. — tirta keniten, Commented Mar 5, 2020 at 4:55

Bacca001 · Accepted Answer · 2020-03-05 09:48:14Z

You can't use blade templating in JS files.

Now you have 2 things you can do:

Move your snippet of javascript from js file to the bottom of the "view.blade.php"
You can declare in the "view.blade.php" the variables that contain options, and then get it from javascript.

For example:

Your "view.blade.php" would be:

<table width="100%">
    <tbody class="input_fields_Pesanan">
        <tr>
            <td style="width: 15%;" align="center"><b>Kode BMN</b></td>
            <td style="width: 15%;" align="center"><b>Nama Barang</b></td>
            <td style="width: 15%;" align="center"><b>Kuantitas</b></td>
            <td style="width: 15%;" align="center"><b>Satuan Ukuran</b></td>
            <td style="width: 2%;"></td>
        <tr>
            <td>
                <select type="text" style="width: 100%;" class="form-control select2" id="kode_bmn" name="kode_bmn" data-placeholder="--Pilih Kode BMN--">
                    <option></option>
                    @foreach($bmn as $b)
                    <option>{{$b->kode_bmn}}-{{$b->nama_bmn}}</option>
                    @endforeach
                </select>
            </td>    
            <td><input type="text" class="form-control " id="jenis_barang" name="jenis_barang" ></td>
            <td><input type="number" min="1" class="form-control" id="kuantitas" name="kuantitas"></td>
            <td>
                <select type="text" style="width: 100%;" class="form-control select2" id="satuan_ukuran" name="satuan_ukuran" data-placeholder="--Pilih Satuan Ukuran--">
                    <option></option>
                    <option>m</option>
                    <option>unit</option>
                    <option>kg</option>
                </select>
            </td>
            <td>&nbsp;<button class="add_field_pesanan" title="Tambah Field Pesanan"><i class="fas fa-plus"></i></button></td>
        </tr>
    </tbody> 
</table>
<script>
    var myOptions = '@foreach($bmn as $b) <option>{{$b->kode_bmn}}-{{$b->nama_bmn}}</option> @endforeach';
</script>

And then your Javascript file would be:

$(document).ready(function() {
    var max_fields = 10; //maximum input boxes allowed
    var wrapper_pesanan = $(".input_fields_Pesanan"); //Fields wrapper
    var add_pesanan = $(".add_field_pesanan"); //Add button ID

    var x = 1; //initlal text box count
    $(add_pesanan).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper_pesanan).append('<tr><td><select type="text" style="width: 100%;" class="form-control select-new-' + x + '" id="kode_bmn" name="kode_bmn" data-placeholder="--Pilih Kode BMN--"><option></option>' + myOptions + '</select></td><td><input type="text" class="form-control " id="jenis_barang" name="jenis_barang" ></td><td><input type="number" min="1" class="form-control" id="kuantitas" name="kuantitas"></td><td><select type="text" style="width: 100%;" class="form-control select-new-' + x + '" id="satuan_ukuran" name="satuan_ukuran" data-placeholder="--Pilih Satuan Ukuran--"><option></option><option>m</option><option>unit</option><option>kg</option></select></td><td>&nbsp;&nbsp;&nbsp;<a href="#" class="remove_pesanan" title="Hapus"><i class="fas fa-trash-alt"></i></a></td></tr>'); // add input boxes.

            //instantiate the new select as select2
            $('select.select-new-' + x).select2();
        }
    });

    $(wrapper_pesanan).on("click",".remove_pesanan", function(e){
        e.preventDefault(); $(this).parent('td').parent('tr').remove(); x--;
    });
});

Obviously make sure the snippet in view.blade.php comes before of including your javascript, otherwise you get a undefined from javascript.

first I want to say thank you from me,. how to select2 still have a search function? — yooyo, Commented Mar 5, 2020 at 8:40
After you have appended you have to re-instantiate the new select, first remove "select2" from the append string because it means select2 has already instantiated, second I suggest you to give for example a class like "select-new-x" where x is for example your variable x, then after append you can re-instantiate select2 normally like $('select-new-'+x).select2(); let me know if you want a sample :) — Bacca001, Commented Mar 5, 2020 at 9:31
I have edit the javascript section of the answer, check it out :) not tested, let me know — Bacca001, Commented Mar 5, 2020 at 9:49

Collectives™ on Stack Overflow

foreach looping with javascript in laravel

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related