Aggiungere blocco dati

[Cristian83]

Buonasera a tutti,
Qualcuno può aiutarmi ad inserire javascri a questo codice?
in prtica dovrei realizzare l'inserimento di dati anagrafici come nell'esempio sotto:

<div style="background: #B1B1B1; padding: 4.5; width: 100%;">
<center><font color="#f2f2f2" face="verdana">DICHIARAZIONE DI STATO DI FAMIGLIA - PRIMO COMPONENTE</font></center>

</div>
&nbsp;
<div style="background: #f3f3f3; height: ; width: 100%; ">
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-default"><font face="verdana">Codice fiscale</font><font color="red">&nbsp;*</font></span></div>
<input type="text"  aria-describedby="inputGroup-sizing-default" aria-label="Default" class="form-control" id="codice_fiscale" oninput="handleInput(event)" placeholder="Es. RSSNTN66...." value="" /></div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="input-group mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-default"><font face="verdana">Nome</font><font color="red">&nbsp;*</font></span></div>
<input aria-describedby="inputGroup-sizing-default" aria-label="Default" class="form-control" id="nome" oninput="handleInput(event)" placeholder="Es. Antonio" type="text" value="" /></div>
</div>

<div class="col-xs-6 col-md-6">
<div class="input-group mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-default"><font face="verdana">Cognome</font><font color="red">&nbsp;*</font></span></div>
<input aria-describedby="inputGroup-sizing-default" aria-label="Default" class="form-control" id="cognome" oninput="handleInput(event)" placeholder="Es. Rossi" type="text" value="" /></div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-default"><font face="verdana">Luogo di nascita</font><font color="red">&nbsp;*</font></span></div>
<input aria-describedby="inputGroup-sizing-default" aria-label="Default" class="form-control" id="luogo_di_nascita" maxlength="" oninput="handleInput(event)" placeholder="Es. Milano" type="text" value="" /></div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-default"><font face="verdana">Data di nascita</font><font color="red">&nbsp;*</font></span></div>
<input aria-describedby="inputGroup-sizing-default" aria-label="Default" class="form-control" id="gg_mm_aaaa" maxlength="10" placeholder="Es. 01/01/1999" type="date" value="" /></div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend"><span class="input-group-text" id="inputGroup-sizing-default"><font face="verdana">Grado di parentela</font></span></div>
<input aria-describedby="inputGroup-sizing-default" aria-label="Default" class="form-control" id="parentela" placeholder="es... Figlio/a" type="text" value="" /></div>
</div>
</div>
</div>

Senza che la pagina diventi kilometrica, chiedevo se qualcuno di vuoi puo aiutarmi a realizzare uno script in javascript che aggiunge tutto il blocco come nel codice illustrato ovviamente deve darmi la possibilità di potermi far modificare gli id degli input per ogni blocco esempio id="codice_fiscale" nel secondo blocco id="codice_fiscale_2" ecc.. i blocchi dovranno essere 7
Grazie infinitamente.

 

[Leonardo Scotti]

Ma poi vuoi inserire i dati in un database? o cosa?

 

[Cristian83]

Ciao Leonardo credo che la mia richiesta sia definita in modo comprensibile... almeno spero
non devo inserire i dati nel database ma, forse meglio dire (clonare, duplicare.... i blocchi ovvero gli input presenti all'interno....)

Ti faccio un esempio piu pratico o quantomeno comprensibile

hai presente un sito web ecommerce? bene devo aggiungere dei prodotti
esempio:

caffe | pasta| pane | olio | zucchero| ecc.... bene... anziche creare una montagna di codice per ripetere la stessa cosa io clicco sul pulsantino e mi genera "ovviamentee in questo esempio" una nuova riga dove inserire : caffe | pasta| pane | olio | zucchero| ecc....

Questo è solo un esempio ovviamente prendi in considerazione il primo post

 

[Tommy03]

Da qual che ho capito, potresti creare una funziona crea(parametro) che richiami con il body onload e cosi per ogni campo che ti serve riproduci lo stesso codice (ovviamente con l'ID dell input differente, passato con il parametro)

 

[Cristian83]

mi faresti un esmpio di codice se puoi tommy grazie

 

[Cristian83]

ok grazie ugualmente ho risolto con il seguente codice

document.getElementById('button').onclick = duplicate;


var i = 0;
var original = document.getElementById('duplicater');

function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicetor" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
}

 

[Leonardo Scotti]

in alternativa potresti creare una classe su javascript e usare AppendChild per creare nuovi elementi sul modello precreato