需要帮助在laravel中显示我的jquery动态字段和自动完成计算

Question

我目前正在使用jquery开发动态字段，jquery将对项目进行计算，并在填充所有输入参数后立即显示其总结果。

问题是代码总量计算、添加新字段和删除btn当我将其与@extendlayout(''(一起使用时停止工作，但当我不使用时工作。此外，我认为重要的是，我注意到，当我将代码放入目标表单并单击创建新字段或删除按钮时，它是在尝试提交表单，而不是创建和删除新字段。

目的是将它包含在我目前正在处理的表单中，并将输入和总结果发送到我的数据库中，但我需要它首先完成这项工作。

$(function() {
function autoCalcSetup() {
$('div#cart').jAutoCalc('destroy');
$('div#cart tr.line_items').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('div#cart').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();

$('button.row-remove').on("click", function(e) {
e.preventDefault();
var form = $(this).parents('div')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button.row-add').on("click", function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr.line_items').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jautocalc@1.3.1/dist/jautocalc.js"></script>
<div id="cart">
<table name="cart">
<tr>
<th></th>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>&nbsp;</th>
<th>Item Total</th>
</tr>
<tr class="line_items">
<td><button class="row-remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" name="qty" value="1"></td>
<td><input type="text" name="price" value="9.99"></td>
<td>&nbsp;</td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr class="line_items">
<td><button class="remove">Remove</button></td>
<td>more item</td>
<td><input type="text" name="qty" value="2"></td>
<td><input type="text" name="price" value="12.50"></td>
<td>&nbsp;</td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr class="line_items">
<td><button class="remove">Remove</button></td>
<td>more item</td>
<td><input type="text" name="qty" value="3"></td>
<td><input type="text" name="price" value="99.99"></td>
<td>&nbsp;</td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
<td>Subtotal</td>
<td>&nbsp;</td>
<td><input type="text" name="sub_total" value="" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
<td>
Tax:
<select name="tax" type='hidden'>
<option value=".06">CT Tax</option>
<option selected value=".00">Tax Free</option>
</select>
</td>
<td>&nbsp;</td>
<td><input type="text" name="tax_total" value="" jAutoCalc="{sub_total} * {tax}"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
<td>Total</td>
<td>&nbsp;</td>
<td><input type="text" name="grand_total" value="" jAutoCalc="{sub_total} + {tax_total}"></td>
</tr>
<tr>
<td colspan="99"><button class="row-add">Add Row</button></td>
</tr>
</table>
</div>

//the form i want to integrate it on is below
@extends('layouts.admin')
@section('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jautocalc@1.3.1/dist/jautocalc.js"></script>
<div class="block bg-warning ">
<h1 class="lead p-3 container">Expense Requests Form</h1></div>
@include('inc.messages')
<div class="container">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">

<form action='{{url('posts')}}' method='POST'>
@csrf


<div class="form-group"style="margin-top:20px;">
<label for="exampleSelectRounded0">SUBJECT</label>
<input type="text" class="form-control" rows="5" placeholder="Enter ..."name="subject" value={{old('subject')}}>
</div>

<div> <label for="exampleSelectRounded0" style="margin-top:10px;">DRIVERS DETAILS</label><h6>Drivers Name</h6>

<select class="custom-select rounded-0" id="senders_name" name="drivers_name">
@foreach ($staffs as $staff )
<option  value="{{ $staff->id }}" {{ old('') == "" ? 'selected' : '' }}>{{ $staff->senders_name }}</option>
@endforeach


</select>
</div>
<div style="margin-top:10px;">
<h6>Drivers Phone Number</h6>
<select class="custom-select rounded-0" id="exampleSelectRounded0" name="drivers_phone_number">

@foreach ($staffs as $staff )
<option  value="{{ $staff->id }}" {{ old('') == "" ? 'selected' : '' }}>{{ $staff->senders_number }}</option>
@endforeach


</select>
</div>
<div class="form-group">
<label for="exampleSelectRounded0" style="margin-top:25px;">VEHICLE DETAILS</label>
<h6>Vehicle Name</h6>
<select class="custom-select rounded-0" id="exampleSelectRounded0" name="vehicle_name">
@foreach ($vehicles as $vehicle )
<option  value="{{ $vehicle->id }}" {{ old('') == "" ? 'selected' : '' }}>{{ $vehicle->vehicle_name }}</option>
@endforeach

</select> 
</div>
<div><h6>Vehicle Number</h6>
<select class="custom-select rounded-0" id="exampleSelectRounded0" name="vehicle_number">

<option  value="" {{ old('---select your vehicle name---') == "---select your vehicle name---" ? 'selected' : '---select your vehicle name---' }}>---select your vehicle name---</option>

@foreach ($vehicles as $vehicle )
<option  value="{{ $vehicle->id }}" {{ old('') == "" ? 'selected' : '' }}>{{ $vehicle->vehicle_number }}</option>
@endforeach

</select> 
</div>

<div>
<label for="exampleSelectRounded0" style="margin-top:25px;">REPAIR DESCRIPTION</label><h6>Repair Type</h6>
<select class="custom-select rounded-0" id="exampleSelectRounded0" name="repair_type">
<option  value="" {{ old('') == "" ? 'selected' : '' }}></option>
<option  value="Replacement" {{ old('repair_type') == "Replacement" ? 'selected' : '' }}>Replacement</option>
<option  value="To Be Fixed" {{ old('repair_type') == "To Be Fixed" ? 'selected' : '' }}>To Be Fixed</option>
</select>
</div>
<div class="form-group"style="margin-top:20px;">
<h6>Repair Parts and Prices(₦)</h6>
<input type="text" class="form-control" rows="5" placeholder="Enter ..."name="repair_with_price" value={{old('repair_with_price')}}>
</div>
<div class="form-group"style="margin-top:20px;">
<h6>Total Repairs(₦)</h6>
<input type="text" class="form-control" rows="5" name="total_repair" value={{ old('total_repair') }}>
</div>

/* THE JQUERY DYNAMIC FORM START HERE*/
<div id="cart">
<table name="cart">
<tr>
<th></th>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>&nbsp;</th>
<th>Item Total</th>
</tr>
<tr class="line_items">
<td><button class="row-remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" name="qty" value="1"></td>
<td><input type="text" name="price" value="9.99"></td>
<td>&nbsp;</td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr class="line_items">
<td><button class="remove">Remove</button></td>
<td>more item</td>
<td><input type="text" name="qty" value="2"></td>
<td><input type="text" name="price" value="12.50"></td>
<td>&nbsp;</td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr class="line_items">
<td><button class="remove">Remove</button></td>
<td>more item</td>
<td><input type="text" name="qty" value="3"></td>
<td><input type="text" name="price" value="99.99"></td>
<td>&nbsp;</td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
<td>Subtotal</td>
<td>&nbsp;</td>
<td><input type="text" name="sub_total" value="" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
<td>
Tax:
<select name="tax" type='hidden'>
<option value=".06">CT Tax</option>
<option selected value=".00">Tax Free</option>
</select>
</td>
<td>&nbsp;</td>
<td><input type="text" name="tax_total" value="" jAutoCalc="{sub_total} * {tax}"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
<td>Total</td>
<td>&nbsp;</td>
<td><input type="text" name="grand_total" value="" jAutoCalc="{sub_total} + {tax_total}"></td>
</tr>
<tr>
<td colspan="99"><button class="row-add">Add Row</button></td>
</tr>
</table>
</div>

<div>
<label for="exampleSelectRounded0" style="margin-top:15px;">REPAIR VENDOR DETAILS</label><h6>Vendor's Name</h6>
<select class="custom-select rounded-0" id="exampleSelectRounded0" name="vendor_name">
@foreach ($vendors as $vendor )
<option  value="{{ $vendor->id }}" {{ old('') == "" ? 'selected' : '' }}>{{ $vendor->vendors_name }}</option>
@endforeach


</select>
</div>
<div style="margin-top:10px;"><h6>Vendor's Phone Number</h6>
<select class="custom-select rounded-0" id="exampleSelectRounded0" name="vendor_phone">
@foreach ($vendors as $vendor )
<option  value="{{ $vendor->id }}" {{ old('') == "" ? 'selected' : '' }}>{{ $vendor->vendors_phone_number }}</option>
@endforeach
{{-- <option  value="" {{ old('') == "" ? 'selected' : '' }}></option>
<option  value="vendor phone 1" {{ old('vendor_phone') == "vendor phone 1" ? 'selected' : '' }}>vendor phone 1</option>
<option  value="vendor phone 2" {{ old('vendor_phone') == "vendor phone 2" ? 'selected' : '' }}>vendor phone 2</option>--}}
</select> 
</div>
<input type="hidden" name="status_value" 
id="inputID" value='1' >
<input type="hidden" name="status_option" 
id="inputID" value="Under Review" >



<div class="form-group"style="margin-top:25px;">
<label>NATURE OF FAULT</label>
<textarea class="form-control" rows="5" placeholder="Enter ..." name="nature_of_fault">{{old('nature_of_fault')}}</textarea>
<div class="form-group"style="margin-top:25px;">
<label>JUSTIFICATION</label>
<textarea class="form-control" rows="5" placeholder="Enter ..." name="justification" >{{old('justification')}}</textarea>
</div>



<button class="form-control btn btn-primary" style="margin-bottom:100px;" rows="5" type="submit" placeholder="Enter ...">Enter</button>
</div>

<script type="text/javascript">

$(function() {
function autoCalcSetup() {
$('div#cart').jAutoCalc('destroy');
$('div#cart tr.line_items').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('div#cart').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();

$('#cart tbody').on("click", "button.row-remove", function(e) {
e.preventDefault();
$(this).closest('tr').remove();
autoCalcSetup();
});
$('#cart tbody').on("click", 'button.row-add', function(e) {
e.preventDefault();
var $table = $(this).closest('tbody');
var $top = $table.find('tr.line_items').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
});
//-->
</script>
</div>
</form>
@endsection

Answer 1

您没有正确委派

这是一个改进的版本，具有有效的HTML

此外，表没有名称属性

$(function() {
function autoCalcSetup() {
$('div#cart').jAutoCalc('destroy');
$('div#cart tr.line_items').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('div#cart').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();

$('#cart tbody').on("click", "button.row-remove", function(e) {
e.preventDefault();
$(this).closest('tr').remove();
autoCalcSetup();
});
$('#cart tbody').on("click", 'button.row-add', function(e) {
e.preventDefault();
var $table = $(this).closest('tbody');
var $top = $table.find('tr.line_items').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jautocalc@1.3.1/dist/jautocalc.js"></script>
<div id="cart">
<table>
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>&nbsp;</th>
<th>Item Total</th>
</tr>
</thead>
<tbody>
<tr class="line_items">
<td><button class="row-remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" name="qty" value="1"></td>
<td><input type="text" name="price" value="9.99"></td>
<td>&nbsp;</td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr class="line_items">
<td><button class="remove">Remove</button></td>
<td>more item</td>
<td><input type="text" name="qty" value="2"></td>
<td><input type="text" name="price" value="12.50"></td>
<td>&nbsp;</td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr class="line_items">
<td><button class="remove">Remove</button></td>
<td>more item</td>
<td><input type="text" name="qty" value="3"></td>
<td><input type="text" name="price" value="99.99"></td>
<td>&nbsp;</td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
<td>Subtotal</td>
<td>&nbsp;</td>
<td><input type="text" name="sub_total" value="" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
<td>
Tax:
<select name="tax" type='hidden'>
<option value=".06">CT Tax</option>
<option selected value=".00">Tax Free</option>
</select>
</td>
<td>&nbsp;</td>
<td><input type="text" name="tax_total" value="" jAutoCalc="{sub_total} * {tax}"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
<td>Total</td>
<td>&nbsp;</td>
<td><input type="text" name="grand_total" value="" jAutoCalc="{sub_total} + {tax_total}"></td>
</tr>
<tr>
<td colspan="99"><button class="row-add">Add Row</button></td>
</tr>
</tbody>
</table>
</div>