Laravel 8- How to make a delete button inside a form-CodePudding

I'm trying to make a "create profile page" and there is a section where the user enters their experiences, in this section, the user can, insert, edit and delete their experiences.

the only way i know it is possible to perform a deletion is with something like this:

<form action="/projects/{{$Projects->id}}" method ="POST">
  @csrf
    @method('DELETE')
    <button type="submit" ><ion-icon name="trash-outline"></ion-icon> Delete </button>
</form>

I searched and founded that i can't put a form inside a other form, so what i can do in this situation?

My final code in view is something like this

<div id="event-create-container" >
  <h4>Finalize seu perfil! </h4>
  <form action="/" method="POST" enctype="multipart/form-data">
   @csrf
    <div >
      <label for="title">Descreva um pouco sobre você:</label>
      <textarea name="description" id="description"  placeholder="Insira uma descrição sobre você"></textarea>
    </div>
    <!-- Botão para acionar modal -->
    <div >
      <a href="#" data-toggle="modal" data-target="#modalExperience">
        <ion-icon name="add-outline"></ion-icon>
      </a>
    </div>
      <div >
        <label for="title">Outras formações acadêmicas:</label>
          <div >
            @foreach ($Experiences as $Experience)
              <div >
                <a href="#" data-toggle="modal" data-target="#modalExperience{{$Experience->id}}"><ion-icon name="pencil-sharp"></ion-icon></a> 
                <form action="/profile/delete/{{$Experience->id}}" method ="POST">
                  @csrf
                      @method('DELETE')
                      <button type="submit" ><ion-icon name="trash-outline"></ion-icon> Deletar</button>
              </form>
              </div>
                Curso: {{$Experience->experienceName}}<br>
                Instituição: {{ $Experience->institutionName }}<br>
                Data de inicio: {{ date('d/m/Y', strtotime($Experience->firstDate)) }}<br>
                Data fim: {{ date('d/m/Y', strtotime($Experience->lastDate))}}<br>
                <hr>
            @endforeach
          </div>
      </div>
    <div >
      <input type="submit"  value="Finalizar perfil">
    </div>
  </form>

With him, when i click on delete button the main form is activeted

CodePudding user response：

A simple solution is to put the delete <form> outside the post <form>, then have the button trigger the delete form submit (via JS/jQuery or similar)

The submit button for a <form> doesn't have to be a button type="submit", nor does it have to be inside the <form>:

<div id="event-create-container" >
  <h4>Finalize seu perfil! </h4>
  <form action="/" method="POST" enctype="multipart/form-data">
    @csrf
    <!-- ... -->
    <button id="deleteButton" type="button" >
      <ion-icon name="trash-outline"></ion-icon> Deletar
    </button>
    <div >
      <input type="submit"  value="Finalizar perfil">
    </div>
  </form>
  <form id="deleteForm" action="/profile/delete/{{ $Experience->id }}" method="POST">
    @csrf
    @method('DELETE')
  </form>
</div>

<script type="text/javascript">
  document.getElementById('deleteButton').addEventListener('click', function () {
    document.getElementById('deleteForm').submit();
  });
</script>

CodePudding user response：

Alternatively, you can use the form attribute on the button element to direct the button to submit the correct form.

<form method="POST" action="/profile/delete/{{ $experience->id }}" id="delete_profile_{{ $experience->id }}">
    @csrf
    @method('DELETE')
    <button type="submit" form="delete_profile_{{ $experience->id }}">
        <ion-icon name="trash-outline"></ion-icon> Deletar
    </button>
</form>