[JS]Onclick laten uitvoeren na onblur event - Softwareontwikkeling

donderdag 21 juni 2007 14:10

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik heb een pagina waar een klantnummer kan ingegeven worden, tijdens het onblur event wordt de klantnaam opgehaald en netjes in het veld klantnaam gedeponeerd.

Ik heb onderaan deze pagina ook een knop staan om verder te gaan, als je echter op deze knop drukt terwijl je nog in het klantnummer staat dan wordt terug de onblur uitgevoerd en niet de code die achter de knop zit.

Kan ik in het onblur event achterhalen op wat werd geklikt ?
Of kan ik er op een andere manier voor zorgen dat ook de code die achter de knop zit uitgevoerd wordt ?

donderdag 21 juni 2007 14:21

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Makkelijkste oplossing: bij het klikken op de knop effe je form valideren

De onblur wordt zowieso uitgevoerd (wiedes, je focus uit het textveld verdwijnt (dus:onblur) en gaat naar de knop)

[ Voor 43% gewijzigd door RobIII op 21-06-2007 14:25 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 21 juni 2007 14:30

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

RobIII schreef op donderdag 21 juni 2007 @ 14:21:
Makkelijkste oplossing: bij het klikken op de knop effe je form valideren

Dat is het hem juist, tijdens het ophalen van de naam noteer ik ook in een hidden veld of er wel een correct klantnummer werd ingevuld.

Tijdens de validatie ( druk op de knop ) ga ik dan de waarde gaan checken van dat veld en geef ik een melding ( alert ) indien het klantnummer foutief is.

Indien foutief zet ik terug de focus in het veld klantnummer, als dit gecorrigeerd is, klikt de gebruiker terug op de knop, maar dan gebeurd de validatie niet omdat terug het onblur event ( ophalen klantnaam ) wordt uitgevoerd, de gebruiker moet dus twee maal klikken.

Een oplossing zou natuurlijk zijn het ophalen van de klantnaam uit te voeren na het klikken op een knop maar dit terug een extra knop en handeling voor de gebruiker.

donderdag 21 juni 2007 14:34

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

RobIII schreef op donderdag 21 juni 2007 @ 14:21:
Makkelijkste oplossing: bij het klikken op de knop effe je form valideren
De onblur wordt zowieso uitgevoerd (wiedes, je focus uit het textveld verdwijnt (dus:onblur) en gaat naar de knop)

Zo ver was ik ook al, ik had echter gehoopt bij de onblur ook te weten waarop werd geklikt waardoor de onblur werd uitgevoerd om op die manier ook mijn validatie uit te voeren bij het ophalen van de klantnaam.

[ Voor 8% gewijzigd door Verwijderd op 21-06-2007 14:35 ]

donderdag 21 juni 2007 21:33

Acties:

0 Henk 'm!

Cartman!

Dat zou niet echt mogen uitmaken, die keer dat het gebeurd hoor je toch serverside die validatie nog een keer te doen. Sowieso voor de veiligheid en ook voor mensen die geen javascript hebben of dit uit hebben gezet. Je zou ook onsubmit() kunnen checken of er gebeurd is wat je wilde en dat alsnog uitvoeren. Als dat gedaan is ga je pas submitten.

donderdag 21 juni 2007 21:38

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Heb je sowieso gekeken welke elementen je kan bekijken bij het afvuren van een event?

http://www.quirksmode.org/dom/w3c_events.html

Overigens is het handig om ook even relevante code (of desnoods een test-case) online te zetten. Het volgende werkt gewoon bij mij nl

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>testje</title>
<script type="text/javascript">
function justdoit(msg){
  alert(msg);
}
</script>

<form id="frm" action="whatever.php">
<p>
 <input type="text" onblur="justdoit('blur')">
 <input type="button" onclick="justdoit('click')" value="klik me">
</p>
</form>

Kijk ook ff, welk event je wanneer krijgt

[ Voor 70% gewijzigd door BtM909 op 21-06-2007 21:47 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 21 juni 2007 22:10

Acties:

0 Henk 'm!

Verwijderd

[b][message=28267001,noline]
Kan ik in het onblur event achterhalen op wat werd geklikt ?

Ik denk dat je dat kunt achterhalen met target/srcElement. Zie ook: http://www.quirksmode.org/js/events_properties.html#target

Lukt niet. Is blijkbaar altijd de textbox in dit geval.

[ Voor 12% gewijzigd door Verwijderd op 21-06-2007 22:15 ]

vrijdag 22 juni 2007 08:47

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

BtM909 schreef op donderdag 21 juni 2007 @ 21:38:
Heb je sowieso gekeken welke elementen je kan bekijken bij het afvuren van een event?

http://www.quirksmode.org/dom/w3c_events.html

Overigens is het handig om ook even relevante code (of desnoods een test-case) online te zetten. Het volgende werkt gewoon bij mij nl
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>testje</title>
<script type="text/javascript">
function justdoit(msg){
  alert(msg);
}
</script>

<form id="frm" action="whatever.php">
<p>
 <input type="text" onblur="justdoit('blur')">
 <input type="button" onclick="justdoit('click')" value="klik me">
</p>
</form>
Kijk ook ff, welk event je wanneer krijgt

Bedankt voor de relevante code

Dit werkt zolang de textbox niet eerst de focus heeft en je dan pas op de knop gaat klikken, éénmaal je dat wel hebt gedaan demonstreert het heel mooi mijn "probleem".

Ik had het graag "mooi" gehad, maar een extra knop zal er aan te pas moeten komen.

Bedankt voor de input !

vrijdag 22 juni 2007 08:59

Acties:

0 Henk 'm!

Verwijderd

Kun je niet op de knop een onmouseover zetten die de onblur op de textbox tijdelijk cancelt? Met onmouseout zet je 'm weer aan.

De enige blur die een probleem geeft is immers een klik op de knop.

vrijdag 22 juni 2007 09:11

Acties:

0 Henk 'm!

Cartman!

Ik weet niet wat je precies bedoeld met achterhalen op wat werd geklikt maar als je de huidige textbox bedoeld dan kun je met onblur="justdoit('blur', this)" werken. in justdoit heb je dan justdoit(msg, element), met element kun je de textbox aanspreken.

vrijdag 22 juni 2007 09:42

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Verwijderd schreef op vrijdag 22 juni 2007 @ 08:47:
[...]

Dit werkt zolang de textbox niet eerst de focus heeft en je dan pas op de knop gaat klikken, éénmaal je dat wel hebt gedaan demonstreert het heel mooi mijn "probleem".

Heb je het uberhaupt geprobeerd

Wat is je probleem precies, want het gedrag wat ik krijg is anders dan wat je beschrijft

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 22 juni 2007 16:20

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

BtM909 schreef op vrijdag 22 juni 2007 @ 09:42:
[...]

Heb je het uberhaupt geprobeerd Wat is je probleem precies, want het gedrag wat ik krijg is anders dan wat je beschrijft

Tuurlijk heb ik het geprobeerd, dit is het resultaat :

- je klikt in de textbox
- je klikt daarna op de knop

Dan krijg je de melding 'blur' en niet 'click'

vrijdag 22 juni 2007 16:36

Acties:

0 Henk 'm!

user109731

Verwijderd schreef op vrijdag 22 juni 2007 @ 16:20:
[...]
Tuurlijk heb ik het geprobeerd, dit is het resultaat :

- je klikt in de textbox
- je klikt daarna op de knop

Dan krijg je de melding 'blur' en niet 'click'

De blur-alert krijgt dus de focus, ipv de button. Gebruik je geen alert dan krijg je immers wel 'click'.

Wat doe je precies in je onblur event handler?

vrijdag 22 juni 2007 16:39

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Verwijderd schreef op vrijdag 22 juni 2007 @ 08:59:
Kun je niet op de knop een onmouseover zetten die de onblur op de textbox tijdelijk cancelt? Met onmouseout zet je 'm weer aan.

De enige blur die een probleem geeft is immers een klik op de knop.

Dat lijkt me een goede oplossing ...

Zoiets dan ?

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<title>testje</title> 
<script type="text/javascript"> 

function justdoit(msg){ 
  alert(msg); 
} 

function disableOnBlur(){
    textVeldId = document.getElementById('textVeld');
    textVeldId.onblur = ''; 
}

function enableOnBlur(){
    textVeldId = document.getElementById('textVeld');
    textVeldId.onblur = "justdoit('blur')";     
}

function bodyOnLoad(){
  document.getElementById('textVeld').focus();  
}

</script> 

<body onload="bodyOnLoad();">

<form id="frm" action="whatever.php" > 
<p> 
 <input type="text" id="textVeld" onblur="justdoit('blur')"> 
 <input type="button" id="knop" onclick="justdoit('click')" onmouseover="disableOnBlur()" onmouseout="enableOnBlur()" value="klik me"> 
</p> 
</form>

</body>

Het uitschakelen van de onblur werkt, maar het terug activeren niet

vrijdag 22 juni 2007 16:54

Acties:

0 Henk 'm!

user109731

Verwijderd schreef op vrijdag 22 juni 2007 @ 16:39:
[...]
Het uitschakelen van de onblur werkt, maar het terug activeren niet

Dat gaat beter zo:

JavaScript:

function disableOnBlur(){
    textVeldId = document.getElementById('textVeld');
    textVeldId.onblur = null;    
}

function enableOnBlur(){
    textVeldId = document.getElementById('textVeld');
    textVeldId.onblur = function() { justdoit('blur');  } 
}

Geen string maar een functie meegeven

edit: nog netter is misschien om de oude onblur in een variabele te stoppen voordat je 'm null maakt. Dan kun je die later gewoon terugzetten...

[ Voor 11% gewijzigd door user109731 op 22-06-2007 16:56 ]

zaterdag 23 juni 2007 15:51

Acties:

0 Henk 'm!

XWB

Devver

document.getElementById is niet nodig, veel handiger is om via this gewoon je element mee te geven. In een formulier gaat dat zelf heel eenvoudig.

HTML:

<script type="text/javascript"> 
function justdoit(msg){ 
  alert(msg); 
} 

function disableOnBlur(textVeldId){
    textVeldId.onblur = null;    
}

function enableOnBlur(textVeldId){
    textVeldId.onblur = "justdoit('blur')";        
}
</script>

<form action="whatever.php" > 
<p> 
 <input type="text" name="textVeld" id="textVeld" onblur="justdoit('blur')"> 
 <input type="button" name="knop" onclick="justdoit('click')" onmouseover="disableOnBlur(this.form.textVeldId)" onmouseout="enableOnBlur(this.form.textVeldId)" value="klik me"> 
</p> 
</form>

<script type="text/javascript">
    document.getElementById('textVeld').focus();
</script>

Verder is het handiger om javascript direct na je form uit te voeren ipv de bodyOnload. Met dat laatste wordt je script pas uitgevoerd wanneer je pagina volledig geladen is en dat is niet altijd handig.

March of the Eagles

zaterdag 23 juni 2007 23:02

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Verwijderd schreef op vrijdag 22 juni 2007 @ 16:20:
[...]

Tuurlijk heb ik het geprobeerd, dit is het resultaat :

- je klikt in de textbox
- je klikt daarna op de knop

Dan krijg je de melding 'blur' en niet 'click'

Welke browser test jij? Ik krijg nl. twee alert, respectievelijk click en dan blur

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

maandag 25 juni 2007 08:21

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

JanDM schreef op vrijdag 22 juni 2007 @ 16:54:
[...]

Dat gaat beter zo:
JavaScript:
1
2
3
4
5
6
7
8
9
function disableOnBlur(){
    textVeldId = document.getElementById('textVeld');
    textVeldId.onblur = null;    
}

function enableOnBlur(){
    textVeldId = document.getElementById('textVeld');
    textVeldId.onblur = function() { justdoit('blur');  } 
}
Geen string maar een functie meegeven edit: nog netter is misschien om de oude onblur in een variabele te stoppen voordat je 'm null maakt. Dan kun je die later gewoon terugzetten...

Super ! Dat werkt en weer iets bijgeleerd ! $_/-\o_$

maandag 25 juni 2007 08:22

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

BtM909 schreef op zaterdag 23 juni 2007 @ 23:02:
[...]

Welke browser test jij? Ik krijg nl. twee alert, respectievelijk click en dan blur

Hey !!!!!! In firefox heeft dat idd iets anders dan met IE

Pagina: 1

Reageer