[Javascript] autocompila campi input form

Discussione in 'Javascript' iniziata da Alex1990000, 26 Luglio 2017.

  1. Alex1990000

    Alex1990000 Nuovo Utente

    Registrato:
    26 Luglio 2017
    Messaggi:
    9
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    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>
     
  2. Alex1990000

    Alex1990000 Nuovo Utente

    Registrato:
    26 Luglio 2017
    Messaggi:
    9
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    nessuno potrebbe aiutarmi? in caso volessi posso separare con javascript un copia e incolla?
     
  3. mtt

    mtt Nuovo Utente

    Registrato:
    12 Settembre 2017
    Messaggi:
    7
    Mi Piace Ricevuti:
    0
    Punteggio:
    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.
     
  4. bubino8

    bubino8 Utente Attivo

    Registrato:
    28 Aprile 2017
    Messaggi:
    167
    Mi Piace Ricevuti:
    13
    Punteggio:
    18
    Sesso:
    Maschio
    Località:
    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.
     
  5. mtt

    mtt Nuovo Utente

    Registrato:
    12 Settembre 2017
    Messaggi:
    7
    Mi Piace Ricevuti:
    0
    Punteggio:
    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.
     
  6. bubino8

    bubino8 Utente Attivo

    Registrato:
    28 Aprile 2017
    Messaggi:
    167
    Mi Piace Ricevuti:
    13
    Punteggio:
    18
    Sesso:
    Maschio
    Località:
    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.
     
Sto caricando...

Condividi questa Pagina