Campi dinamici + autocompletamento

**Begins** · 01-04-2017, 18:32

Ho realizzato, grazie all'aiuto che Badaze (http://forum.html.it/forum/member.php?userid=40240) mi ha dato in una discussione in questo forum, un form con l'aggiunta di campi dinamici tramite pressione di un tasto, come segue:

codice:

codice HTML:
<!DOCTYPE html><html>
<head>
<title>Untitled</title>
<script>
var indice =0;
function inserisci(){
  indice++;
  var html =""; 
  html ='<br/><div id="subDiv'+indice+'">Modulo:'+indice+'<br/>';  
  html = html +'Nome :<input type="text" name="nome'+indice+'" id="nome'+indice+'"/><br/>';  
  html = html +'Cognome :<input type="text" name="cognome'+indice+'"/><br/>';
  html = html +'Indirizzo :<input type="text" name="indirizzo'+indice+'" /><br/>';
  html = html +'Città :<input type="text" name="citta'+indice+'" /><br/>';
  html = html +'CAP :<input type="text" name="cap'+indice+'" /><br/>';
  html = html +'Provincia :<input type="text" name="provincia'+indice+'" /></div>'; 
  document.getElementById('mydiv').innerHTML = document.getElementById('mydiv').innerHTML + html;
 
}
</script>
</head>
<body>
<inputtype="button"id="inserisci"value="inserisci"onclick="inserisci()">
<hr/>
<formname="modulo"action="link.php"method="post">
 <divid="mydiv">
 </div>
 <inputtype="submit"name="invia"value="Invia">
</form>
 <hr/> 
</body>
</html>

Ho poi aggiunto a un campo dei 6 inseriti l'auto completamento tramite lo script seguente:

codice HTML:
<script>  
$(function(){    
var availableTags =[      
"Andrea","Marco","Anna","Fernando"    
];    
$("#nome1").autocomplete({      
source: availableTags    
});  
});  
</script>

Come mai l'autocompletamento sul campo input nome1 (relativo alla prima aggiunta dopo aver premuto una volta il tasto) non funziona?
Considerate che se invece il campo input nome1 viene già inserito via html e non tramite il tasto di aggiunta l'autocompletamento funziona perfettamente.

Come posso combinare le due esigenze? Dove sbaglio?

Grazie mille

**badaze** · 01-04-2017, 22:02

Hai settato #nome1 mentre puoi anche avere #nome2, #nome3 etc...

**Begins** · 01-04-2017, 22:06

Lo so è una prova, ma non va nemmeno nome1

**badaze** · 03-04-2017, 16:29

Bisogna capire come funziona un programma. Prima di inserire l'elemento 1 questo non esiste visto che è creato dinamicamente. Quindi l'autocompletamento deve essere creato dopo della creazione dell'elemento.

Codice PHP:


<!DOCTYPE html><html>
<head>
<title>Untitled</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
var availableTags =[ "Andrea","Marco","Anna","Fernando" ]; 
function ac(anId) {
        $(anId).autocomplete({ source: availableTags });
}
var indice =0;
function inserisci(){
indice++;
var html =""; 
html ='<br/><div id="subDiv'+indice+'">Modulo:'+indice+'<br/>'; 
html = html +'Nome :<input type="text" name="nome'+indice+'" id="nome'+indice+'"/><br/>'; 
html = html +'Cognome :<input type="text" name="cognome'+indice+'"/><br/>';
html = html +'Indirizzo :<input type="text" name="indirizzo'+indice+'" /><br/>';
html = html +'Città :<input type="text" name="citta'+indice+'" /><br/>';
html = html +'CAP :<input type="text" name="cap'+indice+'" /><br/>';
html = html +'Provincia :<input type="text" name="provincia'+indice+'" /></div>'; 
document.getElementById('mydiv').innerHTML = document.getElementById('mydiv').innerHTML + html;
ac("#nome"+indice);
}
</script>
</head>
<body>
<input type="button" id="inserisci" value="inserisci" onclick="inserisci()">
<hr/>
<form name="modulo" action="link.php" method="post">
<div id="mydiv">
</div>
<input type="submit" name="invia" value="Invia">
</form>
<hr/> 
</body>
</html>

**ciro78** · 04-04-2017, 10:41

ciao begins usa il tag code per postare il codice.

Discussione: Campi dinamici + autocompletamento

Strumenti discussione

Ricerca discussione

Visualizza

Campi dinamici + autocompletamento

Permessi di invio