Notifikationer

Markér alle som læst Log ud

elav Nybegynder

18. juni 2006 - 16:33 Der er 11 kommentarer og
1 løsning

Javascript der deaktiverer en knap indtil alle felter er udfyldt

Hejsa,

Findes der noget javascript der kan deaktivere en form-knap indtil alt i formen er udfyldt?

Og hvordan bruger man det rent praktisk?

Synes godt om

mclemens Nybegynder

18. juni 2006 - 19:59 #1

[ Findes der noget javascript der kan deaktivere en form-knap indtil alt i formen er udfyldt? ] - Har lige kodet lidt ved ikke om denne virker godt nok?
( kaster lige et svar samtidig, hvis det nu, var det du tænkte på :o) )

[ Og hvordan bruger man det rent praktisk? ]
- Du sætter det ind i en script blok som nedenstående eller du lægger det ud i en seperat javascript fil og indhenter filen med dette tag i head istedet:
<script type="text/javascript" src="filnavn.js"></script>

<!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">

window.onload=function(){
fms=document.getElementsByTagName("form");
for(i=0;i<fms.length;i++)fms[i].onsubmit=function(){return chkform(this);};
}

function chkform(tn){

chkval=true;
inps=tn.getElementsByTagName("input");
for(i=0;i<inps.length;i++)if(inps[i].value=="")chkval=false;
return chkval

}

</script>

</head><body>

<form name="yestest" method="get" action="#1111">
<input type="text" name="navn">
<input type="text" name="adresse">
<input type="submit" value="Afsend">
</form>

<br><br><br><br><br>

<form name="aaaaa" method="post" action="#2222">
<input type="text" name="navn4236gf">
<input type="text" name="adresseg453">
<input type="submit" value="Afsend">
</form>

<br><br><br><br><br>

<form name="ddddd532" method="get" action="#123456">
<input type="text" name="navn23">
<input type="text" name="adresserg6">
<input type="submit" value="Afsend">
</form>

</body></html>

Synes godt om

mclemens Nybegynder

18. juni 2006 - 20:09 #2

[ Og hvordan bruger man det rent praktisk? ]
- Hov læste det som praksis... Hvordan du praktisk bruger det afhænger jo af formål og hvordan din formular er bygget og hvordan det hele skal spille sammen - det er lidt svært at svare præcist på ... men måske bør vi lige have en alert og fokusering sat på ovenstående :o)

<!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">

window.onload=function(){
fms=document.getElementsByTagName("form");
for(i=0;i<fms.length;i++)fms[i].onsubmit=function(){return chkform(this);};
}

function chkform(tn){

chkval=true;
inps=tn.getElementsByTagName("input");
for(i=0;i<inps.length;i++)if(inps[i].value==""){alert("Alle felter skal udfyldes");inps[i].focus();chkval=false;i=inps.length;}
return chkval

}

</script>

</head><body>

<form name="yestest" method="get" action="#1111">
<input type="text" name="navn">
<input type="text" name="adresse">
<input type="submit" value="Afsend">
</form>

<br><br><br><br><br>

<form name="aaaaa" method="post" action="#2222">
<input type="text" name="navn4236gf">
<input type="text" name="adresseg453">
<input type="submit" value="Afsend">
</form>

<br><br><br><br><br>

<form name="ddddd532" method="get" action="#123456">
<input type="text" name="navn23">
<input type="text" name="adresserg6">
<input type="submit" value="Afsend">
</form>

</body></html>

Synes godt om

apo Praktikant

18. juni 2006 - 20:16 #3

mclemens > Det er jo bare en almindelig formvalidering :-)

Jeg tror, at elav gerne vil have knappen disabled, som i dette script (jeg har ikke selv lavet det men har fundet det her på E):

<script type="text/javascript">
function tjekAccept(){
if(document.forms[0].accept.checked){
document.forms[0].Submit.disabled = false;
}
else{
document.forms[0].Submit.disabled = true;
}
}
</script>

<form>
<input name="accept" type="checkbox" id="accept" value="on" onclick="this.form.knap.disabled=!this.checked">
<input name="knap" type="submit" value="Næste" disabled>
</form>

Synes godt om

apo Praktikant

18. juni 2006 - 20:20 #4

... Jeg kan dog ikke nok javascript til, at jeg kan bygge videre på det - så det kan validere flere felter ad gangen :-/

Synes godt om

mclemens Nybegynder

18. juni 2006 - 20:28 #5

Så disabler vi lige knappen også ... dog er det ikke nødvendigvis nok ... man kan jo bare trykke på return - så den universal onsubmit forhindrer skal med - dog skal alert og focus måske slettes afhængig af hvad man har behov for ... kigger lige på disable check - dog er det noget af et gennemløb den løber hver onkeyup eller onchange ... vi nøjes lige med onchange medmindre onkeyup også ønskes...

Synes godt om

mclemens Nybegynder

18. juni 2006 - 20:39 #6

<!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">

window.onload=function(){
fms=document.getElementsByTagName("form");
for(i=0;i<fms.length;i++){
fms[i].onsubmit=function(){return chkform(this,0);};
inps=fms[i].getElementsByTagName("input");
for(i2=0;i2<inps.length;i2++){
if(inps[i2].type=="submit")inps[i2].disabled=true;
else if(inps[i2].type=="text"){
inps[i2].onchange=function(){chkform(this.form,1);};
// inps[i2].onkeyup=function(){chkform(this.form,1);}; // Deaktiveret ...
}
}
}
}

function chkform(tn,typ){

chkval=true;
inps=tn.getElementsByTagName("input");

for(i=0;i<inps.length;i++){
if(inps[i].type=="submit")tn=inps[i];
if(inps[i].value=="")chkval=false;
}

if(typ==0)return chkval
else tn.disabled=!chkval;
}

</script>

</head><body>

<form name="yestest" method="get" action="#1111">
<input type="text" name="navn">
<input type="text" name="adresse">
<input type="submit" value="Afsend">
</form>

<br><br><br><br><br>

<form name="aaaaa" method="post" action="#2222">
<input type="text" name="navn4236gf">
<input type="text" name="adresseg453">
<input type="submit" value="Afsend">
</form>

<br><br><br><br><br>

<form name="ddddd532" method="get" action="#123456">
<input type="text" name="navn23">
<input type="text" name="adresserg6">
<input type="submit" value="Afsend">
</form>

</body></html>

Synes godt om

mclemens Nybegynder

18. juni 2006 - 20:45 #7

grunden til at window.onload er lidt "fyldig" er fordi jeg
tildeler alle onchange værdierne dynamisk via scriptet...

... fjernede lige de alerts og focus effekter ...
Hvis knappen er disabled er det nok at den blot forhindrer submit med return
- der er jo egentlig ingen grund til at kaste alert'en afsted samtidig :D

Synes godt om

mclemens Nybegynder

18. juni 2006 - 21:10 #8

Hmmm, onkeyup - vil nok se meget bedre ud ... og den virker
egentlig ok, så jeg anbefaler et skift af denne linje:

// inps[i2].onkeyup=function(){chkform(this.form,1);}; // Deaktiveret ...

til denne:

inps[i2].onkeyup=function(){chkform(this.form,1);};

Synes godt om

elav Nybegynder

19. juni 2006 - 01:39 #9

OK - tak for svar...

Jeg kigger på det i morgen (Well... I dag :D)

Bare lige for at være sikker... - Det kræver ikke IE, vel???

Jeg har ikke Internet Explorer, men Konqueror og Firefox!

Synes godt om

mclemens Nybegynder

19. juni 2006 - 08:28 #10

Virker fint i IE og FF,
Vurde også virke i alle andre...
( kender ikke Konqueror )

Synes godt om

mclemens Nybegynder

19. juni 2006 - 08:35 #11

Vurde -> Burde

Synes godt om

mclemens Nybegynder

20. juni 2006 - 22:14 #12

- Og tak for point :o)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS