цикл foreach с javascript in laravel

Question

Пожалуйста, помогите мне

, как ввести sql базу данных в 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--;
})

});

как ввести sql базу данных в javascript при добавлении новых полей в базу данных не читается

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

foreach в html не может быть объявлен javascript, как может читать foreach в html javascript

Answer 1

Вы не можете использовать шаблоны лезвий в JS файлах.

Теперь у вас есть 2 вещи, которые вы можете сделать :

1. Переместите ваш фрагмент javascript из файла js в конец "view.blade. php"
2. Вы можете объявить в "view.blade. php" переменные которые содержат параметры, а затем получают его из javascript.

Например:

Ваш "view.blade. php" будет:

<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>

И тогда ваш файл 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 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--;
    });
});

Очевидно, убедитесь, что фрагмент в view.blade. php предшествует перед из включая ваш javascript, в противном случае вы получите неопределенное значение от javascript.