suulut_sdj Novice
04. august 2019 - 17:37 Der er 3 kommentarer

tilføje input felt via button

Jeg vil gerne tilføje input felter til en form via javascript.
Mit script fungerer kun halvt :-/ Når jeg trykker på knappen igen, forbliver der kun et input felt, men værdien(placeholder) ændrer sig til to osv. osv. Så mine værdier er rigtige men mangler bare at der kommer flere input felter
Her er min kode:
<div id = "java"></div>           
<button id="clickme">Tilfør ingrediens</button>   

<script>
var button = document.getElementById("clickme");
  count = 0;
    button.onclick = function()
    {
        count += 1;
        for (i=0; i<=count; i++)
        {
        var formgroup ='<div class="form-group">';
        var label='<label class="col-md-4 control-label">Indtast navnet p</label>';
        var md8='<div class="col-md-8 inputGroupContainer">';
        var inputgroup = '<div class="input-group">';
        var addon = '<span class="input-group-addon"></span>';
        var input = '<input name="ingrediens"' + [i] +' placeholder="' + i +'" class="form-control"  type="text">';
        var div = '</div></div></div>';
       
        var res = formgroup + label + md8 +  inputgroup + addon + input + div;
        }
        document.getElementById("java").innerHTML = res;
       
    }
       
</script>
Slater Ekspert
04. august 2019 - 18:07 #1
Det er dumt at tilføje flere felter via en løkke på den måde, fordi det gør at de eksisterende bliver slettet og tegnet igen hver gang der opdateres, så allerede indtastet data forsvinder. I stedet bør du bare tilføje de nye felter når der trykkes på knappen.

Samme tip har jeg givet i en tidligere tråd her: https://www.computerworld.dk/eksperten/spm/1028064

Og det relevante kodeeksempel er her: http://snip.kilolima.dk/#/APrrOFq
suulut_sdj Novice
05. august 2019 - 17:22 #2
Tak for din kommentar, har ændret lidt i mit script, men er ikke kommet til den endelige løsning :-(
Jeg får et input felt ved første klik :-)
men ved andet klik er det kun placeholder der skifter fra 1 til 2, så ved jeg at counteren virker.
Min kode:
<div id = "java"></div>           
<button id="clickme">Tilføj ingrediens</button>   

<script>
var button = document.getElementById("clickme");
  count = 0;
    button.onclick = function()
    {
        count += 1;
       
    var formgroup ='<div class="form-group">';
    var label='<label class="col-md-4 control-label">Indtast ingrediensen</label>';
        var md8='<div class="col-md-8 inputGroupContainer">';
        var inputgroup = '<div class="input-group">';
        var addon = '<span class="input-group-addon"></span>';
        var input = '<input name="ingrediens" placeholder="' + count +'" class="form-
        control"  type="text">';
        var div = '</div></div></div>';
   
        var res = formgroup + label + md8 +  inputgroup + addon + input + div;
       
    document.getElementById("java").innerHTML = res;
    }
</script>
Har også prøvet at lege med den snip du linkede til.
Her får jeg et inputfelt frem hver gang jeg klikker, og det følger css stylen :-)
Men der skal komme tre forskellige input felter frem, dem får jeg frem, men så følger det ikke css stylen ordentligt :-/
Hvordan får jeg det opbygget korrekt, har forsøgt mig med appendchild()
Den korrekte opbygning af et enkelt inputfelt ser sådan herud:
<div class="form-group">
                <label class="col-md-4 control-label">Indtast ingrediens</label> 
                <div class="col-md-8 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"></span>
                    <input Name="ingrediens[<?php echo $i; ?>]" placeholder="Ingrediens" class="form-control"  type="text">
                  </div>
                </div>
            </div>

scriptet er her:
<section id="download" class="section feature">
        <div class="container">
            <div class="col-lg-12 text-center" id="test">
                <fieldset>
                    <legend>Opret opsktift</legend>
                        <div class="form-group">
                <label class="col-md-4 control-label">Vælg kategori</label> 
                <div class="col-md-8 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"></span>
                    <select name="kategori" placeholder="Kategori" class="form-control"  type="text" required autofocus>
                        <?php    while ($row = $stmt_row->fetch()) { ?>
                            <option value="<?php echo $row['id']; ?>"><?php echo $row['type']; ?></option>
                        <?php } ?>
                    </select>
                  </div>
                </div>
            </div>
       
</div>               
<button id="clickme">Tilfør ingrediens</button>   

<script>
var button = document.getElementById("clickme"),
  count = 0;
    button.onclick = function()
    {
        count += 1;
       
        var my_container = document.getElementById("test");
 
        var classdiv = document.createElement("div");
        classdiv.setAttribute("class", "form-group");
               
        var label_ing = document.createElement("label");
        label_ing.setAttribute("class", "col-md-4 control-label");
        label_ing.innerHTML="Indtast ingrediens";
       
        var label_antal = document.createElement("label");
        label_antal.setAttribute("class", "col-md-4 control-label");
        label_antal.innerHTML="Indtast antal";
       
        var label_maal = document.createElement("label");
        label_maal.setAttribute("class", "col-md-4 control-label");
        label_maal.innerHTML="Indtast maal";
 
        var colmd = document.createElement("div");
        colmd.setAttribute("class", "col-md-8 inputGroupContainer");
       
        var inputgroup = document.createElement("div");
        inputgroup.setAttribute("class", "input-group");
 
        var span = document.createElement("span");
        span.classList.add("input-group-addon");
       
        /*
        //hidden
        var hidden = document.createElement('input');
        hidden.setAttribute("name", "id" + [count]);
        hidden.setAttribute("type", "hidden");
        hidden.setAttribute("value", count);
        my_container.appendChild(hidden);
        */
 
        //ingrediens
        var ingrediens = document.createElement('input');
        ingrediens.setAttribute("name", "opskrift" + [count]);
        ingrediens.setAttribute("type", "text");
        ingrediens.setAttribute("placeholder", "Navnet på ingrediensen" + count);
        ingrediens.setAttribute("class", "form-control");
       
        inputgroup.appendChild(span);
        inputgroup.appendChild(ingrediens);
        colmd.appendChild(inputgroup);
        classdiv.appendChild(label_ing);
        classdiv.appendChild(colmd);
       
        my_container.appendChild(classdiv); //udskriver til test
       
        // Antal
        var antal = document.createElement('input');
        antal.setAttribute("type", "text");
        antal.setAttribute("placeholder", "Antal");
        antal.setAttribute("class", "form-control");
        antal.setAttribute("name", "antal" + [count]);
       
        inputgroup.appendChild(span);
        inputgroup.appendChild(antal);
        colmd.appendChild(inputgroup);
        classdiv.appendChild(label_antal);
        classdiv.appendChild(colmd);
       
        my_container.appendChild(classdiv); //udskriver til test
       
        //maal
        var maal = document.createElement('input');
        maal.setAttribute("name", "opskrift" + [count]);
        maal.setAttribute("type", "text");
        maal.setAttribute("placeholder", "maal" + count);
        maal.setAttribute("class", "form-control");
       
        inputgroup.appendChild(span);
        inputgroup.appendChild(maal);
        colmd.appendChild(inputgroup);
        classdiv.appendChild(label_maal);
        classdiv.appendChild(colmd);
       
        my_container.appendChild(classdiv);//udskriver til test
    };
</script>   
        </div>
    </section>
Slater Ekspert
05. august 2019 - 19:14 #3
Til sådan nogle komplicerede strukturer der skal ændres og duplikeres, vil jeg stærkt anbefale at lære og benytte et front-end template framework som f.eks. Angular, Vue, Knockout, osv. Jeg foretrækker selv Vue, men det er hvad man selv synes - de kan alle gøre den slags meget simplere og mere overskueligt end manuelt.

F.eks. kan du gøre hvad du ønsker med så lidt kode som dette:
http://snip.kilolima.dk/#/sedGqar
Flere felter tilføjes helt som du normalt ville i HTML.

Det er dog kun for at gøre det lettere at overskue. Det du har forsøgt der kan også virke ganske glimrende, og du er meget tæt på at have den i det du viser. Så vidt jeg kan se er det eneste problem at dine labels er et niveau for langt ude, og bør lægge sig til de enkelte inputs - korrekt?
Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links

Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester





Premium
Test: Huaweis Matebook X er særlig laptop med en svaghed, som du skal være opmærksom på
Huawei beviser endnu en gang, at de sagtens kan mingle sig med de bedste pc-producenter. Men alligevel skyder selskabet lidt ved siden af, med sin nyeste maskine.
Computerworld
Bitcoinen nåede lige at kulminere igen – men så kom krakket
Der blev sat en ny rekord for bitcoinens værdi i år – men godt 24 timer efter blev der høvlet næsten 20.000 kroner af den.
CIO
Podcast: Her er seks gode råd om ledelse og digitalisering fra danske top-CIO'er
The Digital Edge: Vi har talt med 17 af Danmarks dygtigste digitale ledere - og samlet deres seks bedste råd om digitalisering og ledelse. Få alle rådene på 26 minutter i denne episode af podcasten The Digital Edge.
Job & Karriere
Se Waoos forklaring: Derfor har selskabet fyret topchef Jørgen Stensgaard med omgående virkning
Waaos bestyrelse opsiger fiberselskabets topchef, Jørgen Stensgaard, der fratræder med omgående virkning. Se hele forklaringen fra Waao her.
White paper
Sådan kan du arbejde effektivt uanset tid, sted og type af enhed
Hvad nu hvis dit arbejde, din information, dine processer og teknologien bag ved, var organiseret på en måde så det passede til din organisation – alt sammen guidet af en intelligent udgave af det digitale arbejdsrum? Det er visionen bag Atea og Citrix´s samarbejde med digital workspace – en smartere og mere effektiv måde at arbejde på. I dette whitetpaper kan du derfor læse om, hvordan du kan skabe et mere effektivt og brugervenligt arbejdsrum uanset tid, sted og enhed. En løsning der på en gang er både enkel og som sætter brugeren i centrum.