通过相同的JS代码提交多个表单时不支持POST方法。（405）
通过相同的JS代码提交多个表单时不支持POST方法。（405）
提问于 2019-05-28 00:34:40
我在同一页面上有多个表单，这些表单是通过相同的JavaScript代码提交的。
<form class="form" id="cancelchallenge" method="POST" action="{{action('ChallengeController@cancelChallenge')}}">
<input type="hidden" name="cancel_challengeid" value="462f2e80-8012-11e9-8b02-65a0a3459d7a">
<button type="button" class="btn-submit-cancelchallenge">cancel challenge</button>
</form>
<form class="form" id="cancelchallenge" method="POST" action="{{action('ChallengeController@cancelChallenge')}}">
<input type="hidden" name="cancel_challengeid" value="9b9ef9d0-8012-11e9-aa0f-95ff09733e52">
<button type="button" class="btn-submit-cancelchallenge">cancel challenge</button>
</form>
可以有任意数量的表单，所有表单都将为每个隐藏输入具有唯一值。
这是我的JavaScript代码
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(".btn-submit-cancelchallenge").click(function(e){e.preventDefault();
var $form = $('#cancelchallenge');
var cancel_challengeid = $("input[name=cancel_challengeid]").val();
$.ajax({
type:'POST',
url: $form.attr('action'),
data:{cancel_challengeid:cancel_challengeid},
success:function(data){
if(data.successful) {
toastr.success(data.successful);
}
}
});
});
如果我使用上面的代码提交任何给定的表单它可以工作，但它总是只提交输入值 - 从第一个表单 - 无论我提交哪种表单。
好的所以我意识到我不应该以多种形式使用相同的ID，所以我将表单ID从： id =“cancelchallenge”更改为class =“cancelchallenge” ，然后从以下位置更新JS代码： var $ form = $（' #cancelchallenge'）; 到var $ form = $（this）; 认为这将允许提交具有正确输入值的任何给定表单。但是现在这会导致405错误。 “此路由不支持POST方法。支持的方法：GET，HEAD。”
我的路线看起来像这样：
Route::post('cancelChallenge', 'ChallengeController@cancelChallenge');
简单地说我的控制器看起来像这样：
public function cancelChallenge(Request $request)
{
//Some validation
$challenge = Challenge::where(['id' => $request->cancel_challengeid,
'player1' => Auth::user()->id])->first();
//DB::beginTransaction();
//Update a row in the challenges table
//Insert a row into the transactions table
//Update a row in the users table
//Commit transaction
}
有人能指出我正确的方向吗？谢谢。
回答 1
Stack Overflow用户
发布于 2019-05-28 10:29:10
$（this） - 当前元素。
el.parent（） - 元素的父元素。
el.find（） - 在元素中找到选择器。
$('.btn-submit-cancelchallenge').click(function(e){
e.preventDefault();
let $form = $(this).parent();
let cancel_challengeid = $form.find('input[name=cancel_challengeid]').val();
$.ajax({
type:'POST',
url: $form.attr('action'),
data: {cancel_challengeid: cancel_challengeid},
success:function(data){
if(data.successful) {
toastr.success(data.successful);
}
}
});
});
或更好：
$('.btn-submit-cancelchallenge').click(function(e){
e.preventDefault();
let form = $(this).parent();
$.ajax({
type:'POST',
url: form.attr('action'),
data: form.serialize(),
success:function(data){
if(data.successful) {
toastr.success(data.successful);
}
}
});
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100009059
复制相关文章
相似问题