Laravel 将视图字段输入数据传递给控制器，然后 return 在禁用字段中计算值

Question

所以我想做的是从用户输入中获取值，然后在控制器内部使用方法进行一些计算，该方法 return 值将显示在下面的字段中，禁用属性将打开表单提交传递给数据库。所以我的观点是：

            <input class="form-control {{ $errors->has('price') ? 'is-invalid' : '' }}" type="number" name="price" id="price" value="{{ old('price', '') }}" step="0.001" required>
            <input class="form-control {{ $errors->has('quantity') ? 'is-invalid' : '' }}" type="number" name="quantity" id="quantity" value="{{ old('quantity', '') }}" step="0.001" required>
            <input class="form-control {{ $errors->has('other_expenses') ? 'is-invalid' : '' }}" type="number" name="other_expenses" id="other_expenses" value="{{ old('other_expenses', '') }}" step="0.01" required>
            <input class="form-control {{ $errors->has('coefficient') ? 'is-invalid' : '' }}" type="number" name="coefficient" id="coefficient" value="{{ old('coefficient', '') }}" step="0.001" required>
            <input class="form-control {{ $errors->has('total') ? 'is-invalid' : '' }}" type="number" name="total" id="total" value="{{ old('total', '') }}" step="0.001" disabled>

然后我想通过控制器和 return 在“总计”字段中做一些计算。所以在我的控制器中我应该接受那个 tada 然后计算类似的东西：总计 = (价格数量other_expenses)*系数

Answer 1

从您上面的代码来看，您计算所需的一切似乎都在表格中。控制器上是否发生了特定的操作？

例如，如果您打算计算的只是total = (price * quantity * other_expenses ) * coefficient，您可能不一定需要将数据发送到控制器。

您可以使用Alpine js直接在页面上进行计算。

按照以下步骤操作：

在您的布局中包含 alpine
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{
              price: parseInt( '120'), 
              quantity: parseInt( '5'), 
              other_expenses: parseInt( '50'),
              coefficient: parseInt( '2') 
            }">
    <input type="number" name="price" x-model.number="price"  />
    <input type="number" name="quantity" x-model.number="quantity" />
    <input type="number" name="other_expenses" x-model.number="other_expenses" />
    <input type="number" name="coefficient" x-model.number="coefficient" />
    <input type="text" x-bind:value="price * quantity * other_expenses * coefficient" name="total" disabled />
</div>

注意：您可以像这样传递旧值 price: parseInt( '{{ old('price') }}')

可以提交，要提交总数。

如果您必须使用控制器进行计算，您可能需要使用 ajax 和 vuejs 或 jquery。

更新：对于 ajax 实现，您可以使用 alpine 'fetch' 对后端进行 API 调用以进行任何验证。

<div x-data="{
    price: parseInt( '120'), 
    quantity: parseInt( '5'), 
    other_expenses: parseInt( '50'),
    coefficient: parseInt( '2') ,
    data: null,
    calculateTotal() {
            fetch('/calculateTotal/route/url',{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    price: this.price,
                    quantity: this.quantity,
                    other_expenses:this.other_expenses,
                    coefficient:this.coefficient
                }),
            })
            .then(response => response.json())
            .then(data => {
                    this.data = data
                    console.log(data)

            })
            .catch(error => {
                    console.log({ error })
                });
    }">
<input type="number" name="price" x-model.number="price"  @keyup.debounce.750ms="calculateTotal()"  />
<input type="number" name="quantity" x-model.number="quantity" @keyup.debounce.750ms="calculateTotal()" />
<input type="number" name="other_expenses" x-model.number="other_expenses" @keyup.debounce.750ms="calculateTotal()" />
<input type="number" name="coefficient" x-model.number="coefficient" @keyup.debounce.750ms="calculateTotal()" />

<input type="text" x-bind:value="data.total" name="total" readonly />

//Your web.php or api.php depending on where the 
Route::post('gettotal', 'ProductController@getTotal');

//Controller
public function getTotal(Request $request)
{
    $data = [
        'total' => $request->price * $request->quantity * $request->other_expenses * $request->coefficient; //You can include any validation here
    ];
    return response()->json($data)
}

Laravel 将视图字段输入数据传递给控制器，然后 return 在禁用字段中计算值

Laravel pass view field input data to controller and then return calculated value in disabled field

php

controller

view

laravel

Laravel 将视图字段输入数据传递给控制器​​，然后 return 在禁用字段中计算值

Laravel pass view field input data to controller and then return calculated value in disabled field

php

controller

view

laravel

Laravel 将视图字段输入数据传递给控制器，然后 return 在禁用字段中计算值