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

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.