通过同一JS代码提交多个表单时，不支持POST方法。 （405）

Question

我在同一页面上有多种表单是通过相同的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
    }

有人能指出我正确的方向吗？谢谢。

Answer 1

$（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);
            }
        }
    });
});