[AJAX] Dynamische namen

[Verwijderd]

Beste Tweakers,

Ik ben sinds kort bezig met AJAX, maar ik loop tegen een probleempje aan.

Ik heb de volgende code (formulier):

PHP:

print("<tr><td>Voornaam:</td><td width=\"162\"><input class=\"input1\" maxlength=\"30\" name=\"RegistratieVoornaam\" onKeyUp=\"FormCheck('naam',this.value)\" style=\"width: 161px;\" type=\"text\" value=\"". $voornaam ."\" /></td><td><span id=\"txtWarningNaam\"></span></td></tr>\n");
print("<tr><td>E-mail:</td><td><input class=\"input1\" maxlength=\"40\" name=\"RegistratieEmail\" onKeyUp=\"FormCheck('email',this.value)\" style=\"width: 161px;\" type=\"text\" value=\"". $email ."\" /></td><td><span id=\"txtWarningEmail\"></span></td></tr>\n");

Achter het veld moet dus een icoontje verschijnen als het betreffende veld goed/fout is ingevuld.

Hier gebruik ik het volgende Javascript voor:

JavaScript:

function FormCheck(type,data)
{

    if (type=="email"){ var txtVak="txtWarningEmail"; }
    if (type=="naam"){ var txtVak="txtWarningNaam"; }

    if (data.length==0)
    { 
        document.getElementById(txtVak).innerHTML="";
        return;
    }

    xmlHttp=GetXmlHttpObject()

    if (xmlHttp==null)
    {
        alert ("Je browser ondersteund geen AJAX!");
        return;
    } 

    var url="test_checks.php";
    url=url+"?t="+type;
    url=url+"&d="+data;
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
} 

function stateChanged() 
{ 
    if (xmlHttp.readyState==4)
    { 
        if (xmlHttp.responseText!=null)
        {
            if (xmlHttp.responseText=="")
            {

                document.getElementById(txtVak).innerHTML="";

            } else {

                document.getElementById(txtVak).innerHTML="<img alt=\"Waarschuwing: "+xmlHttp.responseText+"\" height=\"16\" src=\"images/layout/warning.gif\" style=\"border: none;\" width=\"16\">";
            }

        }
    }
}

Dit werkt dus helaas niet. Werkt het dynamische stuk javascript niet? Ik ben 1 dag gepuzzelt, maar ik kom er niet uit. Als er nog een andere manier is, hoor ik dat graag. Maar ik wil niet voor elke check een javascript te hoeven maken.

Ik hoop dat iemand kan helpen.

[ Voor 2% gewijzigd door Verwijderd op 21-03-2007 08:24 . Reden: typo ]

[André]

Wat werkt er niet, wat werkt wel?

En zet "var txtVak" eens buiten je functie, want nu is hij in de andere functie niet meer uit te lezen.

[Verwijderd]

Het is niet mogelijk om die buiten mijn functie te zetten? Hij bepaalde variable txtVak namelijk in die functie, of zie ik dat verkeerd?

Als ik een statische naam op geef ("txtWarningEmail"), i.p.v. txtVak, werkt het script prima!

Ik denk dat het probleem inderdaad is, dat de andere functies de var txtVak niet herkennen. Enig idee hoe ik dat op kan lossen, aangezien hij in FormCheck gezet word?

[SuperRembo]

Weet je zeker dat je deze velden op _elke_ toetsaanslag wilt controleren? Een e-mailadres is meestal pas geldig op het moment dat je de laatste letter hebt getypt.

De alt-tekst van een plaatje zie je in Firefox alleen als het plaatje niet geladen wordt. Je kan beter de title attribuut gebruiken.

[Verwijderd]

SuperRembo schreef op woensdag 21 maart 2007 @ 09:19:
Weet je zeker dat je deze velden op _elke_ toetsaanslag wilt controleren? Een e-mailadres is meestal pas geldig op het moment dat je de laatste letter hebt getypt.

Moet ik dan op onMouseOut controleren?

SuperRembo schreef op woensdag 21 maart 2007 @ 09:19:
De alt-tekst van een plaatje zie je in Firefox alleen als het plaatje niet geladen wordt. Je kan beter de title attribuut gebruiken.

Dat heb ik nu ook gedaan.

[Verwijderd]

SuperRembo schreef op woensdag 21 maart 2007 @ 09:19:
De alt-tekst van een plaatje zie je in Firefox alleen als het plaatje niet geladen wordt. Je kan beter de title attribuut gebruiken.

Ik zou juist wel het alt attribuut gebruiken, deze wordt ook zo geindexeerd in google, zijn de afbeeldingen ook voor gehandicapte gebruikers te begrijpen en het is voor de webstandaarden een verplicht veld.

[SuperRembo]

Verwijderd schreef op woensdag 21 maart 2007 @ 09:23:
[...]
Moet ik dan op onMouseOut controleren?

Onchange of onblur lijkt me wel geschikt.

Verwijderd schreef op woensdag 21 maart 2007 @ 09:27:
Ik zou juist wel het alt attribuut gebruiken, deze wordt ook zo geindexeerd in google, zijn de afbeeldingen ook voor gehandicapte gebruikers te begrijpen en het is voor de webstandaarden een verplicht veld.

En wat is het nut van het indexeren van foutmeldingen in een formulier?

[Verwijderd]

Nu weet ik nog niet hoe ik het type door kan geven aan de andere functie. Heeft iemand daar nog een idee over, of hoe ik het anders aan kan pakken?

Dit werkt ook niet:

JavaScript:

...
xmlHttp.onreadystatechange=stateChanged(type);
...

en

JavaScript:

function stateChanged(type)

Iemand een idee?

[Xander]

André schreef op woensdag 21 maart 2007 @ 08:53:
En zet "var txtVak" eens buiten je functie, want nu is hij in de andere functie niet meer uit te lezen.

Doe dat dan eens?

Als je de variabele buiten je functie declareert betekent dat nog niet dat je de waarde niet binnen je functie kunt wijzigen...

[truegrit]

ik denk dat die eerste reply de meest nuttige was, omdat je txtVak gebruikt buiten de scope van de variabele.

[Verwijderd]

Dat heb ik nu gedaan, zoals hieronder:

JavaScript:

var xmlHttp
var txtVak

function FormCheck(type,data)
{
    
    if (type=="email")
    {
        var txtVak="txtWarningEmail";
    }
        
    if (type=="naam")
    {
        var txtVak="txtWarningNaam";
    }

    if (data.length==0)
    { 
        document.getElementById(txtVak).innerHTML="";
        return;
    }


    xmlHttp=GetXmlHttpObject()

    if (xmlHttp==null)
    {
        alert ("Je browser ondersteund geen AJAX!");
        return;
    } 

    var url="test_checks.php";
    url=url+"?t="+type;
    url=url+"&d="+data;
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
} 

function stateChanged() 
{ 
    if (xmlHttp.readyState==4)
    { 
        if (xmlHttp.responseText!=null)
        {
            if (xmlHttp.responseText=="")
            {

                document.getElementById(txtVak).innerHTML="";

            } else {

                document.getElementById(txtVak).innerHTML="<img alt=\"Waarschuwing: "+xmlHttp.responseText+"\" height=\"16\" src=\"images/layout/warning.gif\" style=\"border: none;\" title=\"Waarschuwing: "+xmlHttp.responseText+"\" width=\"16\">";
            }

        }
    }
}

Ik heb ook expres nog gelet op de hoofdletters e.d., want dat schijnt ook nog uit te maken.

Het resultaat verschilt niets met wat ik eerst had...

[P.O. Box]

in je functie moet je niet nog een keer "var" voor txtVak zetten... dan declareer je de variabele namelijk opnieuw binnen de scoop van je functie...

[SuperRembo]

Je declareert nu een nieuwe var txtVak in de functie FormCheck. Dat moet niet, je wilt juist de waarde zetten in de globale variabele txtVak. Je moet dus "var" weg halen bij var txtVak="txtWarningEmail"; en var txtVak="txtWarningNaam";.

[Verwijderd]

Owk dan!! Super! Hij werkt.

Volgende missie is om de submit knop te laten enablen als alles goed ingevuld is.

Bedankt!

[Verwijderd]

Let er wel op dat je je niet blind staart op validatieregelingen in Javascript only. Het disablen van een submitknop is natuurlijk leuk en heeft ook voordelen maar dezelfde (dan wel niet meer) validatie moet plaatsvinden in je serverside taal (PHP? RoR? Asp? etc) om te zorgen dat mensen het formulier niet nabootsen en posten. Daarnaast kan het ook zijn dat mensen Javascript uitgeschakeld hebben staan en dan werkt jouw validatie niet meer.

Afhankelijk van je bedoelingen en doelgroep zou je er naar kunnen/moeten kijken.

[daniëlpunt]

Ik denk dat je em beter in je HTML code enabled kan zetten en met JS disabled maken zodat mensen zonder JS je formulier ook nog kunnen versturen

JavaScript:

var btns = document.getElementsByTagName('button');

for(var i=0; i < btns.length; i++) {
  if(btns[i].getAttribute('type') == 'submit') {
    btns[i].setAttribute('disabled', 'disabled');
  }
}

[ Voor 12% gewijzigd door daniëlpunt op 22-03-2007 14:09 ]

[OxiMoron]

Ehhm.. je weet toch dat de eerste A in AJAX voor asynchronous staat?

Je kunt dus eigenlijk niet in je ajax aanroep een variable definieren en vervolgens in de return functie deze gebruiken, aangezien het best kan zijn dat er een 2e aanroep naar de functie gedaan wordt voordat de eerste een result geeft.

Je zult dus die variabele eigenlijk aan je ajax aanroep toe moeten voegen en deze ook weer returnen.

[crisp]

OxiMoron schreef op donderdag 22 maart 2007 @ 15:07:
Ehhm.. je weet toch dat de eerste A in AJAX voor asynchronous staat?

Mwa, synchronous requests kunnen ook handig zijn hoor. De naam 'ajax' is sowieso al slecht gekozen...

Je kunt dus eigenlijk niet in je ajax aanroep een variable definieren en vervolgens in de return functie deze gebruiken, aangezien het best kan zijn dat er een 2e aanroep naar de functie gedaan wordt voordat de eerste een result geeft.

Dat kan prima hoor als je een closure gebruikt:

JavaScript:

function foo()
{
  var bla = new XMLHttpRequest();
  var someVar = 'tralala';
  bla.open('GET', 'http://localhost/bla.html', true);
  bla.onreadystatechange = function()
  {
    if (bla.readyState == 4)
        alert(someVar);
  }
  bla.send(null);
}