Avatar billede danic Nybegynder
20. april 2007 - 23:08 Der er 9 kommentarer og
1 løsning

Disable form input - text felter på klientside

Jeg har udarbejdet et spørgeskema se det her: http://www.succeed.dk

Jeg ønsker følgende funktionalitet, vel og mærke on-the-fly:
indtastes der i [a1] disables [b1]
indtastes der i [b1] disables [a1]
indtastes der i [a2] disables [b2]
indtastes der i [b2] disables [a2]
indtastes der i [a3] disables [b3]
indtastes der i [b3] disables [a3]
indtastes der i [a4] disables [b4]
indtastes der i [b4] disables [a4]
indtastes der i [a5] disables [b5]
indtastes der i [b5] disables [a5]
indtastes der i [a6] disables [b6]
indtastes der i [b6] disables [a6]
indtastes der i [a7] disables [b7]
indtastes der i [b7] disables [a7]
indtastes der i [a8] disables [b8]
indtastes der i [b8] disables [a8]
indtastes der i [a9] disables [b9]
indtastes der i [b9] disables [a9]
indtastes der i [a10] disables [b10]
indtastes der i [b10] disables [a10]
(Som de 3 radio buttons jeg har foroven)

Håber der er en der kan hjælpe, det er nemlig til analysen i mit afgangsprojekt.
Avatar billede webudvikleren Nybegynder
20. april 2007 - 23:30 #1
Prøv lav dine input-felter til ids. f.eks. <input id="a1" ... />


Også put dette på:
onkeyup="DisabledThis(this.id,this.value);"

Så bliver det i stil med:
<input type="text" name="a1" id="a1" onkeyup="DisabledThis(this.id,this.value);" />

Også indsæt funktionen:
function DisabledThis( navn,t )
{
  if ( t == "" )
  {
        document.getElementById(nytnavn).disabled = "no";
        return false;
  } else {
        var nytnavn = navn.replace("a","b");
        document.getElementById(nytnavn).disabled = "disabled";
  }
}

Alt utestet og måske dårlig måde at gøre det på, men så kan du da prøve dig fremad :-)

Mvh,
Jesper Madsen
www.jaykay.dk
Avatar billede mclemens Nybegynder
21. april 2007 - 00:36 #2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
var f;
window.onload=function(){
  f=document.question;
  inps=f.getElementsByTagName("input");
  for(i=0,j=inps.length;i<j;i++){
    if(inps[i].name.match(/[ab][\d]{1,2}/i)){
      inps[i].onchange=function(){chk(this);}
      inps[i].onkeyup=function(){chk(this);}
    }
  }
}

function chk(elm){
  e=f[((elm.name.indexOf("a")==-1)?"a":"b")+elm.name.substr(1)];
  if(elm.value.length!=0)e.disabled=true;
}
</script>

</head><body>
<form name="question">
a1 <input type="text" name="a1"><br>
b1 <input type="text" name="b1"><br>
a2 <input type="text" name="a2"><br>
b2 <input type="text" name="b2"><br>
a3 <input type="text" name="a3"><br>
b3 <input type="text" name="b3"><br>
a4 <input type="text" name="a4"><br>
b4 <input type="text" name="b4"><br>
a5 <input type="text" name="a5"><br>
b5 <input type="text" name="b5"><br>
a6 <input type="text" name="a6"><br>
b6 <input type="text" name="b6"><br>
a7 <input type="text" name="a7"><br>
b7 <input type="text" name="b7"><br>
a8 <input type="text" name="a8"><br>
b8 <input type="text" name="b8"><br>
a9 <input type="text" name="a9"><br>
b9 <input type="text" name="b9"><br>
a10 <input type="text" name="a10"><br>
b10 <input type="text" name="b10"><br>
</form>
</body></html>
Avatar billede mclemens Nybegynder
21. april 2007 - 00:46 #3
... Men mon ikke det er bedre med nulstilling af value som
  if(elm.value.length!=0)e.value="";
istedet for disabling af element som
  if(elm.value.length!=0)e.disabled=true;
... Ellers kan man jo ikke ombestemme sig ...
- Alternativt kan man genaktivere ved
klik og tømme den modsattes indhold.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
var f;
window.onload=function(){
  f=document.question;
  inps=f.getElementsByTagName("input");
  for(i=0,j=inps.length;i<j;i++){
    if(inps[i].name.match(/[ab][\d]{1,2}/i)){
      inps[i].onchange=function(){chk(this);}
      inps[i].onkeyup=function(){chk(this);}
      inps[i].parentNode.onmousedown=function(){chk(this.firstChild);}
    }
  }
}

function chk(elm){
  elm.disabled=false;
  e=f[((elm.name.indexOf("a")==-1)?"a":"b")+elm.name.substr(1)];
  e.disabled=true;e.value="";
}
</script>

</head><body>
<form name="question">
a1 <div><input type="text" name="a1"></div><br>
b1 <div><input type="text" name="b1"></div><br>
a2 <div><input type="text" name="a2"></div><br>
b2 <div><input type="text" name="b2"></div><br>
a3 <div><input type="text" name="a3"></div><br>
b3 <div><input type="text" name="b3"></div><br>
a4 <div><input type="text" name="a4"></div><br>
b4 <div><input type="text" name="b4"></div><br>
a5 <div><input type="text" name="a5"></div><br>
b5 <div><input type="text" name="b5"></div><br>
a6 <div><input type="text" name="a6"></div><br>
b6 <div><input type="text" name="b6"></div><br>
a7 <div><input type="text" name="a7"></div><br>
b7 <div><input type="text" name="b7"></div><br>
a8 <div><input type="text" name="a8"></div><br>
b8 <div><input type="text" name="b8"></div><br>
a9 <div><input type="text" name="a9"></div><br>
b9 <div><input type="text" name="b9"></div><br>
a10 <div><input type="text" name="a10"></div><br>
b10 <div><input type="text" name="b10"></div><br>
</form>
</body></html>
Avatar billede danic Nybegynder
21. april 2007 - 09:17 #4
mclemens> det virker jo fint, jeg kan godt se din pointe der, er det muligt at vente med at disable indtil at man har skrevet den første den karakter i input boksen? Så vil den jo være åben igen, hvis man sletter karakteren igen? Men så jeg jeg måske tilbage til onkeyup......
Avatar billede mclemens Nybegynder
21. april 2007 - 11:54 #5
Noget i stil med denne ?
(udvidet 21/04-2007 00:36:17)

<script type="text/javascript">
var f;
window.onload=function(){
  f=document.question;
  inps=f.getElementsByTagName("input");
  for(i=0,j=inps.length;i<j;i++){
    if(inps[i].name.match(/[ab][\d]{1,2}/i)){
      inps[i].onchange=function(){chk(this);}
      inps[i].onkeyup=function(){chk(this);}
    }
  }
}

function chk(elm){
  e=f[((elm.name.indexOf("a")==-1)?"a":"b")+elm.name.substr(1)];
  if(elm.value.length!=0)e.disabled=true;
  else e.disabled=false; // tilføjet

}
</script>

... onkeyup er med af hensyn til tab eksempel:

Med keyup og skrivning af tekst i a1 samt sletning
af tekst og tryk på tab, ender du på b1.

Uden keyup vil samme situation kaste dig ned
til a2 istedet for b1 - da feltet ikke er
genaktiveret da onchange ikke genaktiverer felte
hurtigt nok (gør det først efter at tab er gennemført).

- Hvorfor så ikke nøjes med onkeyup og undlade onchange
... copy'n'paste af beløb og ændring derved vil ikke
fanges med onkeyup (ved brug af rediger - sætind).
Avatar billede danic Nybegynder
21. april 2007 - 13:42 #6
mclemens> Det spiller MAX!!! Du må gerne komme med et svar!

Er det muligt at lave en validering, så den kommer med en fejl hvis alt indtastning ikke giver 100 tilsammen?
Avatar billede mclemens Nybegynder
21. april 2007 - 14:03 #7
Noget i denne stil ?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
var f;
window.onload=function(){
  f=document.question;
  f.onsubmit=function(){return chkcount(100);}
  inps=f.getElementsByTagName("input");
  for(i=0,j=inps.length;i<j;i++){
    if(inps[i].name.match(/[ab][\d]{1,2}/i)){
      inps[i].onchange=function(){chk(this);}
      inps[i].onkeyup=function(){chk(this);}
      inps[i].parentNode.onmousedown=function(){chk(this.firstChild);}
    }
  }
}

function chk(elm){
  e=f[((elm.name.indexOf("a")==-1)?"a":"b")+elm.name.substr(1)];
  if(elm.value.length!=0)e.disabled=true;
  else e.disabled=false;
}

function chkcount(k){
  k2=0;
  inps=f.getElementsByTagName("input");
  for(i=0,j=inps.length;i<j;i++){
    if(inps[i].name.match(/[ab][\d]{1,2}/i)){
      if(!inps[i].disabled&&parseInt(inps[i].value))k2+=parseInt(inps[i].value);
    }
  }
  if(k2==k)return true;
  else {
    alert("Du skal bruge "+k+" point");
    return false;
  }
}
</script>

</head><body>
<form name="question">
a1 <div><input type="text" name="a1"></div><br>
b1 <div><input type="text" name="b1"></div><br>
a2 <div><input type="text" name="a2"></div><br>
b2 <div><input type="text" name="b2"></div><br>
a3 <div><input type="text" name="a3"></div><br>
b3 <div><input type="text" name="b3"></div><br>
a4 <div><input type="text" name="a4"></div><br>
b4 <div><input type="text" name="b4"></div><br>
a5 <div><input type="text" name="a5"></div><br>
b5 <div><input type="text" name="b5"></div><br>
a6 <div><input type="text" name="a6"></div><br>
b6 <div><input type="text" name="b6"></div><br>
a7 <div><input type="text" name="a7"></div><br>
b7 <div><input type="text" name="b7"></div><br>
a8 <div><input type="text" name="a8"></div><br>
b8 <div><input type="text" name="b8"></div><br>
a9 <div><input type="text" name="a9"></div><br>
b9 <div><input type="text" name="b9"></div><br>
a10 <div><input type="text" name="a10"></div><br>
b10 <div><input type="text" name="b10"></div><br>
<input type="submit" value="ok">
</form>
</body></html>
Avatar billede mclemens Nybegynder
21. april 2007 - 14:04 #8
Glemte et svar :D
Avatar billede danic Nybegynder
21. april 2007 - 14:06 #9
Den er lige i øjet!
Avatar billede mclemens Nybegynder
21. april 2007 - 14:10 #10
Tak for point, samt held
og lykke med projektet :o)
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