將動態 html 表單數據保存到表格 (Laravel 5.2)

Question

我創建了一個動態表單來提供報價，但我不知道如何解決將數據保存到數據庫的問題。 我正在使用 Laravel 5.2，現在我需要制作一個模型和控制器......有人可以幫我嗎？

如何將其保存到數據庫表中？

我也願意接受提示和技巧，也許可以以不同的方式完成？

這是現場形式
JSFiddle

<div>
<h1>Angebot</h1>
<form method="POST" action="" accept-charset="UTF-8">
<table id="t1">
    <tr>
        <th><button type="button" class="addRow">Personal hinzuf&uuml;gen</button></th>
        <th>Anzahl</th>
        <th>Preis pro Stunde</th>
        <th>Stunden</th>
        <th>Total</th>
    </tr>
    <tr id="row0" class="item">
        <td><select name="personal" class="select"><optgroup label="Personal">
            <option selected="true" disabled="true" style="display:none">--ausw&auml;hlen</option>
            <option value="koeche">K&ouml;che</option>
            <option value="barkeeper">Barkeeper</option>
            <option value="garderobiere">Garderobiere</option>
            <option value="chauffeure">Chauffeure</option>
            <option value="oberkellner">Oberkellner</option>
            <option value="serviceleitung">Serviceleitung</option>
            <option value="hilfskoch">Hilfskoch</option>
            <option value="servicekraefte">Servicekr&auml;fte</option>
            </optgroup>
            </select></td>
        <td><input name="anzahl" class="qnty amount" value="" type="number" min="0" step="1"/></td>
        <td><input name="preisps" class="price amount" value="" /></td>
        <td><input name="stunden" class="hours amount" value="" /></td>
        <td><input name="total" class="total" value="" readonly="readonly" /></td>
    </tr>
</table>

<br />

<table id="t2">
  <tr>
    <th>Netto =<br></th>
    <th><input id="netto" readonly="readonly" name="netto" type="text" value=""></th>
  </tr>
  <tr>
    <td>Steuer 19% =<br></td>
    <td><input id="steuer" readonly="readonly" name="steuer" type="text" value=""></td>
  </tr>
  <tr>
    <td>Brutto =<br></td>
    <td><input id="brutto" readonly="readonly" name="brutto" type="text" value=""></td>
  </tr>
</table>
    <br>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
  </form>
</div>

這是javascript代碼

// main function when page is opened
    $(document).ready(function () {
        // function for adding a new row
        var r = 0;
        if(r<11){
            $('.addRow').click(function () {
                r++;
                $('#t1').append('<tr id="row' + r + '" class="item"><td><select name="personal' + r + '" class="select"><optgroup label="Personal"><option selected="true" disabled="true" style="display:none">--ausw&auml;hlen</option><option value="koeche">K&ouml;che</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekraefte">Servicekr&auml;fte</option></optgroup></select></td><td><input name="anzahl' + r + '" class="qnty amount" value="" type="number" min="0" step="1"/></td><td><input name="preisps' + r + '" class="price amount" value="" /></td><td><input name="stunden' + r + '" class="hours amount" value="" /></td><td><input name="total' + r + '" class="total" value="" readonly="readonly" /></td><td><button type="button" name="remove" id="' + r + '" class="btn_remove">X</button></td></tr>');
            });
            // remove row when X is clicked
            $(document).on("click", ".btn_remove", function () {
                var button_id = $(this).attr("id");
                $("#row" + button_id + '').remove();
            });

            // calculate everything
            $(document).on("keyup", ".amount", calcAll);
        }
    });

    // function for calculating everything
    function calcAll(event) {
        // calculate total for one row
          $(".item").each(function () {
            var qnty = 1;
            var price = 1;
            var hours = 1;
            var total = 1;
            if (!isNaN(parseFloat($(this).find(".qnty").val()))) {
                qnty = parseFloat($(this).find(".qnty").val());
            }
            if (!isNaN(parseFloat($(this).find(".price").val()))) {
                price = parseFloat($(this).find(".price").val());
            }
            if (!isNaN(parseFloat($(this).find(".hours").val()))) {
                hours = parseFloat($(this).find(".hours").val());
            }
            total = qnty * price * hours;
            $(this).find(".total").val(total.toFixed(2));
        });


        // sum all totals
        var sum = 0;
        $(".total").each(function () {
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
            }
        });

        // show values in netto, steuer, brutto fields
        $("#netto").val(sum.toFixed(2));
        $("#steuer").val(parseFloat(sum * 0.19).toFixed(2));
        $("#brutto").val(parseFloat(sum + parseFloat(($("#steuer").val()))).toFixed(2));

    }

    // replace , with . and block writing letters
    $.fn.ForceNumericOnly = function() {
            return this.each(function() {
          if($(this).data('forceNumericOnly')){ return; }
          $(this).data('forceNumericOnly', true);
                $(this).keydown(function(e) {
                    if(e.keyCode==188 || e.keyCode==110 || e.keyCode==108){
                        e.preventDefault(); 
                        $(this).val($(this).val() + '.');
                    }
                        var key = e.charCode || e.keyCode || 0;
                        return (key == 8 || key == 9 || key == 46 || key == 110 || key == 188 || key == 190 || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));                
                });
            });
    };
    // execute function on element focus
    $(document).on('focus', '.amount', function(){
        $(this).ForceNumericOnly();
    });

Answer 1

對於第一個問題

1）您在錯誤的位置為行限制添加了“r”變量，因此添加如下

 var r = 1; 
 $('.addRow').click(function () {
  if(r<10)
       {  
        r++;
        $('#t1').append('<tr id="row' + r + '" class="item"><td><select name="personal' + r + '" class="select"><optgroup label="Personal"><option selected="true" disabled="true" style="display:none">--ausw&auml;hlen</option><option value="koeche">K&ouml;che</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekraefte">Servicekr&auml;fte</option></optgroup></select></td><td><input name="anzahl' + r + '" class="qnty amount" value="" type="number" min="0" step="1"/></td><td><input name="preisps' + r + '" class="price amount" value="" /></td><td><input name="stunden' + r + '" class="hours amount" value="" /></td><td><input name="total' + r + '" class="total" value="" readonly="readonly" /></td><td><button type="button" name="remove" id="' + r + '" class="btn_remove">X</button></td></tr>');
        }
    });

    // remove row when X is clicked
    $(document).on("click", ".btn_remove", function () {
        r--;
        var button_id = $(this).attr("id");
            $("#row" + button_id + '').remove();
        });

上述更改后，您將只在表中添加 10 行。

2）問題您需要從創建的表結構中創建一個 json 並通過 ajax 在服務器端傳遞該 json 並在服務器端解析您的 json 並將該信息存儲在數據庫中。

從表設計看起來它將是 2 個表，一個表有主信息，另一個表有詳細信息。

如果您需要示例代碼，請告訴我。