將html表單元素作為參數傳遞給php函數

Question

我正在嘗試計算利潤，當用戶輸入其他詳細信息時將動態顯示利潤。 但無法理解如何將輸入准確傳遞給php函數，然后將其寫回到表單元素。 這是我到目前為止所做的。

<form action="invoice.php" method="get">
    <input class="form-field" type="date" name="date" value="" placeholder="Date" id="date">
    <input class="form-field" type="text" name="product_name" value=""placeholder="Product Name" id="product_name">
    <input class="form-field" type="text" name="units" value="" placeholder="Product Unit" id="product_unit">
    <input class="form-field" type="text" name="wholesale_price" value="" placeholder="Whole Sale Price" id="wholesale_price">
    <input class="form-field" type="text" name="sell_price" value="" placeholder="Sell Price" id="sell_price">
    <input class="form-field" type="text" name="" value="" placeholder="Profit" id="profit">
    <script>
        var units = parseFloat(document.getElementById("product_units"));
        var wholesale_price = parseFloat(document.getElementById("wholesale_price"));
        var sell_price = parseFloat(document.getElementById("sell_price"));
        document.getElementById("profit").value = profit_calculation(units, wholesale_price, sell_price);
        function profit_calculation(units, wholesale_price, sell_price) {
            return (units * sell_price) - (units * wholesale_price);
        }
    </script>
</form>

和invoice.php，

<?php
$unit = $_GET["units"];
$wholesale = $_GET["wholesale_price"];
$sell = $_GET["sell_price"];

function invoice_profit($units, $wholesale, $sell) {
    return ($unit * $sell) - ($unit * $wholesale);
}

echo "Invoice #0001";
echo "<table border='1' align='center'>";
echo "<tr>";
echo "<td>" . $_GET["date"] . "</td>";
echo "<td>" . $_GET["product_name"] . "</td>";
echo "<td>" . $_GET["units"] . "</td>";
echo "<td>" . $_GET["wholesale_price"] . "</td>";
echo "<td>" . $_GET["sell_price"] . "</td>";
echo "<td>" . invoice_profit($units, $wholesale, $sell) . "</td>";
echo "</tr>";
echo "</table>"
?>

因此，基本上，單位，批發價格和賣方價格將傳遞給php函數，利潤將被計算並寫回各自的表單ID。 請幫忙。

Answer 1

您將需要ajax將發票從服務器發送回客戶端。 請詳細了解有關ajax和jquery的谷歌搜索..的教程，您將獲得成千上萬個。

<script src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
<form>
    <input class="form-field" type="date" name="date" value="" placeholder="Date" id="date">
    <input class="form-field" type="text" name="product_name" value="" placeholder="Product Name" id="product_name">
    <input class="form-field" type="text" name="units" value="" placeholder="Product Unit" id="product_unit">
    <input class="form-field" type="text" name="wholesale_price" value="" placeholder="Whole Sale Price" id="wholesale_price">
    <input class="form-field" type="text" name="sell_price" value="" placeholder="Sell Price" id="sell_price">
    <input class="form-field" type="text" name=""  placeholder="Profit" id="profit">
    <button type="submit" formmethod="POST"> Calculate Profit</button>
</form>
<div id="invoice"></div>
<script>
    $('document').ready(function(){

            $('button').on('click',function(event){

                event.preventDefault();

        var units= $("#product_unit").val();
        var wholesale_price=$("#wholesale_price").val();
        var sell_price=$("#sell_price").val();

            var profit = (units*sell_price)-(units*wholesale_price);

                $('#profit').val(profit);


                var data = $('form').serialize();

                $.ajax({

                    type : "POST",
                    data : data,
                    url : "invoice.php",
                    dataType : "html",
                    success : function(response){

                        $('#invoice').html(response);
                    },

                    error : function(obj){

                        console.log(obj);
                    }

                });

            });
    });
</script>

invoice.php

<?php
$unit      = $_POST["units"];
$wholesale = $_POST["wholesale_price"];
$sell      = $_POST["sell_price"];


function invoice_profit($units, $wholesale, $sell)
{
    return ($units * $sell) - ($units * $wholesale);
}

echo "Invoice #0001";
echo "<table border='1' align='center'>";
echo "<tr>";
echo "<td>" . $_POST["date"] . "</td>";
echo "<td>" . $_POST["product_name"] . "</td>";
echo "<td>" . $_POST["units"] . "</td>";
echo "<td>" . $_POST["wholesale_price"] . "</td>";
echo "<td>" . $_POST["sell_price"] . "</td>";
echo "<td>" . invoice_profit($unit, $wholesale, $sell) . "</td>";
echo "</tr>";
echo "</table>";
?>

結果：

然后，您將不得不根據您的設計來設計桌子的樣式

Answer 2

您必須首先選擇要在哪里工作。 它可以在服務器或瀏覽器上。 您已經創建了兩個函數，這些函數在PHP和JS中返回答案。 PHP中的一個在代碼中有一個小錯誤。 您放置了$ unit而不是$ units

$units     = $_GET["units"];
$wholesale = $_GET["wholesale_price"];
$sell      = $_GET["sell_price"];

function invoice_profit($units, $wholesale, $sell) { // old code: $unit
   return ($units * $sell)-($units * $wholesale); // old code: $unit    
}

但這需要提交表格以計算利潤。 另一種方法是僅使用JS。 為此，您將需要HTML中的id和以下元素：

echo "<td><input type=\"text\" id=\"the_profit\" value=\"".invoice_profit($units, $wholesale, $sell).."\"></td>";

然后，JS將以這種方式更改：

function profit_calculation(){
  var units= parseFloat(document.getElementById("product_units"));
  var wholesale_price=parseFloat(document.getElementById("wholesale_price"));
  var sell_price=parseFloat(document.getElementById("sell_price"));
  document.getElementById('the_profit').value = (units*sell_price)-(units*wholesale_price);     
}

現在進行計算，我們需要在某個地方調用JS函數。 如果您希望每次更改都可以重新計算利潤，則可以對每個表單字段執行以下操作 ：

   <input class="form-field" type="date" name="date"
          value="" placeholder="Date" id="date"
          onchange="return profit_calculation();">

注意，變量現在是函數的局部變量，每次更改都會從表單中獲取數據。 但是在JS和PHP中，您還必須檢查數據是否也有效。 如果您不這樣做，JS可以給您NaN或undefined，因此我給出的答案還有很多事情要做。

希望能有所幫助，

B.