Penso che per questo tipo di applicazione, un pulsante di generazione sarebbe probabilmente indesiderabile da una prospettiva UX, specialmente se l'operazione eseguita è così banale come lo si fa sembrare.
Ecco cosa ho hackerato insieme in pochi minuti, per quello che penso tu stia descrivendo approssimativamente:
link
(Jsfiddle è ancora in voga?)
La carne è:
function processRecords (form){
var result="";
var inputs = form.elements;
for(var i=0; i<inputs.length; ++i){
var input = inputs[i];
result += input.value;
}
var target = document.getElementById(form.dataset.target);
target.textContent = result;
}
La cosa bella di questa funzione è che non assume nulla sulla tua forma oltre al fatto che ha input e un attributo data-target con l'id dell'elemento che vuoi popolare con il risultato. Inoltre, è così economico da eseguire, che puoi fare questo:
link
La differenza è che ho rimosso tutti i pulsanti di invio e aggiunto il seguente frammento:
setInterval(function(){
var forms = document.forms;
for(var i=0; i<forms.length; ++i){
processRecords(forms[i]);
}
}, 100);
Che aggiorna automaticamente in modo automatico le uscite indipendentemente da come l'utente le aggiorna. Questo è più veloce / più facile per l'utente, e come bonus ha un "fattore wow" migliore per i più alti.
Questo può sembrare un po 'dispendioso, il looping attivo e l'aggiornamento delle aree di testo che non cambiano, ma l'ascolto delle modifiche apportate all'input è una specie di cosa noiosa in HTML, e questo rende il lavoro facile per le pagine di dimensioni moderate. Soprattutto perché tutto quello che stai facendo è camminare intorno al DOM e armeggiare con le file. Probabilmente c'è una ottimizzazione nell'aggiornamento del DOM se non si deve, ma non mi è chiaro che ne varrà la pena per un computo così banale. Ottimizza secondo!
Non sono sicuro di cosa ti riferisci riguardo a "più righe per modulo". Se intendi che vuoi incorporare più raccolte di input / output in un elemento, la mia reazione istintiva è ... perché? Come descritto, non sembra che tu stia usando i moduli come qualcosa di diverso da un involucro banale, e non è come se gli elementi introducessero un sovraccarico.