在laravel中使用javascript进行foreach循环_Javascript_Php_Sql_Laravel

在laravel中使用javascript进行foreach循环

javascript php sql laravel

在laravel中使用javascript进行foreach循环,javascript,php,sql,laravel,Javascript,Php,Sql,Laravel,请帮帮我如何将sql数据库输入javascript HTML 科德BMN 纳马巴朗关塔斯乌库兰佐敦酒店 @foreach（bmn为$b） {{$b->kode_bmn}-{{$b->nama_bmn} @endforeach M 单元公斤 Javascript $（文档）.ready（函数（）{ var max_fields=10；//允许的最大输入框数 var wrapper_pesanan=$（“.input_fields_pesanan”）；//字段包装器 var add

请帮帮我

如何将sql数据库输入javascript

HTML


科德BMN
纳马巴朗
关塔斯
乌库兰佐敦酒店


@foreach（bmn为$b）
{{$b->kode_bmn}-{{$b->nama_bmn}
@endforeach
M
单元
公斤

Javascript

$（文档）.ready（函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper_pesanan=$（“.input_fields_pesanan”）；//字段包装器
var add_pesanan=$（“.add_field_pesanan”）；//添加按钮ID
var x=1；//初始文本框计数
$（add_pesanan）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（xkode_bmn}}}-{{{$b->nama_bmn}}}@endforeachmunitkg'）；//添加输入框。
}
});
$（包装器）。在（“单击“，”上。删除包装器），函数（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（$bmn为$b）
{{$b->kode_bmn}-{{$b->nama_bmn}
@endforeach

html中的foreach不能由javascript声明，javascript如何读取html中的foreach

您不能在JS文件中使用刀片模板

现在您有两件事可以做：

将javascript片段从js文件移到“view.blade.php”的底部

您可以在“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>

$(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--;
    });
});


科德BMN
纳马巴朗
关塔斯
乌库兰佐敦酒店
@foreach（bmn为$b）
{{$b->kode_bmn}-{{$b->nama_bmn}
@endforeach
M
单元
公斤
var myOptions='@foreach（$bmn as$b）{{{$b->kode_bmn}}-{{$b->nama_bmn}}@endforeach'；

然后您的Javascript文件将是：

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

$(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--;
    });
});

$（文档）.ready（函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper_pesanan=$（“.input_fields_pesanan”）；//字段包装器
var add_pesanan=$（“.add_field_pesanan”）；//添加按钮ID
var x=1；//初始文本框计数
$（add_pesanan）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x


显然确保view.blade.php中的代码片段在包含javascript之前，否则会从javascript中得到一个未定义的代码。
这是一个相当复杂的UI，我认为jQuery还不够。请考虑使用VUE JS捆绑在Laravel.first，我想说谢谢你，从我。如何选择2仍然具有搜索功能？追加后，必须重新实例化新的select，首先从追加字符串中删除“select2”，因为这意味着select2已经实例化，其次我建议您给出一个类，例如“select-new-x”，其中x是变量x，然后在追加之后，您可以像$（'select-new-'+x）一样重新实例化select2如果需要示例，请告诉我：）我已经编辑了答案的javascript部分，请检查：）未测试，请告诉我不明白。。。如果select2中的所有行都有搜索功能，该怎么办？
$(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--;
    });
});