[Javascript] aggiungere dinamicamente un campo di un form

asevenx

Utente Attivo
7 Nov 2009
312
0
16
Salve, ho un form con alcuni campi per un form simile alla registrazione delle fatture, alcuni campi però devono aggiungersi in modo dinamico (magari cliccando su un bottone o su un link) in modo da permettere l'inserimento di nuovi dati da parte dell'utente. Mi spiego meglio, ho ad esempio questo form:

TESTATA
Nome:
Azienda:
Numero:

RIGA
Transazione:
Importo
aggiungi riga

Cliccando su aggiungi riga vengono aggiunti automaticamente i campi Transazione e Importo permettendo di inserire una nuova transazione mantenendo invariati i campi di testata. Una volta inseriti tutti i dati l'utente invia i dati al database che archivia il tutto (un record per ogni riga), ma quello penso di poterlo fare tranquillamente con php/mysql, per ora serve solo una funzione per aggiungere una riga.

Grazie a tutti per l'aiuto.
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
ti posto un esempio completo (html, javascript e php), preso dal web, che ho "fatto mio"
è molto semplice da capire,
gestisce l'aggiunta e la rimozione delle righe
lavora con array, in modo da facilitare la gestione
si individua bene il codice html da "personalizzare"
PHP:
<?php
if (empty($_POST)) {
?>
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Documento senza titolo</title>
    <!-- <link href="real-world.css" rel="stylesheet" type="text/css"> -->

    <script src="___jquery/jquery.min.js"></script>

    <script type='text/javascript'>
//<![CDATA[
    $(document).ready(function() {
        var currentItem = 1;
        AddRow(currentItem);

        $('#addnew').click(function(){
            currentItem++;
            AddRow(currentItem);
        });

        $('#removelast').click(function(){
            if (currentItem > 1) {
                var rowID = '#row'+currentItem+'b'
                $(rowID).remove();
                var rowID = '#row'+currentItem+'a'
                $(rowID).remove();
                currentItem--;
                $('#items').val(currentItem);
            }
        });

        function AddRow(currentItem)
        {
            var strToAdd = NewRow(currentItem)
            $('#data').append(strToAdd);
            $('#items').val(currentItem);
        };

        function NewRow(currentItem)
        {
            var strToAdd
='<tr id="row'+currentItem+'a">'
+'<td>Year</td>'
+'<td>:</td>'
+'<td>'
+'<select name="year[]" id="year[]" >'
+'<option value="2015">2015</option>'
+'<option value="2014">2014</option>'
+'</select>'
+'</td>'
+'<td>Month</td>'
+'<td>:</td>'
+'<td width="17%">'
+'<select name="month[]" id="month[]">'
+'<option value="1">January</option>'
+'<option value="2">February</option>'
+'<option value="3">March</option>'
+'<option value="4">April</option>'
+'<option value="5">May</option>'
+'<option value="6">June</option>'
+'<option value="7">July</option>'
+'<option value="8">August</option>'
+'<option value="9">September</option>'
+'<option value="10">October</option>'
+'<option value="11">November</option>'
+'<option value="12">December</option>'
+'</select>'
+'</td>'
+'<td width="7%">Week</td>'
+'<td width="3%">:</td>'
+'<td width="17%">'
+'<select name="week[]" id="week[]" >'
+'<option value="1">1</option>'
+'<option value="2">2</option>'
+'<option value="3">3</option>'
+'<option value="4">4</option>'
+'</select>'
+'</td>'
+'<td width="8%">&nbsp;</td>'
+'<td colspan="2">&nbsp;</td>'
+'</tr>'
+'<tr id="row'+currentItem+'b">'
+'<td>Actual</td>'
+'<td>:</td>'
+'<td width="17%">'
+'<input name="actual[]" id="actual[]" type="text" />'
+'</td>'
+'<td width="7%">Max</td>'
+'<td width="3%">:</td>'
+'<td>'
+'<input name="max[]" id="max[]" type="text" />'
+'</td>'
+'<td>Target</td>'
+'<td>:</td>'
+'<td>'
+'<input name="target[]" id="target[]" type="text" />'
+'</td>'
+'</tr>';
            return strToAdd;
        };
    });
//]]>
    </script>

    <style>
    </style>

  </head>

  <body>

    <form name='myform' method='POST'>
      <table class="dd" width="100%" id="data">
        <tbody>
        </tbody>
      </table>

      <input type="submit" name="submit"                     value="SubmitValues" />
      <input type="button" name="addnew"     id="addnew"     value="Add new item" />
      <input type="button" name="removelast" id="removelast" value="Remove last item" />
      <input type="hidden" name="items"      id="items"      value="0" />
    </form>
  </body>
</html>
<?php
}
else
{
    function show_var($variable)
    {
        $tabella = "<table border='1'>"
                 . "<thead><tr><td><b>KEY</b></td><td><b>VALUE</b></td></tr></thead>"
                 . "<tbody>";

        foreach ($variable as $key => $value)
        {
            if ($key !== "_SERVER")
            {
                if     ($value === true)   $value = 'true';
                elseif ($value === false)  $value = 'false';
                elseif ($value === null)   $value = 'null';
                elseif ( empty($value) )   $value = 'empty';

                if ( is_array($value) or is_object($value) )
                {
                    $tabella .= "<tr><td>".$key."</td><td>".show_var($value)."</td></tr>";
                }
                else
                {
                    $tabella .= "<tr><td>".$key."</td><td>".$value."</td></tr>";
                }
            }
        }
        $tabella .= "</tbody>";
        $tabella .= "</table>";
        return $tabella;
    }
    echo show_var( get_defined_vars() );
}
?>
 

asevenx

Utente Attivo
7 Nov 2009
312
0
16
Dopo vari tentativi sono riuscito a personalizzare il mio codice optando per la seconda possibilità proposta da Borgo. Dato che la mia esigenza era quella di ottenere i dati dall'utente provenienti da una serie di select (dove le opzioni sono prese a sua volta dal database) ed inserirli in un campo unico, ho creato un array, ovvero una stringa dove registro i dati separati da una virgola. Ecco qui:

PHP:
<?php
if($_POST['scelte'])
    $array=$_POST['scelte'];
                   
if($array)
$arrayScelte = implode(',', $array);
?>
                      <label>Associa scelta</label>
                        <p class="clone"><select name="scelte[]" class="clone input" required>
<?php
//gruppo esterno                   
                    $sql = "SELECT * FROM $dbScelte ORDER BY id";
                   
                    if ($result = mysqli_query($mysqli_connect, $sql))
                    {
                        $i = 1;
                        while ($row = mysqli_fetch_array($result))
                        {
                            if($_SERVER["REQUEST_METHOD"] != "POST")
                            {
?>                 
                            <option <?php echo checkSelectValue($row[1],$scelte)?> <?php echo checkSelect($row[1], $_POST['scelte])?>><?php echo "$row[2]"; ?></option>
<?php
                            }
                            ++$i;
                        }   
                    }
?>           
                        </select></p><a href="#" class="add" rel=".clone">Aggiungi<br></a>

Praticamente visualizzo i dati provenienti da dbScelte e creo un select con diverse opzioni relative a tali dati ($row[1] è un codice univoco, e $row[2] è la descrizione, es: 0002 Giallo). checkSelectValue e checkSelect li ho creati per mantenere il value e gli stili nel caso ci sia un invio con qualche errore (se l'utente clicca su invio dimenticando un campo obbligatorio del form). L'utente seleziona quindi le scelte e nel database (in un altra tabella) viene registrato una stringa ottenuta dall'arrey, ovvero $arrayScelte (con i valori separati da una virgola).

Questo funziona, ora la domanda è un altra (se posso farla qui o devo aprire un altra discussione). Dato che devo gestire anche un edit delle scelte fatte, come posso far visualizzare un select per ogni scelta fatta permettendo all'utente di cambiare la propria scelta o eliminarla, ed eventualmente aggiungere una nuova scelta, andando quindi a modificare l'array e quindi $arrayScelte?
Cerco di spiegarmi meglio: ho salvato 0001,0002,0003. Vorrei tre select con le tre opzioni impostate su rispettivamente su 0001, 0002, 0003, con la possibilità di cambiarle le mie opzioni, aggiungerne altre o eliminarle. Se ad esempio cambio 0002 in 0004, avrò poi $arrayScelte = 0001, 0004, 0003. Capisco che il quesito è un po' contorto, spero di essermi spiegato in modo sufficientemente chiaro. Ovviamente sono ben accette anche altre idee su come impostare il problema.

Grazie a tutti per la collaborazione.
 
Discussioni simili
Autore Titolo Forum Risposte Data
Monital [Javascript] decidere dove aggiungere il campo dinamicamente Javascript 1
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
M [javascript] Aggiungere eventi al caricamento Javascript 0
G [Javascript] aggiungere sub-namespace Javascript 0
G [RISOLTO][Javascript] aggiungere elemento ad array definito nella finestra madre da popup Javascript 4
L [Javascript] Aggiungere una riga ad una tabella Javascript 5
asevenx [Javascript] aggiungere righe con select da database e calcolo sconto in automatico Javascript 0
ACarty [Javascript] Aggiungere link alle foto. Javascript 19
P Tabella Dinamica in javascript (aggiungere righe con textinput) Javascript 1
D Aggiungere javascript a div Javascript 1
I Creare un banner temporaneo JavaScript Javascript 0
S Impossibile scorrere un oggetto in JavaScript Javascript 0
N Passare array da php a javascript PHP 5
L Quiz javascript funzionante da migliorare Javascript 0
P errore 404 con javascript Javascript 2
D aiuto funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1
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 1
F Creare elementi html con javascript Javascript 3
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
P Passaggio id php a javascript PHP 6
R Confrontare il dominio di una mail con una stringa contenente un dominio personalizzato, tutto ciò in php o javascript PHP 0
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
G Problema verifica palindromo e verifica pari e dispari javascript Javascript 0
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
R Cerco supporto in programmazione javascript Offerte e Richieste di Lavoro e/o Collaborazione 0
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

Discussioni simili