Notifikationer

Markér alle som læst Log ud

ssv Nybegynder

27. oktober 2008 - 11:34 Der er 8 kommentarer og
1 løsning

Alert hvis default value submittes

Hello.

Så er det atter tid til lidt javascript hjælp. Jeg har tidligere fået hjælp fra w13 med dette, men jeg kan ikke rigtig få det til at spille in action.

Jeg har som eksempel to input-felter i en form:
<input type="text" value="Navn" onfocus="if(this.value == 'Navn') this.value = '';" onblur="if(this.value == '') this.value = 'Navn';">
<input type="text" value="Email" onfocus="if(this.value == 'Email') this.value = '';" onblur="if(this.value == '') this.value = 'Email';">

Hvis brugeren prøver at submitte dette (default-value) skal der komme en fejl. En alert er fint, men hvis jeg kunne vise en custom alert, fx en div med noget tekst indhold, ville det jo være super.

Og hvis 'onfocus' og 'onblur' er helt håbløst forældet, må i gerne komme med en "opdatering til dette" ;-)

Synes godt om

w13 Novice

27. oktober 2008 - 13:36 #1

Jeg ville nok rette min kode til:

<input type="text" value="Navn" onfocus="if(this.value == this.defaultValue) this.value = '';" onblur="if(this.value == '') this.value = this.defaultValue;">
<input type="text" value="Email" onfocus="if(this.value == this.defaultValue) this.value = '';" onblur="if(this.value == '') this.value = this.defaultValue;">

Så finder den selv ud af at benytte enten "Navn" eller "Email", alt efter hvad der er default-værdi. (Hentes med this.defaultValue.)

Det er jo ret smart, så man ikke hele tiden skal rette alle steder, hvis man ændrer noget.

Du kan jo så også - vha. en onsubmit på din form - validere indholdet med f.eks.:

if (feltet.value == feltet.defaultValue || feltet.value == "") {
//kommando
}

Og kommandoen kunne f.eks. bare være:

document.getElementById("alertbox").style.display="block";

Så skal du bare lægge denne "alertbox", hvor du vil have den:

<div id="alertbox" style="display:none">
Du har ikke udfyldt alle påkrævede felter!
</div>

Synes godt om

ssv Nybegynder

27. oktober 2008 - 14:05 #2

Har du noget imod at sætte et fuldt eksempel op? Jeg vil hellere se hele koden end blot stumper af det. ;-)

Synes godt om

w13 Novice

27. oktober 2008 - 14:08 #3

Nej, desværre. Jeg er på arbejde og kan kun yde hjælp til selvhjælp. Så derfor kan jeg kun guide dig igennem det.

Men hvis du nu starter med at rette de 2 linjer til det, jeg skrev, og ser om det virker, så er vi da så langt. =) Så kan vi tage den derfra.

Så lærer du også noget. ;)

Synes godt om

ssv Nybegynder

27. oktober 2008 - 14:27 #4

Fair nok :-)

Et hurtigt test-dokument:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Titel</title>
<style type="text/css">
html, body { font: 11px/17px Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; } form { margin: 20px; }
</style>
<script type="text/javascript">
if (feltet.value == feltet.defaultValue || feltet.value == "") {
document.getElementById("alertbox").style.display="block";
}
</script>
</head>

<body>
<form action="#" method="post">
<input type="text" value="Navn" onfocus="if(this.value == this.defaultValue) this.value = '';" onblur="if(this.value == '') this.value = this.defaultValue;">
<input type="text" value="Email" onfocus="if(this.value == this.defaultValue) this.value = '';" onblur="if(this.value == '') this.value = this.defaultValue;">
<input type="submit" value="Send">
</form>
<div id="alertbox" style="display:none">
Du har ikke udfyldt alle påkrævede felter!
</div>
</body>
</html>

-> Hvad er det så jeg mangler/gør forkert ;-)? Jeg mangler vel en 'onsubmit' på formen, men hvordan skal den se ud?

Synes godt om

w13 Novice

27. oktober 2008 - 14:32 #5

Synes godt om

ssv Nybegynder

27. oktober 2008 - 14:47 #6

Det virker jo perfekt. Lige for at være besværlig, hvad kræver det hvis jeg gerne vil have individuelle fejlbeskeder? Fx. "Du skal indtaste dit navn" og "Du mangler at skrive en email".

Det er ikke noget du skal bruge alverdens tid på, men kan laves nemt ville det være super at få på tilføjet. :-)

Synes godt om

w13 Novice

27. oktober 2008 - 14:51 #7

Uh, det bliver lidt sværere. Men lettest for mig kan du bare bruge denne som script i stedet:

<script type="text/javascript">
function validateForm(oForm,aFields,aErrors){

for (var i=0; i<aFields.length; i++) {

if (oForm[aFields[i]].value == oForm[aFields[i]].defaultValue || oForm[aFields[i]].value == "") {

document.getElementById("alertbox").firstChild.nodeValue = aErrors[i];

document.getElementById("alertbox").style.display = "block";

return false;

}

}

return true;

}
</script>

Og så form-linjen:

<form action="#" method="post" onsubmit="return validateForm(this, ['navn', 'email'], ['Du skal udfylde navn!', 'Du skal udfylde e-mail!'])">

Og så alertbox-koden:

<div id="alertbox" style="display:none"> </div>

Synes godt om

ssv Nybegynder

27. oktober 2008 - 14:55 #8

Det er jo perfekt. Tak for din hjælp endnu en gang :-)

Synes godt om

w13 Novice

27. oktober 2008 - 14:55 #9

Og tak for points! :)

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