Creazione di un'applicazione Web per concatenare stringhe per unificare le convenzioni di denominazione

0

Mi è stato affidato il compito di creare una piccola applicazione web, in cui gli utenti hanno una serie di moduli (al momento non riesco a pensare a un modo migliore di farlo) che conterrà, a) campi di inserimento del testo o b) elenchi a discesa. Il modulo avrà il seguente aspetto:

form1 input box input box drop down box

form2 input box input box drop down box input box

form3 input box dropdown box input box drop down box

Ora per ogni modulo, avrei bisogno di concatenare la stringa risultante memorizzata in ogni casella (menu a tendina o input). Sembra abbastanza semplice e ho già un prototipo funzionante. Il problema è che per ogni modulo possono esserci più righe.

Quale sarebbe il modo più semplice per avvicinarsi a questo? Le mie capacità sono limitate a HTML, CSS, JavaScript e alcune (leggere) JQuery. Il prototipo funzionante che attualmente ho l'utente compila tutti i campi e quindi preme un pulsante "genera" che genera tutte le stringhe concatenate. È questo approccio che vorresti prendere?

    
posta zik 03.01.2012 - 18:17
fonte

2 risposte

2

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.

    
risposta data 13.09.2013 - 15:15
fonte
-4

L'uso di JavaScript può perfettamente fare il tuo lavoro.

    
risposta data 14.08.2013 - 12:47
fonte

Leggi altre domande sui tag