为什么这些几乎相同的 HTML 表单中只有一个对提交按钮点击有反应？

Question

我有两个几乎相同的表格。一个用于编辑项目，另一个用于创建项目。出于某种原因，创建表单根本不会对提交按钮点击做出反应，而 edit/update 表单完全按预期工作。我找不到导致此行为的两者之间的任何区别。

我确信这与后端无关。我已监控网络 activity，创建表单的提交按钮根本不会激活任何类型的网络 activity。

工作更新表：

@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

无响应的创建表单：

@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> 您启动并关闭它的原因。

为什么这些几乎相同的 HTML 表单中只有一个对提交按钮点击有反应？

Why is only one of these almost identical HTML-forms reacting to submit button click?

forms

form-submit

laravel