Метод POST не поддерживается при отправке нескольких форм через один и тот же код JS. (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 = "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);
            }
        }
    });
});