es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Botón no funciona correctamente – Java Spring Thymeleaf

26 Jul, 2023 Programación

Estoy escribiendo una aplicación web sencilla con operaciones CRUD usando Thymeleaf como motor de plantillas. El problema es que este es mi código:

<form th:method="POST" th:action="@{/}">
    <div>
       <ul th:each="balloon: ${balloons}" style="list-style-type: none">
          <li>
             <input type="radio" name="balloonType" th:text="${balloon.getName()}"
                    th:value="${balloon.getDescription()}">
          </li>

<pre><code>      <div>
         <form th:method="POST" th:action="@{'/balloons/delete/{id}' (id=${balloon.getId()})}">
             <input type="submit" value="Delete">
         </form>
      </div>

   </ul>
   <input type="submit" value="Submit">
</div>
<br/>
</code></pre>

</form>

y cuando ejecuto la aplicación, el código en el elemento de inspección se muestra en la siguiente imagen. El primer botón de eliminación no aparece en su propio formulario y, por lo tanto, no funciona correctamente. Cualquier ayuda es bienvenida.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para solucionar el problema con el botón de eliminar que no está en su propio formulario, debes mover la etiqueta del formulario fuera de la etiqueta ul que contiene los botones de radio y sus etiquetas. De esta manera, cada botón de eliminar tendrá su propio formulario y funcionará correctamente. Aquí tienes el código actualizado:

    <form th:method="POST" th:action="@{/}">
    <ul th:each="balloon: ${balloons}" style="list-style-type: none">
        <li>
            <input type="radio" name="balloonType" th:text="${balloon.getName()}" th:value="${balloon.getDescription()}">
        </li>

        <div>
            <form th:method="POST" th:action="@{/balloons/delete/{id}}" th:object="${balloon}">
                <input type="hidden" th:field="*{id}">
                <input type="submit" value="Eliminar">
            </form>
        </div>

    </ul>
    <input type="submit" value="Enviar">
    <br>
</form>

    Ten en cuenta que también agregué un campo de entrada oculto al formulario de eliminación, con el nombre “id” y el valor del id del globo, para que el controlador pueda identificar qué globo eliminar.

Comments are closed.