Динамически создавая таблицу внутри формы с JS, загрузит пустую страницу перед отправкой формы в Laravel бэкэнд

Question

У меня есть эта форма внутри лезвия. php файл, который содержит таблицу. Я добавляю строки в эту таблицу динамически, нажимая кнопку «Добавить», которая добавляет выбранную опцию (с функцией JS). Если я введу «Имя» в первый тег ввода, а затем добавлю выбранную опцию в таблицу, страница перезагрузится и останется пустой, даже не давая мне возможности отправить форму. Что здесь происходит?? У кого-нибудь когда-нибудь была подобная проблема? Спасибо за ценную помощь!

    <form method="POST" action="{{ url('/groups/create') }}">
    <div class="form-group row">
        <label for="name" class="col-md-4 col-form-label text-md-right">Name</label>
        <div class="col-md-6">
            <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
            @error('name')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
    </div>

    <div class="form-group row">
        <label for="name" class="col-md-4 col-form-label text-md-right">Add user</label>
        <div class="col-md-6">
            <select class="custom-select" id="chooseUserSelect" name="user_id">
                <option value="0">Choose...</option> 
                @foreach($users as $user)
                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-md-6 offset-md-4">
            <button class="btn btn-outline-primary" id="addUserToGroupButton" disabled>Add</button>
        </div>
    </div>

    <div class="form-group row">
        <table class="table table-hover" id="usersInGroupTable">
            <thead class="thead-light">
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Name</th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <div class="form-group row mb-0">
        <div class="col-md-6 offset-md-4">
            <button type="submit" class="btn btn-primary">Create group</button>
        </div>
    </div>
</form>

Тег tbody пуст, потому что я создаю строки с JS.

Answer 1

Понял, это была простая ошибка! Кнопка «Добавить» действовала как кнопка отправки, поэтому решение было просто добавить type="button" и вуаля! Каким-то странным, он действовал как кнопка отправки без указания типа ...