0

Bien, vengo por ayuda para entender si esto es factible o lo que estoy haciendo es la manera correcta de hacerlo.

Tengo 3 tablas

tickets, detalle_factura, factura

El sistema funciona asi, se crean tickets de un trabajo con todos los valores, horas, trabajo, fecha, etc.

Ahora, tengo otro formulario donde se emite factura, lo que se hace es lo siguiente, en la factura se selecciona un rango de fecha y esto carga el detalle de esa factura con todos los tickets de esa factura en una tabla. En la factura va cuanto se para por hora y al registrar, tomo esos parametros que me dieron para en el backend realizar la búsqueda de tickets con esos parametros registrarlos en el detalle factura y en la factura registro los datos de la cabecera.

Ahora, me dijeron que en el detalle que se muestra en la factura deberían ser todos editables, como si fuera un subformulario, pero no se muy bien que tan factible sea esto, o si es común o no.

No pongo codigo porque es demasiado y no entraria aqui... pero les dejo ejemplos de las interfaces.

Ticket

introducir la descripción de la imagen aquí

Invoice (FACTURA)

introducir la descripción de la imagen aquí

El problema es ese, no es un subformulario, es un detalle, si tengo que convertirlo en un subformulario eso es seria modificar basicamente TODA LA LOGICA de mi codigo, rehacer basicamente el modulo de INVOICE

¿Aun asi, alguien conoce algun lugar donde muestren como desarrollar un formulario con su subformulario?

1
  • Hola Aldahir, partiendo de la base de que un <form> no puede contener otro <form>, ya que la especificación HTML así lo define, te diría que solo tenes que agregar la posibilidad de modificar el listado de tickets; es decir, agregar y quitar, todo lo demás ya es editable.
    – Marcos
    Commented el 27 jun. 2023 a las 17:18

1 respuesta 1

0

Bien, como explicaron en comentarios arriba, si, no es posible tener un formulario dentro de otro, pero si simular 1

Lo que hice fue lo siguiente

<form onsubmit="return validarAntesDeEnviar(this)">
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Nombre</th>
      <th>Carnet</th>
      <th>Teléfono</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1" class="row">
      <td>1</td>
      <td><input type="text" class="nombre" value="Juan Pérez"></td>
      <td><input type="text" class="carnet" value="123456789"></td>
      <td><input type="text" class="telefono" value="555-1234"></td>
    </tr>
    <tr data-id="2" class="row">
      <td>2</td>
      <td><input type="text" class="nombre" value="María López"></td>
      <td><input type="text" class="carnet" value="987654321"></td>
      <td><input type="text" class="telefono" value="555-5678"></td>
    </tr>
    <tr data-id="3" class="row">
      <td>3</td>
      <td><input type="text" class="nombre" value="Pedro Gómez"></td>
      <td><input type="text" class="carnet" value="543216789"></td>
      <td><input type="text" class="telefono" value="555-9012"></td>
    </tr>
  </tbody>
</table>
</form>

Bien, esto esta dentro de un formulario con n campos, eso no nos interesa, lo que nos interesa es que el formulario tendra un obsumit (se ejecutará una funcion antes de enviar el formulario)

En esta funcion lo que haremos sera recorrer todos los tr con la clase row, luego accederemos con un

row.querySelector(.NOMBRE_DEL_INPUT_USAMOS_LA_CLASE);

Usamos la clase que le asignamos al input, que será la misma que la de su columna, obtenemos el value de esa clase y lo guardamos en una variable, cuando tengamos todos los campos de esa fila lo metemos en un array

["id"=1,"nombre"=>"pepito","carnet"=>"12345", "telefono"=>"123451"]

Luego de tener ese array lo metemos en otro array e iniciamos el ciclo de nuevo, al final deberias tener algo asi

rows = [["id"=1,"nombre"=>"pepito","carnet"=>"12345", "telefono"=>"123451"],["id"=1,"nombre"=>"pepito","carnet"=>"12345", "telefono"=>"123451"],["id"=1,"nombre"=>"pepito","carnet"=>"12345", "telefono"=>"123451"]];

Esto lo parseamos a json, lo asignamos a una variable y lo enviamos por fetch

ESTO ES SOLO LA IDEA

Obviamente ya tu le añades estilos a los inputs de la tabla porque se veran horrible si no lo haces, armas la funcion completa (Yo solo dejo la idea) y luego por js creas un input de tipo hidden con el name "rows" le asignas el JSON y lo envias por FETCH o AJAX, en el servidor decodificas el JSON y listo

Si tienen dudas, las dejan y aclaro mas, esto lo hice solo en 5 minutos a las rapidas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.