在laravel中使用javascript进行foreach循环

Posted 2023-03-14

技术标签:

【中文标题】在laravel中使用javascript进行foreach循环【英文标题】：foreach looping with javascript in laravel 【发布时间】：2020-06-17 14:26:30 【问题描述】：

请帮帮我

如何在javascript中输入sql数据库

html

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

html中的foreach不能被javascript声明，html中的foreach怎么能被javascript读取

【问题讨论】：

这是一个相当复杂的 UI，我认为 jQuery 还不够。请考虑使用 Laravel 中捆绑的 Vue.js。 【参考方案1】：

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

现在你有 2 件事可以做：

php

例如：

您的“view.blade.php”将是：

<table >
    <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 中的 sn-p 出现在包含您的 javascript 之前，否则您会从 javascript 获得未定义的。

【讨论】：

首先我想对我说声谢谢。怎么select2还有搜索功能？追加后必须重新实例化新的选择，首先从追加字符串中删除“select2”，因为这意味着选择2已经实例化，其次我建议你给例如一个类"select-new-x" 其中 x 是例如您的变量 x，然后在追加后您可以像 $('select-new-'+x).select2(); 一样重新实例化 select2，如果您想要一个示例，请告诉我 :) 我已经编辑了答案的 javascript 部分，请查看 :) 未测试，请告诉我 不懂...英文如果所有行在select2中都有搜索功能怎么办？

以上是关于在laravel中使用javascript进行foreach循环的主要内容，如果未能解决你的问题，请参考以下文章

为啥将数据从 php 发送到 javascript (Laravel) 时进行 json 编码？

单元测试 Laravel FormRequest

如何在 AJAX 调用中获取 JavaScript 变量作为 Laravel 路由名称

Laravel 时间戳格式 / JavaScript 日期

将 laravel 中的数据库值与 javascript 值进行比较

如何在 laravel 中连接两个表？