使用JS在表单内部动态创建表，在我将表单提交到Laravel后端之前，将加载空白页面

Question

我在blade.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"和voilà！有点奇怪，它充当了一个提交按钮，却没有指定类型。。。