Почему только одна из этих почти идентичных HTML -форм реагирует на нажатие кнопки?

Question

У меня есть две почти идентичные формы. Один предназначен для редактирования элемента, а другой предназначен для создания элемента. По какой-то причине форма create вообще не реагирует на нажатия кнопок, а форма редактирования / обновления работает точно так, как ожидается. Я не могу найти каких-либо различий между ними, которые должны приводить к такому поведению.

Я настолько уверен, насколько могу, что это не имеет ничего общего с серверной частью. Я отслеживал сетевую активность, и кнопка «Отправить» для формы создания вообще не активирует какую-либо сетевую активность.

Рабочая форма обновления:

@extends ('layout')

@section('middle-content')

    <div class="wrapper">
        <div id="page" class="container">
            <h4>Edit Competition Category</h4>

            <form method="POST" action="/competition-categories/{{$competitionCategory->id}}">
                @csrf
                @method('PUT')

                <div class="form-group row">
                    <label for="competition-category-name-input" class="col-4 col-form-label">Name</label>
                    <div class="col-8">
                        <input id="competition-category-name-input" name="name" type="text" class="form-control" required="required" value="{{ $competitionCategory->name }}">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="competition-category-abbreviation-input" class="col-4 col-form-label">Abbreviation</label>
                    <div class="col-8">
                        <input id="competition-category-abbreviation-input" name="abbreviation" type="text" class="form-control" required="required" value="{{ $competitionCategory->abbreviation }}">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="offset-4 col-8">
                        <button name="submit" type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection

Не отвечающий create- форма:

@extends ('layout')

@section('middle-content')

    <div class="wrapper">
        <div id="page" class="container">
            <h4>New Competition Category</h4>

            <form method="POST" action="/competition-categories"></form>
                @csrf

                <div class="form-group row">
                    <label for="competition-category-name-input" class="col-4 col-form-label">Name</label>
                    <div class="col-8">
                        <input id="competition-category-name-input" name="name" type="text" class="form-control" required="required">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="competition-category-abbreviation-input" class="col-4 col-form-label">Abbreviation</label>
                    <div class="col-8">
                        <input id="competition-category-abbreviation-input" name="abbreviation" type="text" class="form-control" required="required">
                    </div>
                </div>
                <div class="form-group row">
                    <div class="offset-4 col-8">
                        <button name="submit" type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection

Answer 1

Эта строка: <form method="POST" action="/competition-categories"></form> вашей нерабочей формы, пожалуйста, удалите </form>, которую вы запустили и закрыли, поэтому.