Question 17458 in Laravel Question posted in
The official Laravel Documentation can be found here.

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

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" class="btn btn-danger delete-btn mt-2"><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" class="col-md-6 offset-md-3">
  <h4>Finalize seu perfil! </h4>
  <form action="/" method="POST" enctype="multipart/form-data">
   @csrf
    <div class="form-group col-12">
      <label for="title">Descreva um pouco sobre você:</label>
      <textarea name="description" id="description" class="form-control" placeholder="Insira uma descrição sobre você"></textarea>
    </div>
    <!-- Botão para acionar modal -->
    <div class="col-12 text-right mt-3">
      <a href="#" data-toggle="modal" data-target="#modalExperience">
        <ion-icon name="add-outline"></ion-icon>
      </a>
    </div>
      <div class="form-group col-12">
        <label for="title">Outras formações acadêmicas:</label>
          <div class="form-group col-12 mt-3">
            @foreach ($Experiences as $Experience)
              <div class="col-12 text-right">
                <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" class="btn btn-danger delete-btn mt-2"><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 class="form-group col-12 text-right">
      <input type="submit" class="btn btn-primary" value="Finalizar perfil">
    </div>
  </form>

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

Tags:

2

Answers


  1. 0

    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" class="col-md-6 offset-md-3">
  <h4>Finalize seu perfil! </h4>
  <form action="/" method="POST" enctype="multipart/form-data">
    @csrf
    <!-- ... -->
    <button id="deleteButton" type="button" class="btn btn-danger delete-btn mt-2">
      <ion-icon name="trash-outline"></ion-icon> Deletar
    </button>
    <div class="form-group col-12 text-right">
      <input type="submit" class="btn btn-primary" 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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search