Aggiungere dinamicamente campi ad un form

In questo articolo un esempio di come aggiungere un numero illimitato di campi ad un forum contenuto in una pagina web tramite l’utilizzo di Jquery.

Ecco qui di seguito il codice del modulo che consente di aggiungere campi tramite l’apposito tasto:

01 <script src="js/jquery.js" type="text/javascript"></script>
02 <h1>New User Signup</h1>
03 <form action="index.php" method="post">
04
05   <label for="name">Username:</label>
06   <input id="name" name="name" type="text" />
07   <label for="name">Password:</label>
08   <input id="password" name="password" type="text" />
09
10    <div id="container">
11       <a href="#"><span>» Add your favourite links.....</span></a>
12    </div>
13
14    <input id="go" class="btn" name="btnSubmit" type="submit" value="Signup" />
15 </form>

Fin qui tutto normale o quasi,  ecco di seguito il codice che che ci sonsentirà di implementare la funzionalita:

01 var count = 0;
02 $(function(){
03     $('p#add_field').click(function(){
04         count += 1;
05         $('#container').append('<strong>Link #' + count + '</strong>'+ '<input id="field_' + count + '" name="fields[]' + '" type="text" />' );
06     });
07 });

Come potete vedere il metodo Append di Jquery consente di aggiungere dinamincamente e con poche riche nuovi campi al forum. Una variavile tiene traccia del numero di campi aggiunti ogni volta che la funzione viene evocata. Un’altra cosa da notare è come i campi sono chiamati usando ‘txt []’ ossia creando un array di valori.

Otterrete quindi una struttura tipo:

<input id="name" name="name" type="text" />

02 <input id="password" name="password" type="text" />
03 <input id="field_1" name="fields[]" type="text" />
04 <input id="field_2" name="fields[]" type="text" />
05 <input id="field_3" name="fields[]" type="text" />

Dovrete oera con un po di PHP leggere il contenuto di tale modulo e potrete utilizzare i dati inviati secondo le vostre necessità

 

 

 

 

Lascia un commento