Avatar billede kryderbolle Nybegynder
18. februar 2009 - 09:32 Der er 9 kommentarer og
1 løsning

udvid onchange event dynamisk

Hej alle.

Jeg vil gerne tilføje en onchange event på alle mine tekst felter. Det kan jeg også sagtens, men på en af dem er der allerede en onchange event, og den skal bibeholdes. Hvordan gør man det??

Jeg har denne test kode indtil vidre:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
</head>
<body onload="addChangeFunk();">

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function addChangeFunk()
{
    var ele = document.getElementsByTagName("input")
    for(f=0;f<ele.length;f++)
    {
        if(ele[f].type == "text")
        {
            if(ele[f].onchange)
            {
                //udvid onchange her...
            }
            else
                ele[f].onchange = function(){alert('test')}
        }
    }
}

//-->
</SCRIPT>
<form name="form1" method="Post" action="">
<input type="Text" name="test1" value=""><br>
<input type="Text" name="test2" value="" onchange="alert('hej')"><br>
<input type="Text" name="test3" value=""><br>
</form>

</body>
</html>
Avatar billede majbom Novice
18. februar 2009 - 09:38 #1
<input type="Text" name="test2" value="" onchange="alert('hej'); addChangeFunk()">
Avatar billede olebole Juniormester
18. februar 2009 - 09:45 #2
<ole>

function addEvent(oElm, sType, fn) {
    if (oElm.addEventListener) oElm.addEventListener(sType, fn, false);
    else if (oElm.attachEvent) oElm.attachEvent("on"+sType, fn);
    else if (typeof oElm["on"+sType]=="function") {
        var tmp = oElm["on"+sType];
        oElm["on"+sType] = function(){tmp();fn()};
    }
}

- og brugen af funktionen:
    addEvent(document.getElementById("myInput"), "change", myFunction);

/mvh
</bole>
Avatar billede olebole Juniormester
18. februar 2009 - 09:46 #3
Njaahhh, ikke helt  =)

function addEvent(oElm, sType, fn) {
    if (oElm.addEventListener) oElm.addEventListener(sType, fn, false);
    else if (oElm.attachEvent) oElm.attachEvent("on"+sType, fn);
    else if (typeof oElm["on"+sType]=="function") {
        var tmp = oElm["on"+sType];
        oElm["on"+sType] = function(){tmp();fn()};
    }
    else oElm["on"+sType] = fn;
}
Avatar billede kryderbolle Nybegynder
18. februar 2009 - 09:58 #4
Olebole

Får en type uoverensstemmelses fejl når jeg kører dit eks. Har denne kode nu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
</head>
<body onload="addChangeFunk();">

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function addChangeFunk()
{
    var ele = document.getElementsByTagName("input")
    for(f=0;f<ele.length;f++)
    {
        if(ele[f].type == "text")
        {
            if(ele[f].onchange)
            {
                //udvid onchange her...
                addEvent(ele[f], "change", alert('test'))
            }
            else
                ele[f].onchange = function(){alert('test')}
        }
    }
}

function addEvent(oElm, sType, fn) {
    if (oElm.addEventListener) oElm.addEventListener(sType, fn, false);
    else if (oElm.attachEvent) oElm.attachEvent("on"+sType, fn);
    else if (typeof oElm["on"+sType]=="function") {
        var tmp = oElm["on"+sType];
        oElm["on"+sType] = function(){tmp();fn()};
    }
    else oElm["on"+sType] = fn;
}
//-->
</SCRIPT>
<form name="form1" method="Post" action="">
<input type="Text" name="test1" value=""><br>
<input type="Text" name="test2" value="" onchange="alert('hej')"><br>
<input type="Text" name="test3" value=""><br>
</form>

</body>
</html>

Den popper også op med en "test" inden siden er loaded, hvor efter jeg får fejlen. Den burde først poppe op med "test" når jeg  rette et af tekst felterne.
Avatar billede olebole Juniormester
19. februar 2009 - 02:09 #5
function addChangeFunk()
{
    var ele = document.getElementsByTagName("input")
    for(f=0;f<ele.length;f++)
    {
        if(ele[f].type == "text")
        {
            addEvent(ele[f], "change", function(){alert('test')})
        }
    }
}
Avatar billede kryderbolle Nybegynder
20. februar 2009 - 08:17 #6
Fornemt olebole.

Det er dine point.
Avatar billede olebole Juniormester
20. februar 2009 - 09:04 #7
- så lægger jeg et svar  =)
Avatar billede kryderbolle Nybegynder
20. februar 2009 - 10:29 #8
Det blev vist en kommentar i stedet for et svar.

Et hurtigt ekstra spørgsmål, hvis du lige ved det.

Jeg har et element som reloader siden ved onchange og i den forbindelse har jeg udvidet koden, så den sender en true/false med hvis der allerede var sket ændring. Det fungere fint, bortset fra en lille detalje. Problemet er at hvis man kun ændre dette element, så bliver værdien ikke sat, da reloaden affyre først.

Er der en måde at ændre addEvent() funktionen så den indsætter min event før en evt allerede eksisterende?

Hvis ikke, må jeg bare smide mit kald manuelt på dette element, men det var det jeg helst ville undgå.
Avatar billede olebole Juniormester
20. februar 2009 - 10:58 #9
Nej, du kan ikke umiddelbart ændre rækkefølgen, Men du kan jo sætte begge handlers med funktionen i stedet for at hardcode den. I så fald sætter du bare handlerne i den rækkefølge, de skal fyre af. Noget à la:

function addChangeFunk()
{
    var ele = document.getElementsByTagName("input")
    for(f=0;f<ele.length;f++)
    {
        if(ele[f].type == "text")
        {
            addEvent(ele[f], "change", function(){alert('test')})
        }
    }
    addEvent(document.getElementById("myInput") "change", function(){alert('test nummer 2')})
}

- og her kommer så svaret  ;o)
Avatar billede olebole Juniormester
20. februar 2009 - 12:17 #10
Tak for points  =)
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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