Laravel 8 - Submit button not working with multiple forms - php

Question

I'm trying to use a submit button that creates a registry (Memo) and it's products asociated to that Memo, however, I cannot get this to work.
I think it might be because I have a form inside another form. However I believe since my submit button its outside the inner form, should still work (it worked before).
I'll put my create.blade.php code below:
<form method="post" action="{{ route('memos.store') }}">
<div class="form-group">
#csrf
<label for="lbl_memo_attendant" id="lbl_memo_attendant"><strong>Solicitante:</strong></label>
<input type="text" class="form-control" name="memo_petitioner" value="{{ Auth::user()->name }}" readonly="readonly"/>
</div>
<div class="form-group">
<label for="lbl_attendant_department"><strong>Departamento solicitante:</strong></label>
<input type="text" class="form-control" name="memo_petitioner_department" value="{{ Auth::user()->department }}" readonly="readonly"/>
</div>
<div class="form-group">
<label for="lbl_product_type" name="lbl_memo_product_type"><strong>Tipo de solicitud:</strong></label></br>
<select name="memo_product_type">
<option value="Bienes" selected>Bienes</option>
<option value="Servicio">Servicio</option>
</select>
</div>
<div class="form-group">
<label for="lbl_program" name="lbl_memo_program"><strong>Programa:</strong></label></br>
<select name="memo_program">
<option value="Hospital Williams" selected>Hospital Williams</option>
<option value="Gasto Operacional DSSM">Gasto Operacional DSSM</option>
<option value="Cadi Umag">Cadi Umag</option>
</select>
</div>
<div class="container">
<h2 align="center">Ingresar productos:</h2>
<form name="add_name" id="add_name" action="{{ route('products.store') }}">
<div class="form-group">
<div class="alert alert-danger print-error-msg" style="display:none">
<ul></ul>
</div>
<div class="alert alert-success print-success-msg" style="display:none">
<ul></ul>
</div>
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td class="col-6"><input type="text" name="product_name" placeholder="Producto" class="form-control name_list" /></td>
<td><label>Unidad:</label>
<select>
<option value="Unidad" selected>Unidad</option>
<option value="Cajas">Cajas</option>
<option value="Global">Global</option>
</select>
</td>
<td><input placeholder="Cantidad" type="number" name="product_qty"></input></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Agregar otro producto</button></td>
</tr>
</table>
</div>
</form>
</div>
</div>
<div class='div-btn-create'>
<button type="submit" class="btn btn-success" id="btn_create_memo">Crear memorando</button>
</div>
</form>

Answer 1

HTML does not support nested forms, so the browser turns them into one. Which is why your button is outside the form. Remove the nested form and everything will work.