crearezione di un form dinamico

[manublack]

Ciao ragazzi,

ho aperto questa discussione per via di un problema che non riesco a risolvere.
Il problema sussiste nella gestione dinammica dei campi sul form sotto postato.

<div id="esperienze"> 	
  <h4 align="center">Esperienze Lavorative</h4> 	



 <table align="center" border="1" width="400"> 		
<form action="./GestioneDati" method="post" name="esperienze" id="esperienze"> 			
 <input type="hidden" name="azione" value="esperienzeLavorativa"/>
   <tr>
	<td>
        	<label>Date (da - a): </label>
        </td>
        <td>
        	<input type="text" name="date" /> 
        </td>
   </tr>
   <tr>
	<td>
           <label>Nome e indirizzo del datore di lavoro: </label> 					
        </td>
         <td>
           <input type="text" name="indirizzoDiLavoro" />
         </td>
   </tr>
   <tr>
       <td>
           <label>Tipo di azienda o settore: </label>
       </td>
       <td>
          <input type="text" name="tipoAzienda" />
       </td>
   </tr>
   <tr>
     <td>
       <label>Tipo di impiego: </label>
     </td>
     <td>
          <input type="text" name="tipoImpiego" />
     </td>
   </tr>
   <tr>
      <td>
         <label>Principali mansioni e responsabilità: </label>
      </td>
      <td>
          <input type="text" name="principaliMansioni" />
      </td>
    </tr>
     <div id="aggiungiForm"> </div>
    <tr>
       <td colspan="2">
          <input type="submit" value="invia dati" />
          </form>
          <button name="invio" onclick=" accoda()">Aggiunge Esperienze</button> 						
          <button name="invio" onclick=" elimina()">Elimina Esperienze</button> 					
        </td>
    </tr>
</table>
</p>
</div>

Questo perchè vorrei che venissero aggiunti altrettanti campi, cioè altri 4 campi identici ma con diverso name, per ogni qualvolta che l'utente clicca sul bottone "AGGIUNGI ESPERIENZE" oppure effettuare l'eliminazione ogni qualvolta clicca "ELIMINA ESPERIENZA".

Sapreste darmi una mano su come poter effettuare questo tipo di procedura?

Grazie anticipatamente.

[manublack]

ho risolto il problema vi posto il codice testato e funzionante in caso qualcuno in futuro avesse il mio stesso problema.


pagina html:

<h3>Esperienza lavorativa</h3>  
     Accoda  
     Rimuovi  
<form action="#" method="post">  
   <div class="fieldset"> 	
      <div class="row"> 		
         <label for="date">Date (da-a)</label> 		
         <input type="text" name="date"> 	
       </div>  	
     <div class="row"> 		
        <label for="nome-indirizzo-datore-lavoro">Nome e indirizzo del datore di lavoro</label> 		
      <input type="text" name="nome-indirizzo-datore-lavoro"> 	
      </div>  	
     <div class="row"> 		
       <label for="tipo-azienda-settore">Tipo di azienda o settore</label> 		
       <input type="text" name="tipo-azienda-settore" > 	
      </div>  	
      <div class="row"> 		
        <label for="tipo-impiego">Tipo di impiego</label> 		
        <input type="text" name="tipo-impiego" > 	
      </div>  	
     <div class="row"> 		
       <label for="mansioni-responsabilita">Principali mansioni e responsabilit&agrave;</label> 		
       <input type="text" name="mansioni-responsabilita">
     </div>
    <div class="test"> 	 	
    </div> 	
    <div id="invia"> 		
        <input type="submit" value="invia"/> 	
    </div>
 </div>
</form>
</body> 
</html>

pagina .js

// JavaScript Document 
var num = 1; 
 function accoda(){       
      alert("aggiunta campo"); 	  
      $(".test").append("<div id=\"div"+num+"\""); 	  
      $(".test").append("<label for='date'>Date (da-a)</label>"); 	  
      $(".test").append("<input type='text' name='date'/>"); 	  
      $(".test").append("</div>"); 	  
      $(".test").append("<div class=\"div"+num+"\">"); 	  
      $(".test").append("<label>Nome e indirizzo del datore di lavoro</label>");
      $(".test").append("<input type='text' name='nome-indirizzo-datore-lavoro'>"); 	  
      $(".test").append("</div>");
      $(".test").append("<div class=\"div"+num+"\">"); 	  
      $(".test").append("<label>Tipo di azienda o settore</label>"); 	  
      $(".test").append("<input type='text' name='tipo-azienda-settore' >"); 	  
      $(".test").append("</div>"); 	  
      $(".test").append("<div class=\"div"+num+"\">"); 	  
      $(".test").append("<label>Tipo di impiego</label>");
      $(".test").append("<input type='text' name='tipo-impiego' >"); 	  
      $(".test").append("</div>"); 	  
      $(".test").append("<div class=\"div"+num+"\">"); 	  
      $(".test").append("<label>Principali mansioni e responsabilit&agrave;</label>"); 	  
      $(".test").append("<input type='text' name='tipo-impiego' >"); 	  
      $(".test").append("</div>"); 	   	  
      num++; 	  
     alert(num);
}  

function rimuovi(){ 	  
    num--; 	  
    $(".test").children().remove();
    alert("#div"+num);
}

file.css

.fieldset{ 	width: 510px; 	height: 130px; }  
.row input, .row label { 	float: left;  	margin: 0;  	width: 250px; }  
.test{ 	width: 510px; 	height: 130px; }  
.test input, .test label { 	float: left;  	margin: 0;  	width: 250px; }  
#invia{ 	width: 150px; }

spero possa essere d'aiuto....

alla prossima

[manublack]

ciao ragazzi....

il codice che ho postato funziona in parte, nel senso che aggiungo dinamicamente i div, ma al momento di eliminare elimina tutti i div che sono stati creati dinamicamente....
io invece vorrei che venissero eliminati a seconda del valore del div con cui sono stati creati...

Sapreste dirmi come faccio a rimuovere i vari div inseriti?

Grazie anticipatamente

[Vindav]

per individuare gli elementi da rimuovere puoi fare riferimento all' attributo class

$(".div"+num).remove();

[manublack]

Originariamente inviato da Vindav
per individuare gli elementi da rimuovere puoi fare riferimento all' attributo class

$(".div"+num).remove();

Ho già provato... ma senza risultato... non cancella niente....

[Vindav]

non funziona perche sbagli a creare i vari div

$(".test").append("<div class=\"div"+num+"\"><label for='date'>Date (da-a)</label><input type='text' name='date' </div>");

altrimenti i vari elementi(label/input) non si trovano all'interno del div

[manublack]

Originariamente inviato da Vindav
non funziona perche sbagli a creare i vari div

$(".test").append("<div class=\"div"+num+"\"><label for='date'>Date (da-a)</label><input type='text' name='date' </div>");

altrimenti i vari elementi(label/input) non si trovano all'interno del div

scusami ma sinceramente non ho capito cosa intendi...

Comunque grazie per il tuo aiuto.

[Vindav]

è molto semplice con un sola chiamata al metodo append devi inserire div e contenuto come mostrato nel codice che ti ho postato

[manublack]

Originariamente inviato da Vindav
è molto semplice con un sola chiamata al metodo append devi inserire div e contenuto come mostrato nel codice che ti ho postato

Quindi dovrei creare, con un solo append, 4 div?

Scusa la domanda ma vorrei solamente capire meglio per arrivare al risultato finale..

Grazie

[Vindav]

no, un append per div