[JavaScript] innerHTML met behoud waarden - Softwareontwikkeling

donderdag 4 mei 2006 14:06

Acties:

Verwijderd

Topicstarter

document.getElementById("maplijst").innerHTML += newLine;

maplijst is een div met div's.

zo een lijntje heeft een textbox en wat checkboxen.
de gebruiker kan er manueel toevoegen als hij er meer wenst (lijntjes dus om in te vullen)

newLine is de HTML content van zo'n lijntje "<input type=checkbox> a <input type=text>" enz

Dat werkt goed, maar als je bv een paar checkboxen aanvinkt en wat invult, dan verdwijnen de waarden van die checkboxen en textboxen !
Hoe kun je die waarden behouden, maar toch iets toevoegen aan een div ?

serverside bijhouden wil ik niet doen, moet via javascript

donderdag 4 mei 2006 14:08

Acties:

crisp

Devver

Pixelated

DOM methods gebruiken zoals createElement en appendChild

Intentionally left blank

donderdag 4 mei 2006 14:10

Acties:

djluc

Probeer het nou eens uit te leggen in normaal Nederlands, met hoofdletters punten e.d. Laat verder eens zien wat je precies bedoelt want hier is echt niet veel van te maken. Ik denk dat je met de DOM objecten aan de slag moet maar daarvoor heb ik eerst duidelijk je vraag nodig.

donderdag 4 mei 2006 14:16

Acties:

Verwijderd

Topicstarter

Probleem: waarden van checkboxen en andere elementen die in een div staan resetten als ik in de parent div iets toevoeg.

Met createElement en appendChild ben ik niet echt bekend (weet dat het bestaat), maar met die werkwijze gaat dat probleem zich niet stellen?

De code:
(komt in een asp.net app)

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head id="Head1"><title>
    New User
</title>
    <style>
    .a
    {
        font-size: 12px;
        padding: 1px;
        letter-spacing: 0.06em ;
        line-height: 140%;
        font-family: tahoma, arial, sans-serif;
        margin-left: 0px;
    }
    .title
    {
        font-size: 14px;
        padding: 1px;
        letter-spacing: 0.06em ;
        line-height: 140%;
        font-family: tahoma, arial, sans-serif;
        margin-left: 0px;
        border-bottom: 2px solid #CCCCCC;
    }
    .myTd
    {
        border-bottom: 1px solid #CCCCCC;
    }
    body
    {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    padding: 0px;
    line-height: 140%;
    }

    input
    {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    padding: 0px;
    line-height: 140%;
    }


.infomessageCENTERED
{

    color:#006600;
    /*height:45px;
*/
    display:block;
    margin:5px;
    padding: 6px;
    padding-left: 60px;
    background-color:#E9F5E2;
    background-image: url('check.gif');
    background-repeat: no-repeat;
    background-position: 3px center;
    border: 1px solid #006600;
    width:400px;
    margin-left: auto; /* 164px; */
    margin-right: auto;
    display: block;
}
.infomessageLEFT
{

    color:#006600;
    /*height:45px;
*/
    display:block;
    margin:5px;
    padding: 6px;
    padding-left: 60px;
    background-color:#E9F5E2;
    background-image: url('check.gif');
    background-repeat: no-repeat;
    background-position: 3px center;
    border: 1px solid #006600;
    width:400px;
    margin-left: 0; /* 164px; */
    margin-right: auto;
    display: block;
}

.alertmessageLEFT
{

    color:#660000;
    /*height:45px;
*/
    display:block;
    margin:5px;
    padding: 6px;
    padding-left: 60px;
    background-color:#F5CBC8;
    background-image: url('check.gif');
    background-repeat: no-repeat;
    background-position: 3px center;
    border: 1px solid #006600;
    width:400px;
    margin-left: 0; /* 164px; */
    margin-right: auto;
    display: block;
}

.kader
{

    color:#000000;
    display:block;
    margin:5px;
    padding: 6px;
    padding-left: 30px;
    background-color:#F0F0F0;
    background-image: url('check.gif');
    background-repeat: no-repeat;
    background-position: 3px center;
    border: 1px solid #222222;
    width:800px;
    margin-left: 60px; /* 164px; */
    margin-right: auto;
    display: block;
}
    </style>
    <script language="javascript">
    var i = 2;
        function addMapRow()
        {
            i++;
            var newLine;
            newLine = "<div id=\"maprow" + i + "\">[img]\"browse.gif\">[/img] <input type=\"checkbox\" name='lezen'>Lezen <input type=\"checkbox\" name='schrijven'>Schrijven <input type=\"checkbox\" onClick=\"toggleAnders(" + i  + ", this);\" name='anders'>Anders: <span style='visibility:hidden;' id=\"anders" + i + "\"><input type=\"text\" size=\"50\" name='andersTekst'></span> [img]\"delete.gif\"[/img]</div>";
            document.getElementById("maplijst").innerHTML += newLine;
        }

        function removeMapRow(j)
        {
            document.getElementById("maprow" + j + "").innerHTML = "";
            document.getElementById("maprow" + j + "").style.display = 'none';
        }

        function toggleAnders(j, o)
        {
            if(o.checked == true)
            {
                document.getElementById("anders" + j + "").style.visibility = "visible";
            }
            else
            {
                document.getElementById("anders" + j + "").style.visibility = "hidden";
            }
        }

    </script>
</head>
<body>

<p class="infomessageLEFT">Algemene informatie</p>
<div class="kader">
    <table>
        <tr>
            <td width="100">Naam</td>
            <td><input type="textbox" size="50"></td>
        </tr>
        <tr>
            <td width="100">Voornaam</td>
            <td><input type="textbox" size="50"></td>
        </tr>
        <tr>
            <td width="100">Afdeling</td>
            <td><input type="textbox" size="50"></td>
        </tr>
        <tr>
            <td width="100">Chef</td>
            <td><input type="textbox" size="50"></td>
        </tr>
        <tr>
            <td width="100">Ingevuld door</td>
            <td><input type="textbox" size="50" readonly value=""></td>
        </tr>
    </table>

</div>


<br>
<p class="infomessageLEFT">Groepen waarvan de gebruiker lid moet worden</p>

<div class="kader">
    <table>
        <tr>
            <td width="150"><input type="checkbox" name="a">a</td>
            <td width="150"><input type="checkbox" name="b">b</td>
            <td width="150"><input type="checkbox" name="c">c</td>
            <td width="150"><input type="checkbox" name="d">d</td>
            <td width="150"><input type="checkbox" name="e">e</td>
        </tr>
    </table>
</div>

<br>
<p class="infomessageLEFT">Mappen waar de gebruiker toegang tot heeft en de berechtiging</p>

<div class="kader">
    <div id="maplijst">
        [img]"browse.gif">[/img] <input type="checkbox">Lezen <input type="checkbox">Schrijven <input type="checkbox">Anders: <input type="text" size="50"> [img]"delete.gif">
        <br>
        <img[/img] <input type="text" size="50"> <input type="checkbox">Lezen <input type="checkbox">Schrijven <input type="checkbox">Anders: <input type="text" size="50"> [img]"delete.gif">
        <br>
    </div>
    <br>
    <img[/img] Map toevoegen
</div>


<br>
<p class="alertmessageLEFT">Waarschuwing</p>

<div class="kader">
    <input type="checkbox"> Ik verklaar deze informatie voor echt en ben zelf verantwoordelijk voor deze aanvraag.
    <br>
    <br>
    <br>
    <input type="submit" value="Aanvraag versturen">
</div>

</body>
</html>

[ Voor 21% gewijzigd door Verwijderd op 04-05-2006 14:18 ]

donderdag 4 mei 2006 14:33

Acties:

djluc

Je code moet iets worden als:

JavaScript:

var newLine =document.createElement('li'); //li omdat het een item in een lijst moet worden (semantiek)

var browseImg=document.createElement('img');
browseImg.src='browse.gif';
newLine.appendChild(browseImg);

var inp=document.createElement('input');
inp.setAttribute('type', 'text');
newLine.appendChild(inp);

var inp2=document.createElement('input');
inp2.setAttribute('type', 'checkbox');
newLine.appendChild(inp2);

//enz, zo dus alle elementen en attributen e.d. toevoegen...

document.getElementById("maplijst").appendChild(newLine); //maak van maplijst dus een UL!

donderdag 4 mei 2006 14:39

Acties:

Verwijderd

Topicstarter

solved
Jep inderdaad, heb me even ingelezen in DOM functies en zijn eigenlijk wel krachtiger dan ik wist.

maar ik ben wel te lui om alles OO te maken en per elementje zoals hierboven te gaan werken

dit werkt ook:

code:

function addMapRow()
{
i++;
var mydiv=document.createElement("div");
mydiv.innerHTML = "<div id=\"maprow" + i + "\">[img]\"browse.gif\">[/img] <input type=\"checkbox\" name='lezen'>Lezen <input type=\"checkbox\" name='schrijven'>Schrijven <input type=\"checkbox\" onClick=\"toggleAnders(" + i  + ", this);\" name='anders'>Anders: <span style='visibility:hidden;' id=\"anders" + i + "\"><input type=\"text\" size=\"50\" name='andersTekst'></span> [img]\"delete.gif\"[/img]</div>";
document.getElementById("maplijst").appendChild(mydiv);
}