[Javascript] autocompila campi input form

Alex1990000

Nuovo Utente
26 Lug 2017
9
0
1
29
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
29
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
342
19
18
27
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
342
19
18
27
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.