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.

Borrar todos los campos de entrada al enviar utilizando Hyperscript.

19 Jun, 2023 Programación

Estoy experimentando con htmx e hyperscript, y quiero que todos los campos de entrada en el siguiente formulario se borren al enviarlo:

<form hx-post="/example" hx-target="#table tbody" hx-swap="beforeend" _="<¿Qué debo escribir aquí?>>">
        <label class="control-label" for="firstNameInput">Nombre</label>
        <input id="firstNameInput" name="firstName" class="form-control" type="text" required="" placeholder="John">

    <label class="control-label" for="lastNameInput">Apellido</label>
    <input id="lastNameInput" name="lastName" class="form-control" type="text" required="" placeholder="Doe">
    <button class="btn btn-primary">Agregar usuario</button>

</form>

He intentado reemplazar <¿Qué debo escribir aquí?>> con, por ejemplo, on submit put '''' into <input/> y on submit put '''' into <input[value]/> y muchas otras combinaciones, pero no logro que esto funcione.

P: ¿Cómo puedo borrar todos los campos de entrada cuando se envía el formulario?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para borrar todos los campos de entrada cuando se envía el formulario usando htmx y hyperscript, se puede usar el atributo hx-trigger para agregar un disparador personalizado en el envío del formulario y luego usar una función hyperscript para borrar los campos de entrada. Aquí hay un ejemplo:

    <form hx-post="/example" hx-target="#table tbody" hx-swap="beforeend">
  <label class="control-label" for="firstNameInput">Nombre</label>
  <input id="firstNameInput" name="firstName" class="form-control" type="text" required="" placeholder="Juan">

  <label class="control-label" for="lastNameInput">Apellido</label>
  <input id="lastNameInput" name="lastName" class="form-control" type="text" required="" placeholder="Pérez">

  <button class="btn btn-primary">Agregar Usuario</button>

  <!-- Agregue un disparador personalizado al enviar el formulario -->
  <input hx-trigger="submitted" style="display:none;">

  <script>
    // Defina una función para borrar todos los campos de entrada
    function clearInputs() {
      document.querySelectorAll('input').forEach(function(input) {
        input.value = '';
      });
    }

    // Use htmx para llamar a la función clearInputs en el envío del formulario
    htmx.on('form', 'submitted', clearInputs);
  </script>
</form>

    En este ejemplo, agregamos un disparador personalizado en el envío del formulario utilizando el atributo hx-trigger en un campo de entrada oculto. Luego definimos una función clearInputs utilizando hyperscript para recorrer todos los campos de entrada y configurar sus valores en una cadena vacía. Finalmente, usamos htmx para llamar a la función clearInputs cuando se envía el formulario utilizando el disparador personalizado.

Comments are closed.