Aggiunta di 6 campi input dinamici

**Begins** · 23-03-2017, 21:16

Ciao a tutti,
ho il seguente form:

<form name="modulo" action="link.php" method="post">
<input type="text" id="nome1" />
<input type="text" id="cognome1" />
<input type="text" id="indirizzo1" />
<input type="text" id="citta1" />
<input type="text" id="cap1" />
<input type="text" id="provincia1" />
<input type="button" id="inserisci" value="inserisci">
</form>

Vorrei implementare un tasto "aggiunti" per inserire una nuova riga con 6 nuovi campi analoghi per nome2, cognome2, indirizzo2, citta2, cap2 e provincia2, e così via.

E' possibile? In rete trovo solo esempi per aggiungere un campo per volta.

Grazie mille!!!

**KillerWorm** · 23-03-2017, 23:15

Ciao, sì, è certamente possibile. Si può fare comunque in vari modi. Adoperi jQuery? Nel caso potrebbe risultare più semplice la stesura dello script.

Fammi però capire. Ti interessa solo aggiungere una singola riga, oppure devi poterne aggiungere molteplici?
Se fosse solo questione di una riga, potresti risolvere in diverso modo. Ad esempio potresti già strutturare la parte html con la nuova riga, inserendo magari i vari campi dentro un contenitore (ad esempio un semplice div) che renderai inizialmente nascosto via css (con display:none) e attraverso il pulsante potresti semplicemente renderlo visibile.

Eventualmente fornisci maggiori dettagli per capire come meglio ti si può aiutare.

**badaze** · 24-03-2017, 01:23

Prova questo.
2 cose :
- in un form bisogna usare name per poter mandare i dati tramite POST. Ovviamente puoi usare id con il JS ma ricordati che per inviare i dati html ha bisogno solo del name.

- Per mandare i dati bisogna usare un input di tipo submit.

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+'" /><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>
<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>

**Begins** · 25-03-2017, 15:22

Ciao a tutti, vi ringrazio per le indicazioni!
Non utilizzo Jquery, e devo consentire all'utente di inserire massimo 10 righe aggiuntive (una alla volta per ogni clic nel tasto).

La soluzione proposta da badaze fa al caso mio (ti ringrazio tanto), e in merito a questa soluzione volevo chiedere due particolari:
- è possibile limitare l'aggiunta a 10 righe, limitando quindi la variabile indice a un massimo di 10?
- nella soluzione proposta all'aggiunta di ogni riga corrisponde una aggiunta di un div, è possibile effettuare l'aggiunta di nuove righe senza l'apertura e la chiusura di nuovi div? Il motivo è che utilizzo una funzione apposita per recuperare i dati inseriti e poterli inoltrare senza che si attivi il tasto back del browser e questa funzione se i campi sono all'interno di un div non riesce a funzionare correttamente.

Ne approfitto per chiedere, visto che mi ha incuriosito, se la soluzione con CSS si può applicare solo se la riga da aggiungere è una sola, o se si può fare anche con più righe come nel mio caso specifico!

Grazie mille a tutti!

**badaze** · 25-03-2017, 15:55

Originariamente inviata da Begins

Ciao a tutti, vi ringrazio per le indicazioni!
Non utilizzo Jquery, e devo consentire all'utente di inserire massimo 10 righe aggiuntive (una alla volta per ogni clic nel tasto).

La soluzione proposta da badaze fa al caso mio (ti ringrazio tanto), e in merito a questa soluzione volevo chiedere due particolari:
- è possibile limitare l'aggiunta a 10 righe, limitando quindi la variabile indice a un massimo di 10?
- nella soluzione proposta all'aggiunta di ogni riga corrisponde una aggiunta di un div, è possibile effettuare l'aggiunta di nuove righe senza l'apertura e la chiusura di nuovi div? Il motivo è che utilizzo una funzione apposita per recuperare i dati inseriti e poterli inoltrare senza che si attivi il tasto back del browser e questa funzione se i campi sono all'interno di un div non riesce a funzionare correttamente.

Si. Si puo' fare. Ho fatto il 95% del lavoro. Tocca a te adesso. Facci sapere.

Originariamente inviata da Begins

Ne approfitto per chiedere, visto che mi ha incuriosito, se la soluzione con CSS si può applicare solo se la riga da aggiungere è una sola, o se si può fare anche con più righe come nel mio caso specifico!

Grazie mille a tutti!

Si puo' fare di tutto (volendo). Nel tuo caso sarebbe una perdita di tempo.

**Begins** · 25-03-2017, 16:17

Originariamente inviata da badaze

Si. Si puo' fare. Ho fatto il 95% del lavoro. Tocca a te adesso. Facci sapere.

Immagino e ti ringrazio, ma non sono pratico di javascript e mi trovo ad utilizzarlo solo per questa occasione particolare.

**ciro78** · 25-03-2017, 21:51

hai due scenari allora. lo studi oppure apri una discussioni sul forum per le collaborazioni gratuite. qui non si fa il lavoro al posto degli altri.

**Begins** · 25-03-2017, 21:58

Ho chiesto un aiuto, se qualcuno ha piacere di aiutarmi è ben accetto e apprezzerò moltissimo, altrimenti pazienza, non serve rispondere con quella arroganza, assolutamente fuori luogo

**ciro78** · 26-03-2017, 14:18

Originariamente inviata da Begins

Ho chiesto un aiuto, se qualcuno ha piacere di aiutarmi è ben accetto e apprezzerò moltissimo, altrimenti pazienza, non serve rispondere con quella arroganza, assolutamente fuori luogo

l'arroganza sta ad utilizzare un forum e non leggere il regolamento. Non ti serve aiuto ma qualcuno che faccia il lavoro al posto tuo. Per quello ci sono apposite sezioni. Questa chiudo. Per ogni dubbio puoi scrivere in privato.

Grazie

Discussione: Aggiunta di 6 campi input dinamici

Strumenti discussione

Ricerca discussione

Visualizza

Aggiunta di 6 campi input dinamici

Permessi di invio