刀片模板中的laravel按钮多次提交

Question

我在刀片模板中有一些代码可以创建一些表单和按钮，见下文

<div class="element1">
<div class="text1">
<form action="{{ route("progressSheetDynamic") }}" method="post" id= "add">
<input name="increment" value="increment" type="hidden"> </input>
<input type="hidden" name="id" value= {{$activities}} >
<button type="submit" class="styleHover styleButton" id= {{$activities}} > + </button>
</form>

{{ $count  }} / {{  ($goal/5) }}
<form action="{{route("progressSheetDynamic") }}" method="post" id="delete">
<input type="hidden" name="delete" value="delete">
<input type="hidden" name="id" value= {{$activities}}>
<button type="submit" class="styleHover styleButton"> - </button>
</form>
</div>
</div>

我在视图文件中使用了 3 次 @include_layouts("template file") 来创建 3 次不同的按钮。当我单击一个按钮时，我希望触发一个 ajax 请求。相反，当前发生的是一个按钮单击显示为按钮单击并提交 ajax 请求 3 次不同的时间。 这是刀片文件中的相关javascript代码

$(document).ready(function(){

$('#add').click(function(e){
e.preventDefault();
var data = $(this).serialize();
$.post('progressSheetDynamic', data).done(function(response){
console.log(data);
});
});
});

我尝试了许多不同的方法，例如使用 jQuery 将按钮更改为单击后禁用，并在 jQuery 函数结束时返回 false。

但是，在每种情况下，一次点击都被解读为三个不同的点击。所以数据被记录到控制台三次。有什么办法可以让我单击一个按钮时它只注册为单击而不是单击 3？

Answer 1

您在表单点击时触发了ajax，在按钮点击时尝试一下

$(document).ready(function(){

$('.styleButton').click(function(e){
e.preventDefault();
var data = $(this).closest('form').serialize();
$.post('progressSheetDynamic', data).done(function(response){
console.log(data);
});
});
});