?
let typ_zakladatela = document.getElementById('typ_zakladatela');
let fyz_osoba_form = document.getElementById('fyz_osoba_form');
let prav_osoba_form = document.getElementById('prav_osoba_form');
let hotovo_btn = document.getElementById('hotovo');
let addRows = document.getElementById('1');
let addNewPerson = document.getElementById('addNewPerson');
let forms = document.querySelectorAll('.form');
prav_osoba_form.style.display = "none";
// changing form depening on selected item
typ_zakladatela.addEventListener('change', () => {
let selected_value = typ_zakladatela.value;
if(selected_value === "Fyzická osoba"){
fyz_osoba_form.style.display = "block";
prav_osoba_form.style.display = "none";
}else {
prav_osoba_form.style.display = "block";
fyz_osoba_form.style.display = "none";
}
});
// add person
hotovo_btn.addEventListener('click', () => {
let selected_value = typ_zakladatela.value;
let fyz_meno = document.getElementById('fyz_meno').value;
let fyz_priezvisko = document.getElementById('fyz_priezvisko').value;
let prav_meno = document.getElementById('meno').value;
let prav_priezvisko = document.getElementById('priezvisko').value;
if(selected_value === "Fyzická osoba"){
addRows.textContent = fyz_meno + " " + fyz_priezvisko;
}else {
addRows.textContent = prav_meno + " " + prav_priezvisko;
}
});<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<form action="#" class="form">
<div class="form-group">
<label for="typ_zakladatela">TYP ZAKLADATE?A *</label>
<select class="form-control" name="typ_zakladatela" id="typ_zakladatela" autofocus>
<option value="Fyzická osoba">Fyzická osoba</option>
<option value="Právnicka osoba">Právnicka osoba</option>
</select>
</div>
<hr>
<!-- form pre fyzicku osobu -->
<div id="fyz_osoba_form">
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="pohlavie">POHLAVIE *</label>
<select class="form-control" name="pohlavie" id="pohlavie" required>
<option value="Mu?">Mu?</option>
<option value="?ena">?ena</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-3">
<label for="titul">TITUL PRED MENOM</label>
<input type="text" name="titul" id="titul" class="form-control" required placeholder="Názov ulice / námestia">
</div>
<div class="col-sm-3">
<label for="fyz_meno">MENO *</label>
<div class="row">
<input type="text" name="fyz_meno" id="fyz_meno" class="form-control" required>
</div>
</div>
<div class="col-sm-3">
<label for="fyz_priezvisko">PRIEZVISKO *</label>
<div class="row">
<input type="text" name="fyz_priezvisko" id="fyz_priezvisko" class="form-control" required>
</div>
</div>
<div class="col-sm-3">
<label for="titul_za">TITUL ZA MENOM</label>
<div class="row">
<input type="text" name="titul_za" id="titul_za" class="form-control">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="ico">ULICA/NáMESTIE *</label>
<input type="text" name="ico" id="ico" class="form-control" required placeholder="Názov ulice / námestia">
</div>
<div class="col-sm-6">
<label for="supisne_cislo">SúPISNé ?íSLO / ORIENTA?Né ?íSLO *</label>
<div class="row">
<input type="text" name="supisne_cislo" id="supisne_cislo" class="form-control col-sm-3" required>
<input type="text" name="orientacne_cislo" id="orientacne_cislo" class="form-control col-sm-3" required>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-8">
<label for="obec">OBEC *</label>
<input type="text" name="obec" id="obec" class="form-control" required>
</div>
<div class="col-sm-4">
<label for="psc">PS? *</label>
<input type="number" name="psc" id="psc" class="form-control" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="fyz_stat">?TáT *</label>
<select class="form-control" name="fyz_stat" id="fyz_stat" required>
<option value="1">1</option>
</select>
</div>
<div class="col-sm-3">
<label for="d_narodenia_fyz">DáTUM NARODENIA *</label>
<input type="date" name="d_narodenia_fyz" id="d_narodenia_fyz" class="form-control" required>
</div>
<div class="col-sm-3">
<label for="rodne_cislo">RODNé ?íSLO *</label>
<div class="row">
<input type="text" name="rodne_cislo_fyz" id="rodne_cislo_fyz" class="form-control col-sm-3" required>
<input type="text" name="rodne_cislo2_fyz" id="rodne_cislo2_fyz" class="form-control col-sm-3" required>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="doklad_totoz">TYP DOKLADU TOTO?NOSTI *</label>
<select class="form-control" name="doklad_totoz" id="doklad_totoz" required>
<option value="Ob?iansky preukaz">Ob?iansky preukaz</option>
<option value="Pas">Pas</option>
<option value="Iny doklad">Iny doklad</option>
</select>
</div>
<div class="col-sm-6">
<label for="cislo_dokladu">?íSLO DOKLADU TOTO?NOSTI *</label>
<input type="text" name="cislo_dokladu" id="cislo_dokladu" class="form-control" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<label for="vyska_vkladu">VY?KA VKLADU *</label>
<input type="number" name="vyska_vkladu" id="vyska_vkladu" class="form-control" required placeholder="€">
</div>
<div class="col-sm-4">
<label for="podiel_v_spolocnosti">PODIEL V SPOLO?NOSTI *</label>
<input type="number" name="podiel_v_spolocnosti" id="podiel_v_spolocnosti" class="form-control" required placeholder="%">
</div>
<div class="col-sm-4">
<label for="rozsah_splatenia_vkladu">ROZSAH SPLATENIA VKLADU *</label>
<input type="number" name="rozsah_splatenia_vkladu" id="rozsah_splatenia_vkladu" class="form-control" required placeholder="€">
</div>
</div>
</div>
<h3 id="reg_trestov" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">údaje pre vypis z registra trestov ↓</h3>
<div class="collapse" id="collapseExample">
<p>Aby mohol za vás ?ivnostensky úrad online vy?iada? vypis z registra trestov konate?a, vy?aduje nasledovné údaje:</p>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="miesto_narodenia">MIESTO NARODENIA *</label>
<input type="text" name="miesto_narodenia" id="miesto_narodenia" class="form-control" required placeholder="Napr. Bratislava">
</div>
<div class="col-sm-6">
<label for="statna_prislusnost">?TáTNA PRíSLU?NOS? *</label>
<input type="text" name="statna_prislusnost" id="statna_prislusnost" class="form-control" required placeholder="Napr. Slovenska">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="rodne_priezvisko">RODNé PRIEZVISKO *</label>
<input type="text" name="rodne_priezvisko" id="rodne_priezvisko" class="form-control" required>
</div>
<div class="col-sm-6">
<label for="predchadzajuce_priezvisko">PREDCHáDZAJúCE PRIEZVISKO</label>
<input type="text" name="predchadzajuce_priezvisko" id="predchadzajuce_priezvisko" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="meno_otca">MENO OTCA *</label>
<input type="text" name="meno_otca" id="meno_otca" class="form-control" required>
</div>
<div class="col-sm-6">
<label for="priezvisko_otca">PRIEZVISKO OTCA *</label>
<input type="text" name="priezvisko_otca" id="priezvisko_otca" class="form-control" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<label for="meno_matky">MENO MATKY *</label>
<input type="text" name="meno_matky" id="meno_matky" class="form-control" required>
</div>
<div class="col-sm-4">
<label for="priezvisko_matky">PRIEZVISKO MATKY *</label>
<input type="text" name="priezvisko_matky" id="priezvisko_matky" class="form-control" required>
</div>
<div class="col-sm-4">
<label for="rodne_priezv_matky">RODNé PRIEZVISKO MATKY *</label>
<input type="text" name="rodne_priezv_matky" id="rodne_priezv_matky" class="form-control" required>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-success" id="addNewPerson">Pridat Osobu</button>
</div>
<!-- form pre pravnicku osobu -->
<div id="prav_osoba_form">
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="ico">I?O</label>
<input type="text" name="ico" id="ico" class="form-control">
</div>
<div class="col-sm-6">
<label for="obchodne_meno">OBCHODNé MENO *</label>
<input type="text" name="obchodne_meno" id="obchodne_meno" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="ico">ULICA/NáMESTIE *</label>
<input type="text" name="ico" id="ico" class="form-control" required placeholder="Názov ulice / námestia">
</div>
<div class="col-sm-6">
<label for="supisne_cislo">SúPISNé ?íSLO / ORIENTA?Né ?íSLO *</label>
<div class="row">
<input type="text" name="supisne_cislo" id="supisne_cislo" class="form-control col-sm-3" required>
<input type="text" name="orientacne_cislo" id="orientacne_cislo" class="form-control col-sm-3" required>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-8">
<label for="obec">OBEC *</label>
<input type="text" name="obec" id="obec" class="form-control" required>
</div>
<div class="col-sm-4">
<label for="psc">PS? *</label>
<input type="number" name="psc" id="psc" class="form-control" required>
</div>
</div>
</div>
<div class="form-group">
<label for="stat">?TáT *</label>
<select class="form-control" name="stat" id="stat" required>
<option value="1">1</option>
</select>
</div>
<h3>Zastúpenie osobou (konate?)</h3>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="meno">Meno *</label>
<input type="text" name="meno" id="meno" class="form-control" required>
</div>
<div class="col-sm-6">
<label for="priezvisko">PRIEZVISKO *</label>
<input type="text" name="priezvisko" id="priezvisko" class="form-control" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="d_narodenia">DáTUM NARODENIA *</label>
<input type="date" name="d_narodenia" id="d_narodenia" class="form-control" required>
</div>
<div class="col-sm-6">
<label for="rodne_cislo">RODNé ?íSLO *</label>
<div class="row">
<input type="text" name="rodne_cislo" id="rodne_cislo" class="form-control col-sm-3" required>
<input type="text" name="rodnce_cislo2" id="rodnce_cislo2" class="form-control col-sm-3" required>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<label for="vyska_vkladu">VY?KA VKLADU *</label>
<input type="number" name="vyska_vkladu" id="vyska_vkladu" class="form-control" required placeholder="€">
</div>
<div class="col-sm-4">
<label for="podiel_v_spolocnosti">PODIEL V SPOLO?NOSTI *</label>
<input type="number" name="podiel_v_spolocnosti" id="podiel_v_spolocnosti" class="form-control" required placeholder="%">
</div>
<div class="col-sm-4">
<label for="rozsah_splatenia_vkladu">ROZSAH SPLATENIA VKLADU *</label>
<input type="number" name="rozsah_splatenia_vkladu" id="rozsah_splatenia_vkladu" class="form-control" required placeholder="€">
</div>
</div>
</div>
<button type="button" class="btn btn-success">Pridat Osobu</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Zrusi?</button>
<button type="submit" id="hotovo" class="btn btn-secondary" data-dismiss="modal">Hotovo</button>
</div>
</form>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>?
嘿，伙计们，我有一个form，包括像姓名、地址等人的数据。然后我有一个button“添加新的人”。我只是感到困惑，因为在点击按钮后，应该创建相同的表单，以便用户可以填写有关第二个人的数据，但这可能是后端的问题，以区分这两个表单，而且name和id将是相同的。有没有办法创建一些动态的form，这样我就可以知道哪个人是哪个人？谢谢你的帮助
转载请注明出处:http://www.bizarre-animals.com/article/20230401/2187009.html