Controle formaat
Volgende script geeft een foutmelding
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
......
JS:
// Controle of de telefoonnnummer wel goed getoond wordt :-)
function telefoon(nummervoorbeeld, nummer){
var nummervoorbeeld = /[0-9]{2}\/[0-9]{3}\.[0-9]{2}\.[0-9]{2}/;
var nummer = $("#tel").val();
if(nummer.value.match(nummervoorbeeld)){
document.getElementById("Ga door").disabled=true;
}else{
document.getElementById("Ga door").disabled=false;
elem.focus();
return false;
}
}
HTML:
<form name="3" action="toevoegen.php" method="post">
...
<input type="text" name="tel" id="tel" class="tel" value="<?php echo $row['Tel']; ?>" onchange="telefoon()"/>
...
</form>
JS:
// Controle of de telefoonnnummer wel goed getoond wordt :-)
function telefoon(nummervoorbeeld, nummer){
var nummervoorbeeld = /[0-9]{2}\/[0-9]{3}\.[0-9]{2}\.[0-9]{2}/;
var nummer = $("#tel").val();
if(nummer.value.match(nummervoorbeeld)){
document.getElementById("Ga door").disabled=true;
}else{
document.getElementById("Ga door").disabled=false;
elem.focus();
return false;
}
}
HTML:
<form name="3" action="toevoegen.php" method="post">
...
<input type="text" name="tel" id="tel" class="tel" value="<?php echo $row['Tel']; ?>" onchange="telefoon()"/>
...
</form>
Foutmelding: TypeError: nummer.value is undefined
Wat gaat er mis?
Groeten,
Olivier
" onchange="telefoon()"
terwijl je functie dit is:
function telefoon(nummervoorbeeld, nummer)
Die twee parameters in de functie moet je dus weglaten, die geef je namelijk niet mee.
Vervolgens doe je:
var nummer = $("#tel").val();
Waarbij nummer een string wordt. Je kan dan dus niet meer nummer.value doen, want nummer is namelijk een string object dat geen property value heeft. Tenzij je zelf een uitbreiding hebt geschreven.
Code (php)
1
var nummer = $('#tel').val();
Kijk eens wat deze functie doet (http://api.jquery.com/val/ ).
Kijk eens wat `nummer.value` eigenlijk betekend.
Concludeer zelf wat het probleem is.
The .val() method is primarily used to get the values of form elements such as input, select and textarea. In the case of <select multiple="multiple"> elements, the .val() method returns an array containing each selected option; if no option is selected, it returns null.
Over die (nummer) .value vind ik geen informatie. Maar ik ga ervanuit dat hier een value uit een onbekend gegeven gehaald word?
Is dit de oplossing?
var nummer = $("#tel").val();
if(nummer.match(nummervoorbeeld)){
Groeten,
Olivier
Quote:
Is dit de oplossing?
Perfect!
Quote:
Over die (nummer) .value vind ik geen informatie. Maar ik ga ervanuit dat hier een value uit een onbekend gegeven gehaald word?
Waarschijnlijk omdat je verkeerd zoekt. De value property is precies hetzelfde als de val() method, alleen dan in Raw JS.
Basically: dit is jQuery en niet-jQuery door mekaar gehaald.
Zonder jQuery zou je zoiets verwachten:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<input type="text" name="tel" id="tel" class="tel" value="<?php echo $row['Tel']; ?>" onchange="telefoon(this)"/>
...
// merk op: variabele element is het HTML-element <input name="tel" ...>. Die heb je meegegeven door de "this" mee te geven in de markup.
function telefoon(element){
var nummervoorbeeld = /[0-9]{2}\/[0-9]{3}\.[0-9]{2}\.[0-9]{2}/;
if( element.value.match(nummervoorbeeld)) {
...
}
}
...
// merk op: variabele element is het HTML-element <input name="tel" ...>. Die heb je meegegeven door de "this" mee te geven in de markup.
function telefoon(element){
var nummervoorbeeld = /[0-9]{2}\/[0-9]{3}\.[0-9]{2}\.[0-9]{2}/;
if( element.value.match(nummervoorbeeld)) {
...
}
}
-----
Met jquery werk je anders. Evenementen binden aan HTML-elementen doe je niet in de markup, zoals ... onchange="telefoon(this)" ... , maar doe je volledig in javascript-omgeving.
Zoiets:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<input name="tel" id="tel">
...
$(document).ready(function($) { // wordt uitgevoerd wanneer de pagina geladen is en de DOM klaar is voor gebruik
$('#tel').change(function(e) { // wanneer er iets wijzigt aan <input id="tel">, moet je dit uitvoeren:
var nummervoorbeeld = /[0-9]{2}\/[0-9]{3}\.[0-9]{2}\.[0-9]{2}/;
var nummer = $(this).val();
if(nummer.match(nummervoorbeeld)) {
...
}
});
};
...
$(document).ready(function($) { // wordt uitgevoerd wanneer de pagina geladen is en de DOM klaar is voor gebruik
$('#tel').change(function(e) { // wanneer er iets wijzigt aan <input id="tel">, moet je dit uitvoeren:
var nummervoorbeeld = /[0-9]{2}\/[0-9]{3}\.[0-9]{2}\.[0-9]{2}/;
var nummer = $(this).val();
if(nummer.match(nummervoorbeeld)) {
...
}
});
};
Zie ook dat je weet met welk soort ding je bezig bent.
Als je een variabele "nummer" noemt, zorg dan dat de variabele een getal bevat, en niet een HTML-element waaruit je een nummer wil halen.
Dit soort dingen heb je door mekaar gebruikt.
Gewijzigd op 23/07/2012 17:27:02 door Kris Peeters
Code (php)
1
2
3
4
5
2
3
4
5
window.onload = function() {
document.querySelector('#tel').onclik = function(e) {
// doe wat je wilt...
};
};
document.querySelector('#tel').onclik = function(e) {
// doe wat je wilt...
};
};
Is dat nieuw? Tja, nog een extra argument om aan te halen waarom jQuery niet echt noodzakelijk is, meestal.
Browser support is ook redelijk goed: IE8+; FF3.5+; Chrome; Safari; Opera10+.
document.querySelector is voor het ophalen van 1 element en zal altijd het element teruggeven, document.querySelectorAll is voor het ophalen van meerdere elementen en zal altijd een array teruggeven:
Code (php)
1
2
3
4
5
2
3
4
5
typeof document.querySelector('#key'); // DOMNode oid
typeof document.querySelectorAll('#key'); // object (array dus)
document.querySelector('.foo'); // eerste element met class=foo
var elements = document.querySelectorAll('.foo'); // alle elementen met class=foo
typeof document.querySelectorAll('#key'); // object (array dus)
document.querySelector('.foo'); // eerste element met class=foo
var elements = document.querySelectorAll('.foo'); // alle elementen met class=foo
En je kan nog veel meer dan deze simpele selector dingetjes.
Het enige nadeel is dat je geen live dom list meer terugkrijgt. Stel je voegt nog een element met class=foo toe dan zal de elements variabele (van hierboven) niet aangepast worden, als je dat met de ouderwetse document.getElementsByClassName() had gedaan dan werd de variabele elements wel aangepast.
Edit:
Merk op dat de namen querySelector en querySelectorAll in de specs binnenkort naar find en findAll worden hernoemd, de browser support zal dan wat bagger worden en je zult dan dingen moeten doen als:
Code (php)
1
2
3
4
5
2
3
4
5
document.select = document.find || document.querySelector;
document.selectAll = document.findAll || document.querySelectorAll;
// en dan in de code
document.select('#foo');
document.selectAll('#foo');
document.selectAll = document.findAll || document.querySelectorAll;
// en dan in de code
document.select('#foo');
document.selectAll('#foo');
Gewijzigd op 23/07/2012 17:46:16 door Wouter J
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function($) {
$('#tel').change(function(e) {
var nummervoorbeeld = /[0-9]{2}\/[0-9]{3}\.[0-9]{2}\.[0-9]{2}/;
var nummer = $(this).val();
if(nummer.match(nummervoorbeeld)) {
$("div").html("<b>Wow!</b> Such excitement...");
}
else
{
$("div").html("<b>Wow!</b>");
}
});
});
$('#tel').change(function(e) {
var nummervoorbeeld = /[0-9]{2}\/[0-9]{3}\.[0-9]{2}\.[0-9]{2}/;
var nummer = $(this).val();
if(nummer.match(nummervoorbeeld)) {
$("div").html("<b>Wow!</b> Such excitement...");
}
else
{
$("div").html("<b>Wow!</b>");
}
});
});
Maar die if/else werkt bij mij niet echt....
Groeten,
Olivier
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$('#tel').blur (function () {
if ($(this).val ().match (/[0-9]{2}\/[0-9]{3}\.[0-9]{2}\.[0-9]{2}/)) {
$('#msg').text ('ja');
}
else {
$('#msg').text ('nee');
}
});
if ($(this).val ().match (/[0-9]{2}\/[0-9]{3}\.[0-9]{2}\.[0-9]{2}/)) {
$('#msg').text ('ja');
}
else {
$('#msg').text ('nee');
}
});
Maak een div aan met id="msg", anders zie je geen meldingen.