CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

steen_hansen Forsker

06. juni 2015 - 19:31 Der er 9 kommentarer og
1 løsning

Tryk på Button skal tilføje række med x antal DIVs

Jeg mangler en funktion på en side, som kan tilføje en række med x antal DIVs på denne række.

Denne funktion skal kunne fungere i x antal afsnit, men det er jo bare at kopiere JavaScript/HTML ned det antal gange det ønskes, og tilrette overskrift, names/IDs m.m.

I hver enkelt afsnit skal man til højre for overskriften kunne tilføje én række ad gangen. Om der skal noget onClick til, aner jeg ikke. Nu har jeg i det viste eksempel valgt <input type="submit">.

Som udgangspunkt vil der til en start bare være tomme afsnit nederst på siden, som vil se nogenlunde sådan her ud:

NYOPSÆTNING AF HARDWARE [Button Tilføj række til registrering af nyopsat hardware]

NEDTAGNING AF HARDWARE [Button Tilføj række til registrering af nedtaget hardware]

Når man tilføjer ekstra rækker i de respektive afsnit, kommer siden til at se nogenlunde sådan her ud (data udfyldes i de enkelte tekstbokse. Når man er færdig med én række, trykker man på [Button Tilføj række til registrering af nyopsat hardware] for at udfylde det næste sæt data, og den første textbox får automatisk fokus):

NYOPSÆTNING AF HARDWARE [Button Tilføj række til registrering af nyopsat hardware]

[textbox_add_new_hw_1] [textbox_add_new_hw_2] [textbox_add_new_hw_3] [Button Slet denne unikke række] (<- første tilføjede række)
[textbox_add_new_hw_4] [textbox_add_new_hw_5] [textbox_add_new_hw_6] [Button Slet denne unikke række] (<- anden tilføjede række)
[textbox_add_new_hw_7] [textbox_add_new_hw_8] [textbox_add_new_hw_9] [Button Slet denne unikke række] (<- tredie tilføjede række)

NEDTAGNING AF HARDWARE [Button Tilføj række til registrering af nedtaget hardware]
[textbox_remove_hw_1] [textbox_remove_hw_2] [textbox_remove_hw_3] [Button Slet denne unikke række] (<- første - og i dette tilfælde eneste - tilføjede række)

Det hele bliver så submitted til allersidst, når man er færdig med at udfylde hele formularen, og det bliver lagt ned i en database. Så værdien i hver enkelt textbox skal have tildelt deres unikke name og id, før det kan smides i en database. Det kan vel klares med en for-next løkke? Det skal være op til dig.

Den næstsidste ting:
1. Man opdager, at man allerede har indtastet data på en given hardware. Denne række er påbegyndt, nogle af (eller alle) textboxene indeholder et eller andet
2. Man får trykket på [Button Tilføj række til registrering af nyopsat hardware], men når ikke at udfylde noget, før man opdager, at man egentlige ikke skulle bruge denne ekstra række

Så skal følgende ske, når man trykker på [Button Slet denne unikke række] på den givne række:
1. Jeg starter med at indtaste, men finder ud af, at jeg allerede har indtastet denne vare én gang. rækken skal slettes, det var en fejl. Men jeg vil gerne have en popup op, som advarer mig om, at felterne ikke er tomme. "Vil du slette denne række alligevel? Data vil gå tabt! [Button Ja] / [Button Nej]"
2. Alle textboxe er tomme, slet bare rækken øjeblikkeligt; intet går tabt.

ALLER SIDSTE TING
Kan det lade sig gøre at få en eller anden form for tabindex på den enkelte af de 3 textboxe + [Button Slet denne unikke række], så det bliver lækkert, nemt og hurtigt for brugerne at tabulere sig igennem den pågældende række? Jeg tænkte, at man for hver række kan lave et selvstændigt script/tabindex, så man på den enkelte række tabulerer sig fra første felt og mod højre. Og det kunne fungere på samme måde for den næste række man tilføjer. Næste gang, der tilføjes en række, kan man vel tage den sidste værdi af tabindex og lægge 1 til? Tænkt eksempel:

Jeg tilføjer den første linie, og indtaster mine data. Første tabindex vil blive 1000, og hhv 1001, 1002 og 1003 for:
[textbox_add_new_hw_1 tabindex="1000"] [textbox_add_new_hw_2 tabindex="1001"] [textbox_add_new_hw_3 tabindex="1002"] [Button Slet denne unikke række tabindex="1003"]

Uanset hvilet afsnit jeg nu vælger at oprette en ekstra række i, fortsættes hvor vi slap med den første linie. Næste tabindex bliver altså 1004:
[textbox_remove_hw_1 tabindex="1004"] [textbox_remove_hw_2] tabindex="1005" [textbox_remove_hw_3 tabindex="1006"] [Button Slet denne unikke række tabindex="1007"]

Submit allernederst på siden kan jeg bare give et meget højt tabindex, så man er sikker på, at den vil få fokus til aller-aller sidst. F.eks. <input type="submit" tabindex="5000">

HTML ser ud som nedenfor. Jeg håber én af eksperterne kan fylde noget JavaScrpting ind, og udføre dette for 200 point :)

<html>

<head></head>

<body onload="document.frmNewHardware.a.focus();"> <-?

<div class="container">
<form name="frmNewHardware">
<div>NYOPSÆTNING AF HARDWARE<input type="submit" name="addnewrow" value="Tilføj ny hardware" tabindex="?"></div>
<div style="float: left;"><input type="textbox" class="input" name="a1" id="a1" tabindex="?"></div>
<div style="float: right;"><input type="textbox" class="input" name="a2" id="a2" tabindex="?"></div>
<div style="float: right;"><input type="textbox" class="input" name="a3" id="a3" tabindex="?"></div>
<div style="float: right;"><input type="submit" name="deletethisrow" value="Slet" tabindex="?"></div>
<div style="clear: both;"></div>
</form>
<form name="frmWithdrawnHardware">
<div>NEDTAGNING AF HARDWARE<input type="submit" name="addnewrow" value="Nedtag hardware" tabindex="?"></div>
<div style="float: left;"><input type="textbox" class="input" name="b1" id="b1" tabindex="?"></div>
<div style="float: right;"><input type="textbox" class="input" name="b2" id="b2" tabindex="?"></div>
<div style="float: right;"><input type="textbox" class="input" name="b3" id="b3" tabindex="?"></div>
<div style="float: right;"><input type="submit" name="deletethisrow" value="Slet" tabindex="?"></div>
<div style="clear: both;"></div>
</form>
</div>

</body>

</html>

Synes godt om

steen_hansen Forsker

07. juni 2015 - 12:03 #1

Der var lige en tanketorsk mht. HTML:

<html>

<head></head>

<body onload="document.frmNewHardware.a.focus();"> <-?

<form name="frmRegister">
<div class="container">
<div>NYOPSÆTNING AF HARDWARE<input type="submit" name="addnewrow" value="Tilføj ny hardware" tabindex="?"></div>
<div style="float: left;"><input type="textbox" class="input" name="a1" id="a1" tabindex="?"></div>
<div style="float: right;"><input type="textbox" class="input" name="a2" id="a2" tabindex="?"></div>
<div style="float: right;"><input type="textbox" class="input" name="a3" id="a3" tabindex="?"></div>
<div style="float: right;"><input type="submit" name="deletethisrow" value="Slet" tabindex="?"></div>
<div style="clear: both;"></div>
<div>NEDTAGNING AF HARDWARE <input type="submit" name="addnewrow" value="Nedtag hardware" tabindex="?"></div>
<div style="float: left;"><input type="textbox" class="input" name="b1" id="b1" tabindex="?"></div>
<div style="float: right;"><input type="textbox" class="input" name="b2" id="b2" tabindex="?"></div>
<div style="float: right;"><input type="textbox" class="input" name="b3" id="b3" tabindex="?"></div>
<div style="float: right;"><input type="submit" name="deletethisrow" value="Slet" tabindex="?"></div>
<div style="clear: both;"></div>
</div>
</form>

</body>

</html>

Synes godt om

olsensweb.dk Ekspert

07. juni 2015 - 18:33 #2

hvordan skal HTML'en se ud hvis der trykkes på submit i <div>NYOPSÆTNING AF HARDWARE

tænker at bruge noget ala dette
http://www.eksperten.dk/spm/975032 #3

Synes godt om

steen_hansen Forsker

07. juni 2015 - 23:02 #3

Hej ronols

Du er en knag :)

Den skal se således ud (bliver selvfølgelig stylet med CSS):

<div>NYOPSÆTNING AF HARDWARE<input type="submit" name="addnewrow" value="Tilføj ny hardware" tabindex="?"></div>

Evt.

<div style="float: left;">NYOPSÆTNING AF HARDWARE</div style="float: right;"><input type="OnClick" value="Tilføj"></div>
<div style="clear: both"></div>

Det eksempel med tilføjelse af elementer er lige nøjagtigt sådan det skal fungere i princippet :)

Synes godt om

steen_hansen Forsker

08. juni 2015 - 14:45 #4

Det skal væe denne, så button er pænt og ensartet placeret i høje sideud for hvert afsnit:

<div style="float: left;">NYOPSÆTNING AF HARDWARE</div style="float: right;"><input type="OnClick" value="Tilføj"></div>
<div style="clear: both"></div>

Synes godt om

olsensweb.dk Ekspert

08. juni 2015 - 17:01 #5

kig på denne

 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo</title>

        <style type="text/css">
            .col1{
                float:left;
            }
            .col2{
                float:right;
            }
        </style>
        <script type="text/javascript">
            var add_id = 0;
            var remove_id = 0;

            function Add_Hardware() {
                add_id++;

                var add_hw = document.getElementById("add_hw");

                var div_top = document.createElement("DIV");
                div_top.setAttribute("id", "add" + add_id);

                var hr = document.createElement("hr");

                var div1 = document.createElement("DIV");
                var element1 = document.createElement("input");
                element1.setAttribute("type", "text");
                element1.setAttribute("value", "");
                element1.setAttribute("name", "a1[]");
                div1.appendChild(element1);

                var div2 = document.createElement("DIV");
                var element2 = document.createElement("input");
                element2.setAttribute("type", "text");
                element2.setAttribute("value", "");
                element2.setAttribute("name", "a2[]");
                div2.appendChild(element2);

                var div3 = document.createElement("DIV");
                var element3 = document.createElement("input");
                element3.setAttribute("type", "text");
                element3.setAttribute("value", "");
                element3.setAttribute("name", "a3[]");
                div3.appendChild(element3);

                var div4 = document.createElement("DIV");
                var element4 = document.createElement("input");
                element4.setAttribute("type", "button");
                element4.setAttribute("value", "Slet");
                element4.setAttribute("name", "deletethisrow");
                element4.setAttribute("onclick", "deletetdiv('add" + add_id + "')");
                div4.appendChild(element4);

                div_top.appendChild(hr);
                div_top.appendChild(div1);
                div_top.appendChild(div2);
                div_top.appendChild(div3);
                div_top.appendChild(div4);
                add_hw.appendChild(div_top);
            }

            function Remove_Hardware() {
                remove_id++;
                var remove_hw = document.getElementById("remove_hw");

                var div_top = document.createElement("DIV");
                div_top.setAttribute("id", "remove" + remove_id);

                var hr = document.createElement("hr");

                var div1 = document.createElement("DIV");
                var element1 = document.createElement("input");
                element1.setAttribute("type", "text");
                element1.setAttribute("value", "");
                element1.setAttribute("name", "b1[]");
                div1.appendChild(element1);

                var div2 = document.createElement("DIV");
                var element2 = document.createElement("input");
                element2.setAttribute("type", "text");
                element2.setAttribute("value", "");
                element2.setAttribute("name", "b2[]");
                div2.appendChild(element2);

                var div3 = document.createElement("DIV");
                var element3 = document.createElement("input");
                element3.setAttribute("type", "text");
                element3.setAttribute("value", "");
                element3.setAttribute("name", "b3[]");
                div3.appendChild(element3);

                var div4 = document.createElement("DIV");
                var element4 = document.createElement("input");
                element4.setAttribute("type", "button");
                element4.setAttribute("value", "Slet");
                element4.setAttribute("name", "deletethisrow");
                element4.setAttribute("onclick", "deletetdiv('remove" + remove_id + "')");
                div4.appendChild(element4);

                div_top.appendChild(hr);
                div_top.appendChild(div1);
                div_top.appendChild(div2);
                div_top.appendChild(div3);
                div_top.appendChild(div4);
                remove_hw.appendChild(div_top);
            }

            function deletetdiv(div_id) {
                // http://stackoverflow.com/questions/11080620/how-to-remove-div-elements-in-javascript-using-their-id
                var el = document.getElementById(div_id);
                el.parentNode.removeChild(el);
            }
        </script>
    </head>
    <body>
        <form name="frmRegister">
            <div class="container">
                <div id="add_hw" class="col1">
                    <div>NYOPSÆTNING AF HARDWARE<input type="button" name="addnewrow" value="Tilføj ny hardware"  onclick="Add_Hardware()"></div>
                    <script type="text/javascript">
                        Add_Hardware();
                    </script>
                </div>

                <div id="remove_hw" class="col2">
                    <div>NEDTAGNING AF HARDWARE <input type="button" name="addnewrow" value="Nedtag hardware" onclick="Remove_Hardware()"></div>
                    <script type="text/javascript">
                        Remove_Hardware();
                    </script>
                </div>
            </div>
        </form>

    </body>
</html>

demo http://experten.olsensweb.dk/steen_hansen.html

Synes godt om

steen_hansen Forsker

11. juni 2015 - 17:01 #6

ronols, du er en haj til dét der :) Lægger du et svar?

Synes godt om

olsensweb.dk Ekspert

11. juni 2015 - 20:59 #7

får du her

Synes godt om

steen_hansen Forsker

12. juni 2015 - 00:05 #8

Takker, du er simpelthen min nye, bedste ven :)

Synes godt om

steen_hansen Forsker

16. juni 2015 - 23:43 #9

ronols, de respektive DIVs kommer fint frem på skærmen. Men hvordan fanger jeg dem, så jeg kan få lagt variablerne i en HTML-mail? Der er jo ikke noget at se, når man ser i kildekoden. Det kommer dog fint frem på skærmen.

Synes godt om

olsensweb.dk Ekspert

17. juni 2015 - 09:34 #10

>Men hvordan fanger jeg dem,
du mangler en submit knap
....
</div>
<div class="clear"></div>
<input type="submit" value="send data">
</form>

du vil få data over som GET da du ikke har angivet post i
<form name="frmRegister">

du får 0/3/6 array's over der hedder:
a1[], a2[], a3[] / b1[], b2[], b3[]

du har sat navnet på input feltet her:
element1.setAttribute("name", "a1[]");
element2.setAttribute("name", "a2[]");
element3.setAttribute("name", "a3[]");

element1.setAttribute("name", "b1[]");
element2.setAttribute("name", "b2[]");
element3.setAttribute("name", "b3[]");

>Der er jo ikke noget at se, når man ser i kildekoden
jo det er der, men du skal anvende et udviklings værktøj for at se det.
https://www.google.com/search?q=browser+developer+tool

anvender selv FireFox med det tool/add-on der hedder FireBug

demo opdateret

Synes godt om

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. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS