Aggiungere blocco dati

Cristian83

Utente Attivo
16 Apr 2020
20
0
1
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:
HTML:
<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.
 

Cristian83

Utente Attivo
16 Apr 2020
20
0
1
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

Utente Attivo
6 Giu 2018
365
40
28
16
Bassano del Grappa (VI)
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

Utente Attivo
16 Apr 2020
20
0
1
ok grazie ugualmente ho risolto con il seguente codice

JavaScript:
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);
}