在单击按钮后添加新的动态表单

?

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 &darr;</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“添加新的人”。我只是感到困惑,因为在点击按钮后,应该创建相同的表单,以便用户可以填写有关第二个人的数据,但这可能是后端的问题,以区分这两个表单,而且nameid将是相同的。有没有办法创建一些动态的form,这样我就可以知道哪个人是哪个人?谢谢你的帮助

转载请注明出处:http://www.bizarre-animals.com/article/20230401/2187009.html