Creazione dinamica di campi in un modulo cliccando su un link

[allin81]

Buona domenica

non conosco bene il termine su come cercare questa cosa, magari è una cavolata.

In pratica in un modulo vorrei poter 2 link chiamati "aggiungi" e "rimuovi" e cliccando su aggiungi mi aggiungerebbe 2 campi nel modulo, altrimenti cliccando su rimuovi mi rimuove quello inserito.

Alcuni siti lo fanno per aggiungere le camere di un hotel
Oppure per aggiungere i nomi dei passeggeri per poter prenotare un biglietto
Di default escono solo 2 campi "nome" e "cognome"
Poi cliccando su aggiungi dovrebbero uscire altri 2 campi nome e cognome, ecc ecc

Come potrei cercare?
Inoltre, come dovrei chiamare i nuovi campi che andrei a creare dinamicamente in modo da non fare confusione nell'inserimento nel database?

[allin81]

Forse ho trovato qualcosa che potrebbe tornarmi utile

http://www-db.deis.unibo.it/courses/...textnode2.html

In questo esempio come potrei aggiungere un campo di testo del form?
Perche' se al momento, al posto di "hello world" inserisco "<input type="text" id="fname" name="fname"><br>" quando premo il pulsante mostra il testo e non il campo di testo

[ffw]

Forse ho trovato qualcosa che potrebbe tornarmi utile
"<input type="text" id="fname" name="fname"><br>"

Nel tuo caso dovresti avere anche un contatore che rinomini il name='' dell'input.
name="fname-0"
name="fname-1"
Altrimenti viene processato solo l'ultimo campo.

[allin81]

Nel tuo caso dovresti avere anche un contatore che rinomini il name='' dell'input.
name="fname-0"
name="fname-1"
Altrimenti viene processato solo l'ultimo campo.

si, quello si, pero' ancora non riesco a far uscire l'input uno sotto l'altro

Se la riga

var h = document.createElement("H1");

la modifico in

var h = document.createElement("input");

riesco a mostrare l'input ma non viene messo un rigo sotto, bensi' affianco

Quindi dovrei in primis mettere 2 input per riga (nome e cognome), ed in secondo momento vorrei farli comparire sotto, non affianco

[ffw]

<script>
function myFunction() {
var h = document.createElement("H1");
var t = document.createTextNode("Hello World");
h.appendChild(t);
document.body.innerHTML(h);
}
</script>

[ffw]

<button onclick="myFunction()">Try it</button>


<script>
var id = 3 //<?= $ultimo_id_inserito; ?>;
function myFunction() {
var h = document.createElement("input");
var t = "fname-" + id;
h.name = t;
document.body.append(h);
id++;
}
</script>

[allin81]

pero' vengono creati sempre uno affianco all'altro e non uno sotto l'altro

[ffw]

pero' vengono creati sempre uno affianco all'altro e non uno sotto l'altro

Eccolo in un paragrafo

<script>var id = 3 //<?= $ultimo_id_inserito; ?>;
function myFunction() {
var paragrafo = document.createElement("P");
paragrafo.innerHTML = "<input type='text' name='fname-"+id+"' placeholder='Nome'>";
document.body.append(paragrafo);
id++;
}
</script>

[allin81]

si cosi è perfetto, quindi è P di paragrafo da utilizzare, le avevo provate un po' tutte

Grazie

p.s. e se volessi anche aggiungere un bottone per eliminare una riga inserita per errore? (invece di refreshare la pagina)

[allin81]

cmq ora ho un altro problemino
I campi, non so perche', mi compaiono in fondo alla pagina.
Io li metto tra <tr>e </tr> dove mi serve ma continuano ad uscire in basso a tutto, come potrei risolvere?

<tr>
<td><p>Sconto Terzo letto bambino</p>
<br><a href="#" onclick="myFunction()">Aggiungi un altro range di età</a></td>
<script>var id = 3 //<?= $ultimo_id_inserito; ?>;
function myFunction() {
var paragrafo = document.createElement("p");
paragrafo.innerHTML = "<td colspan='2'>da anni <input type='text' name='da_anni-"+id+"' placeholder='Da anni' class='form-control' size='10'></td> <td colspan='2'> a anni<input type='text' name='a_anni-"+id+"' placeholder='A anni' class='form-control' size='10'></td> <td colspan='2'>% di sconto<input class='form-control' name='sconto_bambino' type='text' id='sconto_bambino' size='10'></td>";
document.body.append(paragrafo);
id++;
}
</script>
</tr>

in pratica vorrei che uscisse come l'esempio che ho fatto qui (da vedere sconto terzo letto bambini)
https://pasteboard.co/zHnUhwO26ynH.png