Avatar billede thomasfricke Juniormester
11. februar 2012 - 11:37 Der er 20 kommentarer

Tabindex!

Hej

Vil gerne lave en form, så hvis et input er tomt bliver næste input 'disabled'

Hvordan?
function nextIf(string)
{
    if (string.value == '')
        {
            return string.value.tabindex +1 = disabled='disabled';
        };
}


Nogle der kan hjælpe ?
Avatar billede olebole Juniormester
11. februar 2012 - 18:05 #1
<ole>

Brug en navngivning på dine felter, du kan holde styr på, og kald så med document.getElementById eller document.getElementsByName

/mvh
</bole>
Avatar billede thomasfricke Juniormester
11. februar 2012 - 19:27 #2
Alle felter har et 'name', men ville bruge samme 'function' i flere felter. Det er sådan at 3 felter med telefon nummer, og hvis felt 1 =' ' er næste felt deaktiveret...
Avatar billede olebole Juniormester
11. februar 2012 - 19:32 #3
Hvilken handling skal udløse funktionskaldet? Hvad hedder dine felter?
Avatar billede thomasfricke Juniormester
11. februar 2012 - 22:19 #4
Tænker at bruge onblur.

Felterne hedder tel1, tel2, tel3.
Avatar billede olebole Juniormester
11. februar 2012 - 23:13 #5
<script type="text/javascript">
function disableNext(elmInp) {
    var nInx = elmInp.getAttribute("name").substr(3)*1,
    elmNext = document.getElementsByName("tel"+(nInx+1))[0];
    if (elmNext) elmNext.disabled = elmInp.value === "";
}
</script>

<p><input name="tel1" onblur="disableNext(this)" type="text"></p>
<p><input name="tel2" onblur="disableNext(this)" type="text"></p>
<p><input name="tel3" onblur="disableNext(this)" type="text"></p>
Avatar billede thomasfricke Juniormester
12. februar 2012 - 21:00 #6
Koden fungere ikke optimalt, for hvis jeg ikke skriver noget nummer i "tel1" deaktivere den "tel2" men ikke "tel3" ?

Formoder at denne linje finder "Tal"?
var nInx = elmInp.getAttribute("name").substr(3)*1,


Formoder at denne linje erstatter "Tal"?
elmNext = document.getElementsByName("tel"+(nInx+1))[0];


Formoder at denne linje fortæller at tel? value = NONE!
if (elmNext) elmNext.disabled = elmInp.value === "";
Avatar billede olebole Juniormester
12. februar 2012 - 21:13 #7
Jeg kan jo kun forholde mig til det, du beder om. I forhold til det, virker koden helt optimalt.

Da jeg ikke kan læse dine tanker, ved jeg ikke, hvad det skal bruges til eller hvordan. Jeg er dog ret sikker på, du har valgt en uhensigtsmæssig struktur
Avatar billede thomasfricke Juniormester
12. februar 2012 - 23:05 #8
Sorry, kan godt se du ikke kan læse tænker :)
Men der er 3 felter til telefon numre...
- hvis første felt ikke udfyldt, felt 2, 3 deaktiveret
- hvis felt 2 ikke udfyldt, felt 3 deaktiveret.

Eller, det burde jo egenlig være at felterne bliver aktiveret efter hånden. Sådan at felt 2, 3, er deaktivret fra start. ???
Avatar billede olebole Juniormester
12. februar 2012 - 23:21 #9
Ja, eller også burde det måske være på en helt tredie måde - eller fjerde eller femte.

Tag nu og find ud af, hvad det er, du vil spørge om. Jeg er træt af, du spilder min tid! Tænk - tænk - tænk ... og tal så
Avatar billede olsensweb.dk Ekspert
13. februar 2012 - 11:17 #10
et indspark til dine overvejelser, array ??

<script type="text/javascript">
function EnableNext(frm, boxname){
    var lng = document[frm][boxname].length;
    for(var j=0; j<lng; j++){           
        if(document[frm][boxname][j].value.length > 0){
            document[frm][boxname][j].readOnly = true;
            document[frm][boxname][j+1].disabled=false;           
        }           
    }       
}
</script>

<p><input name="tel[]" onblur="EnableNext('testform', 'tel[]')" type="text"></p>
<p><input name="tel[]" onblur="EnableNext('testform', 'tel[]')" type="text" disabled="disabled"></p>
<p><input name="tel[]" type="text" disabled="disabled" ></p>   
   
så skal du bare aflæse arrayet serverside
Avatar billede thomasfricke Juniormester
13. februar 2012 - 11:54 #11
Scriptet reagere ikke, men forstår ikke din sidste linje, med
så skal du bare aflæse arrayet serverside???

Har rettet testform til pnr, som denne form hedder...
Avatar billede thomasfricke Juniormester
13. februar 2012 - 12:05 #12
Argh, fejl 40. Scriptet reagere!!!

Men, selv om den aktivere næste felt. springer den felterne over.
kikser ved onKeyUp...
Avatar billede thomasfricke Juniormester
13. februar 2012 - 12:50 #13
Har lavet en løsning, hvor godt det er skrevet ved jeg ikke. og der skal så være et script for hvert felt!


"Function"
function EnableTel2() {
        if(document.pnr.tel1.value.length > 0){
            document.pnr.tel2.disabled=false;
        }else{
            document.pnr.tel2.disabled=true;
        }
    }
   
    function EnableTel3() {
        if(document.pnr.tel2.value.length > 0){
            document.pnr.tel3.disabled=false;
        }else{
            document.pnr.tel3.disabled=true;
        }
    }

"Form"
<input type="text" name="tel1" onKeyUp="EnableTel2(this.value)" value="">

<input type="text" name="tel2" onKeyUp="EnableTel3(this.value) disabled="disabled"" value="">

<input type="text" name="tel3" value="" disabled="disabled">
Avatar billede olsensweb.dk Ekspert
13. februar 2012 - 19:30 #14
>men forstår ikke din sidste linje, med
antog du anvender dine felter serverside (PHP / ASP / .NET / JAVA), for at bruge dem til et eller andet, efter du valideret felterne med JS

har du tested følgende:
skriv noget i tel1 skriv noget i tel2 -> gå tilbage til tel1 og slet dette ??, er det hensigt mæssigt ??
det var derfor jeg havde  document[frm][boxname][j].readOnly = true; i min løsning


function EnablTel2() {       
    if(document.pnr.tel1.value.length > 0){
        document.pnr.tel2.disabled=false;
    }else{
        document.pnr.tel2.disabled=true;
    }       
}

kunne skrives kort som

function EnablTel2() {       
    document.pnr.tel2.disabled=(document.pnr.tel1.value.length > 0)? false : true;       
}
   

btw dine 2 functioner kan skrives sammen ved at sende en parameter med over

<script type="text/javascript">
function EnableNext(nr) {       
    document.pnr["tel"+nr].disabled=(document.pnr["tel"+(nr-1)].value.length > 0)? false : true;       
}   
</script>

<form name="pnr" method="post" action="#">
<input type="text" name="tel1" onKeyUp="EnableNext(2)" value="">
<input type="text" name="tel2" onKeyUp="EnableNext(3)" disabled="disabled" value="">
<input type="text" name="tel3" value="" disabled="disabled">
<input name="send" type="submit">
</form>
Avatar billede thomasfricke Juniormester
13. februar 2012 - 20:00 #15
Problemmet med Readonly, er hvis du taster nummer i felt 1, og hopper videre til felt 2. og du så opdager at nummer i felt 1 er forkert, kan man ikke rette nummeret.

Men samtidig hvis man udfylder alle felterne, og slettet felt 2. bliver nummer i felt 3 ikke aktiv.

Måske er den bedste løsning der, at de bare ikke bliver deaktiveret igen.

Eller har du en bedre ide?

Idéen bag Disabled, er at formen skal være hurtig at udfylde. og jo flere besparelse der er, jo bedre er det. Der er nemlig 15 felter, hvor 6 af dem er tel/mob numre.

Ps. har dog ikke testet dine sammen sætninger af kode, men kan rigtig godt lide ideen med at slå dem sammen.
Avatar billede thomasfricke Juniormester
13. februar 2012 - 20:00 #16
Problemmet med Readonly, er hvis du taster nummer i felt 1, og hopper videre til felt 2. og du så opdager at nummer i felt 1 er forkert, kan man ikke rette nummeret.

Men samtidig hvis man udfylder alle felterne, og slettet felt 2. bliver nummer i felt 3 ikke aktiv.

Måske er den bedste løsning der, at de bare ikke bliver deaktiveret igen.

Eller har du en bedre ide?

Idéen bag Disabled, er at formen skal være hurtig at udfylde. og jo flere besparelse der er, jo bedre er det. Der er nemlig 15 felter, hvor 6 af dem er tel/mob numre

Ps. har dog ikke testet dine sammen sætninger af kode, men kan rigtig godt lide ideen med at slå dem sammen.
Avatar billede olsensweb.dk Ekspert
14. februar 2012 - 12:09 #17
nogle alternative forslag, hvor man kun overfører this, det er vist de pæneste løsninger
EnableNext1: hvis man anvender array løsningen som jeg anbefaler, den er mest flexibel, og nemmest at vedligeholde, jeg kan sagtens leve med, det først onblur næste felt bliver enablet

EnableNext2: den metode du pt anvender.

læg mærke til de selv finder alle nødvendige oplysninger ud fra elm (this)


<script type="text/javascript">
function EnableNext1(elm){
    var frm = elm.form.name;       
    var boxname = elm.name;        
    var lng = document[frm][boxname].length;
    for(var j=0; j<lng; j++){           
        if(document[frm][boxname][j].value.length > 0){
            document[frm][boxname][j+1].disabled=false;
            document[frm][boxname][j+1].focus();       
        }           
    }           
}

function EnableNext2(elm) {       
    var Frm = elm.form.name; // pnr        
    var ElmName = elm.name; // tel_5
    var ElmNameLng = ElmName.length; // 5        
    var nr = ElmName.substr(ElmNameLng-1); // udtrækker sidste karakter i element navnet (5)
    var Name = ElmName.substr(0,(ElmNameLng-1) ); // udtrækker hele element navnet undtagen sidste karakter (tel_)
    var ElmNameNext = [Name]+( Number(nr)+Number(1) ); // tel_6   
    document[Frm][ElmNameNext].disabled = (document[Frm][ElmName].value.length > 0)? false : true;   
}       
</script>

<form name="pnr" method="post" action="#">
<p>
<input name="tel1[]" onblur="EnableNext1(this)" type="text">
<input name="tel1[]" onblur="EnableNext1(this)" type="text" disabled="disabled">
<input name="tel1[]" type="text" disabled="disabled" >
</p>
<p>
<input type="text" name="tel_5" onKeyUp="EnableNext2(this)" value="">
<input type="text" name="tel_6" onKeyUp="EnableNext2(this)" disabled="disabled" value="">
<input type="text" name="tel_7" value="" disabled="disabled">
</p>
<input name="send" type="submit">
</form>
Avatar billede olebole Juniormester
14. februar 2012 - 12:45 #18
Personligt ville jeg bruge flg. løsning:

<script type="text/javascript">
function disableNext(elmInp) {
    var colFields = document.getElementsByName(elmInp.getAttribute("name")),
    bEmpty = elmInp.value!=="";
    for (var i=0,j=colFields.length; i<j; i++) {
        if (colFields[i]===elmInp) continue;
        colFields[i].disabled = bEmpty;
    }
}
</script>

<p><input name="tel[]" onblur="disableNext(this)" type="text"></p>
<p><input name="tel[]" onblur="disableNext(this)" type="text"></p>
<p><input name="tel[]" onblur="disableNext(this)" type="text"></p>
<hr>
<p><input name="foo[]" onblur="disableNext(this)" type="text"></p>
<p><input name="foo[]" onblur="disableNext(this)" type="text"></p>
<p><input name="foo[]" onblur="disableNext(this)" type="text"></p>
<p><input name="foo[]" onblur="disableNext(this)" type="text"></p>
<hr>
<p><input name="bar[]" onblur="disableNext(this)" type="text"></p>
<p><input name="bar[]" onblur="disableNext(this)" type="text"></p>
<p><input name="bar[]" onblur="disableNext(this)" type="text"></p>
Avatar billede olsensweb.dk Ekspert
14. februar 2012 - 13:10 #19
@olebole interessant løsning, men kunne det tænkes man har flere telefon nummer, feks firma mobil, privat mobil, nu når spørgeren har flere felter til telefon nummer ??
din løsning giver kun mulighed for at indtaste i et felt, er det sådan opgaven skal forståes ??. Hvis det er tilfælde kunne man jo nøjes med et felt.
men vi er enige om det er array løsningen skal baseres på
Avatar billede olebole Juniormester
14. februar 2012 - 13:27 #20
Ja, det kunne sagtens tænkes, men som jeg læser spørgerens kommentarer, ønsker han kun ét felt skrivbart (hmmm ... er der mon noget, der hedder sådan?), but who knows?  =)

Jeg ville i så fald lave felter for det - og give dem passende navne.

I det hele taget har jeg lidt svært ved at finde logikken i spørgsmålet  =)
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

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