多次提交 blade 模板中的 laravel 按钮

Question

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

<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 次不同的时间。这是 blade 文件

中的相关 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);
});
});
});

多次提交 blade 模板中的 laravel 按钮

laravel button in blade template submitted multiple times

php

ajax

jquery

laravel

laravel-blade