[Javascript] aggiungere dinamicamente un campo di un form

asevenx · 15 Lug 2016

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 · 16 Lug 2016

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() );
}
?>

borgo italia · 16 Lug 2016

ciao
o dai un occhio a quest'articolo
http://blog.mrwebmaster.it/2010/09/15/duplicare-i-campi-di-un-form-con-jquery.html

asevenx · 20 Lug 2016

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.

Cerca

Cerca

[Javascript] aggiungere dinamicamente un campo di un form

asevenx

Utente Attivo

marino51

Utente Attivo

borgo italia

Super Moderatore

asevenx

Utente Attivo

Discussioni simili