Laravel 8 – Submit button not working with multiple forms

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

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.