Give alle formular felter focus på skift

jeg er ikke sikker på at jeg synes at det er en forbedring af interfacet, men her er i hvert fald en måde det kunne løses på:
---8<----------
<script language="javascript" type="text/javascript">
    var tabIndex = 0;

    function tabThroughElements(tabKnap){
        document.forms["myForm"].elements[tabIndex++].focus();
        if (document.forms["myForm"].elements[tabIndex]==tabKnap){
            tabIndex++;
        }
        if(tabIndex>=document.forms["myForm"].elements.length){
            tabIndex=0;
        }
    }
</script>
<form name="myForm">
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="button" value=" next " onclick="tabThroughElements(this); return true;">
</form>
---8<----------

Ok, du kan vel ikke bygge det ind i denne funktion (sletter alt i formularen):

function jjrClearForm(form)
{
    form.reset();

    for(i=0;form.elements.length>i;i++)
    {
        switch(form.elements[i].type)
        {
            case 'checkbox':
            form.elements[i].checked = false;
            break;
            case 'radio':
            form.elements[i].checked = false;
            break;
            case 'password':
            form.elements[i].value = '';
            break;
            case 'select-one':
            form.elements[i].selectedIndex = 0;
            break;
            case 'select-multiple':
            form.elements[i].selectedIndex = 0;
            break;
            case 'text':
            form.elements[i].value = '';
            break;
            case 'textarea':
            form.elements[i].value = '';
        }
    }
}

Kaldes med onclick="jjrClearForm(this.form);"

Felterne skal nemlig tømmes, DEREFTER skal de have focus (for at aktivere valideringen på de enkelte felter).

Jeg er ikke helt sikker på hvad det er du ønsker???
Skal brugeren have en knap hvor han kan "tab'e" rundt mellem input felterne?
Hvad mener du med at du vil resette formen, for derefter at validere felterne? Det giver ikke megen mening? :-(

Prøv at forklare hvad det er det skal bruges til. Hvis du vil validere indholdet i felterne skal du ikke starte med at resette dem! :-o

i øvrigt fandt jeg en lille bug i min forrige besvarelse. Løsningen her kunne være mere sexet, men den virker (den forige løsning havde problemer med hidden felter
---8<----------
<script language="javascript" type="text/javascript">
    var tabIndex = 0;

    function tabThroughElements(tabKnap){
        if (document.forms["myForm"].elements[tabIndex].type=="hidden"){
            while (document.forms["myForm"].elements[tabIndex].type=="hidden"){
                tabIndex++;
                if (tabIndex>=document.forms["myForm"].elements.length){ tabIndex=0; }
            }
        }
        document.forms["myForm"].elements[tabIndex++].focus();
        if (document.forms["myForm"].elements[tabIndex]==tabKnap){
            tabIndex++;
        }
        if(tabIndex>=document.forms["myForm"].elements.length){
            tabIndex=0;
        }
    }
</script>
---8<----------

...og et felt behøver absolut ikke at have fokus, for at kunne valideres??? :-/

Det er en del af en stor PHP formular-klasse. Alle mine text-felter valideres løbende via onkeyup og onfocus:

http://googolplex.dk/formtest2.php

Problemet er, at hvis jeg bruger reset-knappen (eller min 'slet'-knap), så aktiveres min validering ikke.

Hvis alle felterne for focus, så aktivere det valideringen, men hvis der er en bedre løsning er jeg åben for forslag. Men validerings-systemet skal forblive som det er :)

Du kan jo prøve at skrive 'Test' og slette/resette formen, det holder jo ikke helt... :(

Jeg vil være meget taknemmlig for en løsning, skal nok hoste op med nogle flere point, hvis du vil hjælpe mig færdig :)

Jeg er ikke helt sikker på hvad det ikke er der holder.

Til gengæld er jeg sikker på at det må kunne gøres smartere at validere felterne, end at fyre en focus af på dem allesammen! Kan du ikke kalde valideringsfunktionerne BÅDE onkeyup, onfocus OG onsubmit?

I øvrigt er det så ikke lidt overkill at validere SÅ meget? Er det ikke nok at validere inden brugeren sender noget afsted?

Hvorfor skal felterne valideres, hvis brugeren har trykket reset ... så er der vel ikke noget (interessant) tilbage i felterne?

Jeg vil ikke have lavet om på valideringen, jeg har set den type løbende validering flere steder og synes godt om den.

Når jeg nu har lavet det sådan, skulle det også gerne virke når felterne tømmes :)

Det er sikkert bare mig der er lidt langsom, og klokken der er blevet lidt mange, men jeg fatter stadig ikke hvorfor du vil validere felter der bliver tømt med en reset/slet alt ?

Hvis nu fx jeg vil have brugeren til at indtaste et korrekt Postnummer. Så skulle det røde kryds gerne afhakkes præcis i det øjeblik han har indtastet 4 tal (ikke begyndene med 0). Hvis han derefter trykker på reset/slet, så nulstilles/slettes felterne. Nu er feltet med Postnummer TOMT men stadig afhakket med grønt. Det er ikke så smart:

http://googolplex.dk/formtest2.php - prøv selv :-)

Men hvis bare jeg kan give alle formularfelterne focus (text, textarea, password, select), så ville det fungerer fint :)

ok - nu forstår jeg hvad det er du vil :)
Jeg kunne nu ikke få det røde kryds til at forsvinde i dit eksempel.

Jeg vil faktisk tro at denne kode ville være tilstrækkelig til at give alle felterne focus:
---8<----------
for (var i=0;i<document.minForm.elements.length){
  if (document.minForm.elements[i].type!=hidden){
    document.minForm.elements[i].focus();
  }
}
---8<----------

...men jeg er stadig sikker på at det IKKE er den smarte måde at gøre det på! Du burde lave en overordnet valideringsfunktion som lige løber gennem alle felterne. Hvis det er fordi du har svært ved at ramme de enkelte felters valideringskode (f.eks. hvis de ligger indlejret i elementerne), så bør du skille dem ud i funktioner du både kan kalde fra elementerne og fra din overordnede valideringsfunktion.

og for at implementere den ovenstående kode i dit eksempel, kunne du f.eks. skrive:
function giveAllFocus(){
  indsæt koden her
}
og så skrive f.eks. din resetknap som:
<input type="button" value="reset" onclick="this.form.reset(); giveAllFocus(); return false;">

eller noget der ligner!
(-:H@zze

Yep, det ser fint ud. prøver det lige når jeg kommer hjem fra arbejde.

Er meget forundret over, at du ikke kunne få feltet afhakket, det har virker på alle nye/gamle computere jeg har prøvet... Er du sikker på, at du indtastede et korrekt Postnumner ?

Jeg kan stadig ikke se, hvordan jeg kan lave min valideing om. De enkelte felter skal jo valideres løbende, dette gøres ved onkeyup. Hvordan vil du løse den, ved ikke at kalde funktionen jjrValidate i alle felter ?!

He he he ... min fejl :"-)
Jeg fik jo ikke lige set at det var mit postnummer du søgte - jo - det virker fint! :)

Jeg ville absolut blive ved med at bruge onkeyup. Du kunne bare også lave en overordnet valideringsfunktion, som løb alle elementerne igennem og også brugte jjrValidate!

Kan du give mig et eksempel på, hvad du mener, for jeg kan ikke se hvordan det kan gøres anderledes ?

Jeg fandt en perfekt løsning, ændrere bare følgende:

function jjrClearForm(form)
{
    form.reset();

    for(i=0;form.elements.length>i;i++)
    {
        switch(form.elements[i].type)
        {
            case 'checkbox':
            form.elements[i].checked = false;
            break;
            case 'radio':
            form.elements[i].checked = false;
            break;
            case 'password':
            form.elements[i].value = '';
            break;
            case 'select-one':
            form.elements[i].selectedIndex = 0;
            break;
            case 'select-multiple':
            form.elements[i].selectedIndex = 0;
            break;
            case 'text':
            form.elements[i].value = '';
            break;
            case 'textarea':
            form.elements[i].value = '';
        }
    }
}

Til følgende (med udgangspunkt i det du skrev):

function jjrClearForm(form)
{
    form.reset();

    for(i=0;form.elements.length>i;i++)
    {
        switch(form.elements[i].type)
        {
            case 'checkbox':
            form.elements[i].checked = false;
            break;
            case 'radio':
            form.elements[i].checked = false;
            break;
            case 'password':
            form.elements[i].value = '';
            form.elements[i].focus();
            break;
            case 'select-one':
            form.elements[i].selectedIndex = 0;
            form.elements[i].focus();
            break;
            case 'select-multiple':
            form.elements[i].selectedIndex = 0;
            form.elements[i].focus();
            break;
            case 'text':
            form.elements[i].value = '';
            form.elements[i].focus();
            break;
            case 'textarea':
            form.elements[i].value = '';
            form.elements[i].focus();
        }
    }
}

Se selv :)

http://googolplex.dk/formtest2.php

Det ser jo skønt ud :)
Den sidste lille finish jeg synes mangler (hvis jeg SKAL være pernittengryn) er at feltet tømmes automatisk, når det får focus, hvis det er standardteksten der står i den.

Det var der så vidt jeg husker en tråd om for ikke så længe siden ... hmmm...
Det kan f.eks. gøres som anvist her:
http://www.eksperten.dk/spm/466785

(-:H@zze

Jep, det kan du have ret i, jeg har allerede lavet dette på et andet site (fik ideen fra jubii), det må jeg lige have overført :)

Takker for hjælpen!!

Ps. Vender nok snart tilbage med et nyt JavaScript spørgsmål :)

http://googolplex.dk/formtest2.php

Så er det integreret, men desværre ryger min 'slet' - knap sig en tur :(

Kan det evt. løses ?

Og min resetknap fungerer ikke længere sammen med validerings-systemet, æv :(

Det er sikkert fordi du nu skal kalde to ting fra onfocus?

prøv at bytte dit tekstfelt ud med følgende:
<input type="text" name="fornavn" value="Dit postnummer" maxlength="255" onblur="if(this.value=='') this.value=this.defaultValue; return true;" onfocus="if (this.value==this.defaultValue) this.value=''; jjrValidate(this, /^[1-9]\d{3}$/, 'iconid1'); return true;" onkeyup="jjrValidate(this, /^[1-9]\d{3}$/, 'iconid1'); return true;" /><img src="/no.gif" title="Der er en fejl..." id="iconid1" />

Ok, jeg prøver lige senere i dag :)

Funker stadig ikke, jeg tror det skal bygges ind i de funktioner jeg bruger, for at virke. Ser lige om jeg kan løse det senere.

What??? Er du sikker på at det ikke virker??? Det virker fint hos mig!
---8<----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
</head>

<body>
<script type="text/javascript">
<!--


function jjrResetForm(form)
{
    form.reset();

    for(i=0;form.elements.length>i;i++)
    {
        switch(form.elements[i].type)
        {
            case 'password':
            form.elements[i].focus();
            break;
            case 'text':
            form.elements[i].focus();
            break;
            case 'textarea':
            form.elements[i].focus();
        }
    }
}


function jjrTotalClearForm(form)
{
    form.reset();

    for(i=0;form.elements.length>i;i++)
    {
        switch(form.elements[i].type)
        {
            case 'checkbox':
            form.elements[i].checked = false;
            break;
            case 'radio':
            form.elements[i].checked = false;
            break;
            case 'password':
            form.elements[i].value = '';
            form.elements[i].focus();
            break;
            case 'select-one':
            form.elements[i].selectedIndex = 0;
            form.elements[i].focus();
            break;
            case 'select-multiple':
            form.elements[i].selectedIndex = 0;
            form.elements[i].focus();
            break;
            case 'text':
            form.elements[i].value = '';
            form.elements[i].focus();
            break;
            case 'textarea':
            form.elements[i].value = '';
            form.elements[i].focus();
        }
    }
}


function jjrValidate(field, regex, id, errortext)
{
    if (field.value.match(regex))
    {
        document.getElementById(id).src="ok.gif";
        document.getElementById(id).title="Feltet er korrekt udfyldt!";
    }
    else
    {
        document.getElementById(id).src="no.gif";
        document.getElementById(id).title=errortext;
    }
}

//-->
</script>

<form action"/formtest2.php" method="get" enctype="application/x-www-form-urlencoded"  >
<input type="hidden" name="jjrsubmitcheck" value="issubmittet" />
<input type="text" name="fornavn" value="Dit postnummer" maxlength="255" onblur="if(this.value=='') this.value=this.defaultValue; return true;" onfocus="if (this.value==this.defaultValue) this.value=''; jjrValidate(this, /^[1-9]\d{3}$/, 'iconid1'); return true;" onkeyup="jjrValidate(this, /^[1-9]\d{3}$/, 'iconid1'); return true;" /><img src="no.gif" title="Der er en fejl..." id="iconid1" />
<br /><input type="submit" name="send" value="Send til mig"  />
<input type="button" name="jjrreset" value="Nulstil"  onclick="jjrResetForm(this.form); this.focus();" />
<input type="button" name="jjrclear" value="Slet alt"  onclick="jjrTotalClearForm(this.form); this.focus();" />
</form>
</body>
</html>

Er det en kopi af min side, som den ser ud nu ? For så virker det ikke! Prøv fx at tast '1234' tryk så 'send' (så default ændres). Prøv derefter at ændrer værdien så den ikke valideres korrekt og tryk så Nulstil. Nu burde den valideres korrekt, men det gør den ikke :( Først når jeg giver den fokus igen.

Er på vej ud af døren vender tilbage senere :)

Den skal da vel ikke validere korrekt efter en nulstilning???

Jo, den skal naturligvis validere hver gang der sker en ændring i feltet, det er da tosset hvis feltet pludselig bliver tomt, men stadig er grønt afhakket :)