[Javascript] autocompila campi input form

Alex1990000

Nuovo Utente
26 Lug 2017
9
0
1
30
Buonasera a tutti,
avrei una domanda in merito al Javascript è possibile inserire la possibilità di auto-compilare i campi input con il testo compilato nel text area?

cioè ad esempio io incollo questa riga del text area: ciao ciao ciao ciao ciao ciao
lui me li divide in automatico in celle però vorrei che auto-compili anche i tag input.

LINK SCRIPT

HTML:
<!DOCTYPE html>
<html lang="it">
    <head>
        <meta charset="UTF-8">
        <title>TAB GUASTI: Metroweb POLO MI-TO-BO</title>
        <style>
            *{
                font-family: arial;
                font-size: 11px;
            }
            table{
                border-collapse: collapse;
                border: 1px solid silver;
            }
            tr{
                border-bottom: 1px solid silver;
            }
            /*This will style the header row!*/
            tr:first-child td {
                background-color: #EEE;
                border: 1px solid silver;
                font-weight: bold;
                padding: 2px;
                text-align: center;
            }
            div {
            clear:both;
            }
            label {
            width:200px;
            float:left;
            }
            input {
            width:200px;
            float:left;
            }
            #invia {
            clear:both;
            }
        </style>
        <script language="javascript">
            function createTable() {
                // Get the data
                var excelData = document.getElementById('csv').value;
                
                // split into rows
                excelRow = excelData.split(String.fromCharCode(10));
                // split rows into columns
                for (i=0; i<excelRow.length; i++) {
                    excelRow[i] = excelRow[i].split(String.fromCharCode(9));
                }
                
                // start to create the HTML table
                var myTable = document.createElement("table");
                var myTbody = document.createElement("tbody");
                
                // Loop over the rows
                for (i=0; i<excelRow.length - 1; i++) {
                    // create a row in the HTML table
                    var myRow = document.createElement("tr");
                    
                    // Loop over the columns and add TD to the TR
                    for (j=0; j<excelRow[i].length; j++) {
                        // Loop over the row columns
                        if (excelRow[i][j].length != 0) {
                                var myCell = document.createElement("td");
                                myCell.innerHTML = excelRow[i][j];
                        }           
                        myRow.appendChild(myCell);           
                    }
                    myTbody.appendChild(myRow);   
                }
                    myTable.appendChild(myTbody);
                document.body.appendChild(myTable);
                // console.log(myTable)
            }
            </script>
    </head>
    <body>
        <div>
            <div>Per facilitare l'inserimento dei guasti metroweb incolla il contenuto delle celle di remedy qui!.</div>
            <textarea id="csv" placeholder="Paste XLSX content here" style="width: 300px; height: 100px;"></textarea><br/>
            <input type="button" value="Create HTML Table from XLSX content" onclick="createTable()" >
        </div>
        <div>
            <form action="insert.php" method="post">
                <fieldset>
                <div>
                    <label for="idrichiesta">ID_Richiesta:</label>
                    <input type="text" name="idrichiesta" id="idrichiesta">
                </div>
                <div>
                    <label for="lastName">Codice Comunicazione OLO:</label>
                    <input type="text" name="CCOLO" id="CCOLO">
                </div>
                <div>
                    <label for="lastName">Nome System:</label>
                    <select name="system">
                      <option value="Soleto">Soleto</option>
                      <option value="Sertori">Sertori</option>
                      <option value="Valtellina">Valtellina</option>
                     </select>
                </div>
                <div>
                    <label for="idrichiesta">Stato Attuale:</label>
                    <select name="statoattuale">
                      <option value="In verifica">In verifica</option>
                      <option value="In Lavorazione">In Lavorazione</option>
                      <option value="Sospeso">Sospeso</option>
                      <option value="Chiuso">Chiuso</option>
                     </select>
                </div>
                <div>
                    <label for="lastName">ID Risorsa:</label>
                    <input type="text" name="idrisorsa" id="idrisorsa">
                </div>
                <div>
                    <label for="lastName">Cognome Cliente:</label>
                    <input type="text" name="cliente" id="cliente">
                </div>
                <div>
                    <label for="idrichiesta">Flag Individuazione Guasto:</label>
                    <select name="flag">
                      <option value="Verticale">Verticale</option>
                      <option value="Orizzontale">Orizzontale</option>
                     </select>
                </div>
                <div>
                    <label for="lastName">Comune:</label>
                    <select name="comune">
                      <option value="MILANO">MILANO</option>
                      <option value="BOLOGNA">BOLOGNA</option>
                      <option value="BOLOGNA">TORINO</option>
                     </select>
                </div>
                <div>
                    <label for="idrichiesta">GPON ID:</label>
                    <input type="text" name="gpon" id="gpon">
                </div>
                <div>
                    <label for="lastName">Data Creazione:</label>
                    <input type="datetime-local" name="datacreazione" id="datacreazione">
                </div>
                <div>
                    <label for="lastName">Data 1°sospensione:</label>
                    <input type="datetime-local" name="1sospensione" id="1sospensione">
                </div>
                <div>
                    <label for="lastName">Data 1°de-sospensione:</label>
                    <input type="datetime-local" name="1desospensione" id="1desospensione">
                </div>
                <div>
                    <label for="lastName">Data 2°sospensione:</label>
                    <input type="datetime-local" name="2sospensione" id="2sospensione">
                </div>
                <div>
                    <label for="lastName">Data 2°de-sospensione:</label>
                    <input type="datetime-local" name="2desospensione" id="2desospensione">
                </div>
                <div>
                    <label for="lastName">Data 3°sospensione:</label>
                    <input type="datetime-local" name="3sospensione" id="3sospensione">
                </div>
                <div>
                    <label for="lastName">Data 3°de-sospensione:</label>
                    <input type="datetime-local" name="3desospensione" id="3desospensione">
                </div>
                <div>
                    <label for="lastName">Data Chiusura:</label>
                    <input type="datetime-local" name="datachiusura" id="datachiusura">
                </div>
                <div>
                    <label </label>
                    <input type="submit" id="invia" value="INVIA">
                </div>
                
                 </fieldset>
            </form>
        </div>
    </body>
</html>
 

Alex1990000

Nuovo Utente
26 Lug 2017
9
0
1
30
nessuno potrebbe aiutarmi? in caso volessi posso separare con javascript un copia e incolla?
 

mtt

Nuovo Utente
12 Set 2017
14
0
1
Mi viene in mente questo: prendendo un evento tipo il combio del focus oppure un pulsante apposito,se al testo apponi un apposito delimitatore tipo "-" o "+" (quindi ciao-ciao-ciao) potresti prelevare il testo dalla text area, con l'uso reiterato della istruzione substring unita a indexof e lastindexof , potresti separe tutte le parole e poi assegnale ai vari campi.
A me viene in mente questo.
 

bubino8

Utente Attivo
28 Apr 2017
344
19
18
28
BZ
E' un po impossibile a mio a parere indipendentemente da come le vuoi tirare fuori dal textarea, come fai a sapere quale parola è il nome quale il cognome quale il comune e cosi via?
Dovresti avere database immensi contenenti tutti i nomi tutti i cognomi ed andare a fare controlli se esistono cosa anche impossibile nel caso ci dovessero essere più nomi o cognomi nella textarea.

Se dovessi trovi una soluzione condividi grazie:D.
 

mtt

Nuovo Utente
12 Set 2017
14
0
1
Se nell'inserimento illustri all'utente che la stringa deve avere una formatazione precisa (prima nome poi cognome separati da un -) lo trovo fattibile.Come caricare un file csv di dati più o meno.
 

bubino8

Utente Attivo
28 Apr 2017
344
19
18
28
BZ
A be certo cosi è fattibile, il problema (non problema) si pone nel momento in cui l'utente capisce che ci mette meno a inserire direttamente i dati negli appositi campi che seguire la linea guida:D.
Poi sappiamo come va a finire c'è sempre il caso di quello che non capisce un tubo ed inserisce i dati male.
 
Discussioni simili
Autore Titolo Forum Risposte Data
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 0
F Creare elementi html con javascript Javascript 2
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
G [Javascript] Errore inserimento dati Backend Node.js e workbench Javascript 1
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
D [Javascript] inserire uno script in un file php Javascript 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
K [javascript] Tecnica per rilevare celle contenenti caratteri ricevute in dinamico Javascript 1
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
S [Javascript] Problema costrutto if Javascript 0
I [Javascript] window.location.href porta alla nuova pagina e ritorna incomprensibilmente. Javascript 0
L [Javascript] input variabili di scrittura con canvas Javascript 2

Discussioni simili