JS / AJAX werkt niet in IE, wel in FF
mijn JS-acties doen het niet in IE, maar wel FF en Chrome. Wat is er mis gegaan?
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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function gegevenscontrole() {
$('#login').hide();
$('#gegevens').show();
var lifenr = $("#lifenr").val();
var voornaam = $("#voornaam").val();
var achternaam = $("#achternaam").val();
var straat = $("#straat").val();
var huisnummer = $("#huisnummer").val();
var bus = $("#bus").val();
var postcode = $("#postcode").val();
var gemeente = $("#gemeente").val();
var geboorte = $("#geboortedatumjaar").val()+"-"+$("#geboortedatummaand").val()+"-"+$("#geboortedatumdag").val();
var geboorteplaats = $("#geboorteplaats").val();
var geslacht = $('input:radio[name=geslacht]:checked').val();
var email = $("#email").val();
var tel = $("#tel").val();
var gsm = $("#gsm").val();
var ice = $("#ice").val();
var type = $("#type").val();
var kavvvaansluiting = $("#kavvvaansluiting:checked").val()
var valaansluiting = $("#valaansluiting:checked").val();
var invuller = $("#invuller").val();
var akkoord = $("#akkoord").val();
var datum = $("#datum").val();
$.ajax({ type: "GET",
url: "gegevens-controle.php?lifenr="+lifenr+"&voornaam="+voornaam+"&achternaam="+achternaam+"&straat="+straat+"&huisnummer="+huisnummer+"&bus="+bus+"&postcode="+postcode+"&gemeente="+gemeente+"&geboortedatum="+geboorte+"&geboorteplaats="+geboorteplaats+"&geslacht="+geslacht+"&email="+email+"&tel="+tel+"&gsm="+gsm+"&ice="+ice+"&aansluiting="+type+"&kavvvaansluiting="+kavvvaansluiting+"&valaansluiting="+valaansluiting+"&invuller="+invuller+"&voorakkoord="+akkoord+"&datum="+datum,
async: false,
success : function(text) {
$('#gegevens').html(text); // = steek tekst als innerHTML van het element met id="login"
}
});
}
function aansluiting() {
var aansluiting = $("#type").val();
if(aansluiting === "Bestuur/Trainer") {
$('#valaansluitingtr').show();
}else if(aansluiting !== "Bestuur/Trainer") {
$('#valaansluitingtr').hide();
}
}
// Deze functie moet gemaakt worden om ervoor te zorgen dat de kavvv disabeld word voor jeugdatleten
function jeugdkavvvaansluiting() {
var geboortedatumjaar = $("#geboortedatumjaar").val();
if (geboortedatumjaar>=2000){
document.getElementById("kavvvaansluiting").checked=true;
document.getElementById("kavvvaansluiting").disabled=true;
$('#type :nth-child(1)').attr('selected', 'selected');
document.getElementById("type").disabled=true;
}
if (geboortedatumjaar<2000){
document.getElementById("kavvvaansluiting").disabled=false;
document.getElementById("type").disabled=false;
}
}
// Functie ga terug
function terug(lifenr,geboortedag, geboortemaand, geboortejaar) {
var geboortedag = $("#geboortedatumdag").val()
var geboortemaand = $("#geboortedatummaand").val()
var geboortejaar = $("#geboortedatumjaar").val()
var lifenr = $("#lifenr").val()
$.ajax({ type: "GET",
url: "login-controle.php?lifenr="+lifenr+"&geboortedatumdag="+geboortedag+"&geboortedatummaand="+geboortemaand+"&geboortedatumjaar="+geboortejaar,
async: false,
success : function(text) {
$('#login').html(text); // = steek tekst als innerHTML van het element met id="login"
}
});
}
</script>
<script type="text/javascript">
function gegevenscontrole() {
$('#login').hide();
$('#gegevens').show();
var lifenr = $("#lifenr").val();
var voornaam = $("#voornaam").val();
var achternaam = $("#achternaam").val();
var straat = $("#straat").val();
var huisnummer = $("#huisnummer").val();
var bus = $("#bus").val();
var postcode = $("#postcode").val();
var gemeente = $("#gemeente").val();
var geboorte = $("#geboortedatumjaar").val()+"-"+$("#geboortedatummaand").val()+"-"+$("#geboortedatumdag").val();
var geboorteplaats = $("#geboorteplaats").val();
var geslacht = $('input:radio[name=geslacht]:checked').val();
var email = $("#email").val();
var tel = $("#tel").val();
var gsm = $("#gsm").val();
var ice = $("#ice").val();
var type = $("#type").val();
var kavvvaansluiting = $("#kavvvaansluiting:checked").val()
var valaansluiting = $("#valaansluiting:checked").val();
var invuller = $("#invuller").val();
var akkoord = $("#akkoord").val();
var datum = $("#datum").val();
$.ajax({ type: "GET",
url: "gegevens-controle.php?lifenr="+lifenr+"&voornaam="+voornaam+"&achternaam="+achternaam+"&straat="+straat+"&huisnummer="+huisnummer+"&bus="+bus+"&postcode="+postcode+"&gemeente="+gemeente+"&geboortedatum="+geboorte+"&geboorteplaats="+geboorteplaats+"&geslacht="+geslacht+"&email="+email+"&tel="+tel+"&gsm="+gsm+"&ice="+ice+"&aansluiting="+type+"&kavvvaansluiting="+kavvvaansluiting+"&valaansluiting="+valaansluiting+"&invuller="+invuller+"&voorakkoord="+akkoord+"&datum="+datum,
async: false,
success : function(text) {
$('#gegevens').html(text); // = steek tekst als innerHTML van het element met id="login"
}
});
}
function aansluiting() {
var aansluiting = $("#type").val();
if(aansluiting === "Bestuur/Trainer") {
$('#valaansluitingtr').show();
}else if(aansluiting !== "Bestuur/Trainer") {
$('#valaansluitingtr').hide();
}
}
// Deze functie moet gemaakt worden om ervoor te zorgen dat de kavvv disabeld word voor jeugdatleten
function jeugdkavvvaansluiting() {
var geboortedatumjaar = $("#geboortedatumjaar").val();
if (geboortedatumjaar>=2000){
document.getElementById("kavvvaansluiting").checked=true;
document.getElementById("kavvvaansluiting").disabled=true;
$('#type :nth-child(1)').attr('selected', 'selected');
document.getElementById("type").disabled=true;
}
if (geboortedatumjaar<2000){
document.getElementById("kavvvaansluiting").disabled=false;
document.getElementById("type").disabled=false;
}
}
// Functie ga terug
function terug(lifenr,geboortedag, geboortemaand, geboortejaar) {
var geboortedag = $("#geboortedatumdag").val()
var geboortemaand = $("#geboortedatummaand").val()
var geboortejaar = $("#geboortedatumjaar").val()
var lifenr = $("#lifenr").val()
$.ajax({ type: "GET",
url: "login-controle.php?lifenr="+lifenr+"&geboortedatumdag="+geboortedag+"&geboortedatummaand="+geboortemaand+"&geboortedatumjaar="+geboortejaar,
async: false,
success : function(text) {
$('#login').html(text); // = steek tekst als innerHTML van het element met id="login"
}
});
}
</script>
Toepassingen in het volgende formulier:
Code (php)
1
2
2
<select class="type" id="type" name="type" onchange="aansluiting()">
<input type="button" id="Ga door" class="Ga door" id="Ga door" value="Ga door" onclick="gegevenscontrole()">
<input type="button" id="Ga door" class="Ga door" id="Ga door" value="Ga door" onclick="gegevenscontrole()">
Ik test in IE, dus ken geen methode om de fouten te bekijken... In Firebug in FF krijg ik GEEN ENKELE foutmelding?
Wat is er niet IE compatibel, waarom loopt hij vast op IE?
Groeten,
Olivier
Dit hoor je met POST te doen.
GET betekent: de gebruiker wil informatie van de site krijgen, op basis van variabelen in de url.
POST: de gebruiker voegt extra informatie toe aan de website.
Ook met Ajax blijft dit gelden.
Ik zal een voorbeeld geven van hoe je een post kan regelen. Let op de functie serialize(). Die bespaart je een hoop code
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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?php
if($_SERVER['REQUEST_METHOD'] === 'POST') {
echo '<pre>' . print_r($_POST, true) . '</pre>';
exit; // niet vergeten dat de rest van de code niet mag worden uitgevoerd
}
?>
<!doctype html>
<html>
<head>
</head>
<body>
<form id="my_form" action="">
<input name="username"> Username <br>
<input name="email"> e-mail <br>
<input name="gsm"> GSM-nummer <br>
<input type="submit" value="GO"> Username <br>
</form>
<div id="message"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('#my_form').submit(function(e) {
// this = <form id="my_form"></form>
var form = $(this);
e.preventDefault(); // eerst en vooral: stop de normale werking van deze submit, en houd dus de submit tegen
$.ajax({
url : form.attr('action'),
type: "POST",
data: form.serialize(), // dit leest de data uit het formulier en zet alles in de juiste vorm
success: function(data) {
$('#message').html(data);
}
});
});
});
</script>
</body>
</html>
if($_SERVER['REQUEST_METHOD'] === 'POST') {
echo '<pre>' . print_r($_POST, true) . '</pre>';
exit; // niet vergeten dat de rest van de code niet mag worden uitgevoerd
}
?>
<!doctype html>
<html>
<head>
</head>
<body>
<form id="my_form" action="">
<input name="username"> Username <br>
<input name="email"> e-mail <br>
<input name="gsm"> GSM-nummer <br>
<input type="submit" value="GO"> Username <br>
</form>
<div id="message"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('#my_form').submit(function(e) {
// this = <form id="my_form"></form>
var form = $(this);
e.preventDefault(); // eerst en vooral: stop de normale werking van deze submit, en houd dus de submit tegen
$.ajax({
url : form.attr('action'),
type: "POST",
data: form.serialize(), // dit leest de data uit het formulier en zet alles in de juiste vorm
success: function(data) {
$('#message').html(data);
}
});
});
});
</script>
</body>
</html>
Dit kan je dus (bijna onveranderd) gebruiken voor bijna gelijk welk formulier
Gewijzigd op 26/07/2012 10:03:24 door Kris Peeters
zeer bruikbare tips. Echter heb ik het gepresteerd om weer een fout in mijn script te steken. Huidige script:
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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('#3').submit(function(e) {
var form = $(this);
e.preventDefault(); // eerst en vooral: stop de normale werking van deze submit, en houd dus de submit tegen
var geboorte = $("#geboortedatumjaar").val()+"-"+$("#geboortedatummaand").val()+"-"+$("#geboortedatumdag").val();
$.ajax({
type: "POST",
url: "gegevens-controle.php?lifenr="+lifenr+"&voornaam="+voornaam+"&achternaam="+achternaam+"&straat="+straat+"&huisnummer="+huisnummer
+"&bus="+bus+"&postcode="+postcode+"&gemeente="+gemeente+"&geboortedatum="+geboorte+"&geboorteplaats="+geboorteplaats+"&geslacht="+geslacht+"&email="+email
+"&tel="+tel+"&gsm="+gsm+"&ice="+ice+"&aansluiting="+type+"&kavvvaansluiting="+kavvvaansluiting+"&valaansluiting="+valaansluiting+"&invuller="+invuller
+"&voorakkoord="+akkoord+"&datum="+datum,
async: false,
data: form.serialize(), // dit leest de data uit het formulier en zet alles in de juiste vorm
success : function(text) {
$('#gegevens').html(text); // = steek tekst als innerHTML van het element met id="login"
})
})
})
});
$(document).ready(function($) {
$('#type').change(function(e) {
var aansluiting = $("#type").val();
if(aansluiting === "Bestuur/Trainer") {
$('#valaansluitingtr').hide();
}else if(aansluiting !== "Bestuur/Trainer") {
$('#valaansluitingtr').show();
})
})
});
$(document).ready(function($) {
$('#type').change(function(e) {
var aansluiting = $("#type").val();
if(aansluiting === "Steunend lid") {
$('#kavvvaansluitingtr').hide();
}else if(aansluiting !== "Steunend lid") {
$('#kavvvaansluitingtr').show();
})
})
});
// Hier
// Deze functie moet gemaakt worden om ervoor te zorgen dat de kavvv disabeld word voor jeugdatleten
function jeugdkavvvaansluiting() {
var geboortedatumjaar = $("#geboortedatumjaar").val();
if (geboortedatumjaar>=2000){
document.getElementById("kavvvaansluiting").checked=true;
document.getElementById("kavvvaansluiting").disabled=true;
$('#type :nth-child(1)').attr('selected', 'selected');
document.getElementById("type").disabled=true;
}
if (geboortedatumjaar<2000){
document.getElementById("kavvvaansluiting").disabled=false;
document.getElementById("type").disabled=false;
}
}
// Functie ga terug
function terug(lifenr,geboortedag, geboortemaand, geboortejaar) {
var geboortedag = $("#geboortedatumdag").val()
var geboortemaand = $("#geboortedatummaand").val()
var geboortejaar = $("#geboortedatumjaar").val()
var lifenr = $("#lifenr").val()
$.ajax({ type: "GET",
url: "login-controle.php?lifenr="+lifenr+"&geboortedatumdag="+geboortedag+"&geboortedatummaand="+geboortemaand
+"&geboortedatumjaar="+geboortejaar,
async: false,
success : function(text) {
$('#login').html(text); // = steek tekst als innerHTML van het element met id="login"
}
})
});
</script>
<script type="text/javascript">
$(document).ready(function($) {
$('#3').submit(function(e) {
var form = $(this);
e.preventDefault(); // eerst en vooral: stop de normale werking van deze submit, en houd dus de submit tegen
var geboorte = $("#geboortedatumjaar").val()+"-"+$("#geboortedatummaand").val()+"-"+$("#geboortedatumdag").val();
$.ajax({
type: "POST",
url: "gegevens-controle.php?lifenr="+lifenr+"&voornaam="+voornaam+"&achternaam="+achternaam+"&straat="+straat+"&huisnummer="+huisnummer
+"&bus="+bus+"&postcode="+postcode+"&gemeente="+gemeente+"&geboortedatum="+geboorte+"&geboorteplaats="+geboorteplaats+"&geslacht="+geslacht+"&email="+email
+"&tel="+tel+"&gsm="+gsm+"&ice="+ice+"&aansluiting="+type+"&kavvvaansluiting="+kavvvaansluiting+"&valaansluiting="+valaansluiting+"&invuller="+invuller
+"&voorakkoord="+akkoord+"&datum="+datum,
async: false,
data: form.serialize(), // dit leest de data uit het formulier en zet alles in de juiste vorm
success : function(text) {
$('#gegevens').html(text); // = steek tekst als innerHTML van het element met id="login"
})
})
})
});
$(document).ready(function($) {
$('#type').change(function(e) {
var aansluiting = $("#type").val();
if(aansluiting === "Bestuur/Trainer") {
$('#valaansluitingtr').hide();
}else if(aansluiting !== "Bestuur/Trainer") {
$('#valaansluitingtr').show();
})
})
});
$(document).ready(function($) {
$('#type').change(function(e) {
var aansluiting = $("#type").val();
if(aansluiting === "Steunend lid") {
$('#kavvvaansluitingtr').hide();
}else if(aansluiting !== "Steunend lid") {
$('#kavvvaansluitingtr').show();
})
})
});
// Hier
// Deze functie moet gemaakt worden om ervoor te zorgen dat de kavvv disabeld word voor jeugdatleten
function jeugdkavvvaansluiting() {
var geboortedatumjaar = $("#geboortedatumjaar").val();
if (geboortedatumjaar>=2000){
document.getElementById("kavvvaansluiting").checked=true;
document.getElementById("kavvvaansluiting").disabled=true;
$('#type :nth-child(1)').attr('selected', 'selected');
document.getElementById("type").disabled=true;
}
if (geboortedatumjaar<2000){
document.getElementById("kavvvaansluiting").disabled=false;
document.getElementById("type").disabled=false;
}
}
// Functie ga terug
function terug(lifenr,geboortedag, geboortemaand, geboortejaar) {
var geboortedag = $("#geboortedatumdag").val()
var geboortemaand = $("#geboortedatummaand").val()
var geboortejaar = $("#geboortedatumjaar").val()
var lifenr = $("#lifenr").val()
$.ajax({ type: "GET",
url: "login-controle.php?lifenr="+lifenr+"&geboortedatumdag="+geboortedag+"&geboortedatummaand="+geboortemaand
+"&geboortedatumjaar="+geboortejaar,
async: false,
success : function(text) {
$('#login').html(text); // = steek tekst als innerHTML van het element met id="login"
}
})
});
</script>
Form: <form id="3" name="3" method="post" action="">
Wat gaat er nu weer mis?
Vriendelijke groeten,
Olivier Peeters
[Afbreken op deze fout] SyntaxError: missing } after property list
})
jquery.min.js (regel 18, kol 7)
Ik heb al elke code een voor een verwijderd en dan getest, maar dat bracht niet veel op....
Het moet dus via POST. Dit wil dan ook zeggen dat je die data niet in de url moet zetten.
Dus
Code (php)
1
2
3
2
3
type: "POST",
url: "gegevens-controle.php", // en verder niets dat te maken heeft met de input velden
data: ...
url: "gegevens-controle.php", // en verder niets dat te maken heeft met de input velden
data: ...
Gewijzigd op 26/07/2012 11:02:10 door Kris Peeters
fout blijft ook dan bestaan.
Ik heb nu http://www.jslint.com/ gevonden. Daar mijn code getest en enerm veel errors gevonden. Ga ervanuit dat dit niet relevant is?
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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('#3').submit(function(e) {
var form = $(this);
e.preventDefault(); // eerst en vooral: stop de normale werking van deze submit, en houd dus de submit tegen
$.ajax({
type: "POST",
url: "gegevens-controle.php",
async: false,
data: form.serialize(), // dit leest de data uit het formulier en zet alles in de juiste vorm
success : function(text) {
$('#gegevens').html(text); // = steek tekst als innerHTML van het element met id="login"
})
})
})
});
$(document).ready(function($) {
$('#type').change(function(e) {
var aansluiting = $("#type").val();
if(aansluiting === "Bestuur/Trainer") {
$('#valaansluitingtr').hide();
}else if(aansluiting !== "Bestuur/Trainer") {
$('#valaansluitingtr').show();
})
})
});
$(document).ready(function($) {
$('#type').change(function(e) {
var aansluiting = $("#type").val();
if(aansluiting === "Steunend lid") {
$('#kavvvaansluitingtr').hide();
}else if(aansluiting !== "Steunend lid") {
$('#kavvvaansluitingtr').show();
})
})
});
// Hier
// Deze functie moet gemaakt worden om ervoor te zorgen dat de kavvv disabeld word voor jeugdatleten
function jeugdkavvvaansluiting() {
var geboortedatumjaar = $("#geboortedatumjaar").val();
if (geboortedatumjaar>=2000){
document.getElementById("kavvvaansluiting").checked=true;
document.getElementById("kavvvaansluiting").disabled=true;
$('#type :nth-child(1)').attr('selected', 'selected');
document.getElementById("type").disabled=true;
}
if (geboortedatumjaar<2000){
document.getElementById("kavvvaansluiting").disabled=false;
document.getElementById("type").disabled=false;
}
}
// Functie ga terug
function terug(lifenr,geboortedag, geboortemaand, geboortejaar) {
var geboortedag = $("#geboortedatumdag").val()
var geboortemaand = $("#geboortedatummaand").val()
var geboortejaar = $("#geboortedatumjaar").val()
var lifenr = $("#lifenr").val()
$.ajax({ type: "GET",
url: "login-controle.php?lifenr="+lifenr+"&geboortedatumdag="+geboortedag+"&geboortedatummaand="+geboortemaand
+"&geboortedatumjaar="+geboortejaar,
async: false,
success : function(text) {
$('#login').html(text); // = steek tekst als innerHTML van het element met id="login"
}
})
});
</script>
<script type="text/javascript">
$(document).ready(function($) {
$('#3').submit(function(e) {
var form = $(this);
e.preventDefault(); // eerst en vooral: stop de normale werking van deze submit, en houd dus de submit tegen
$.ajax({
type: "POST",
url: "gegevens-controle.php",
async: false,
data: form.serialize(), // dit leest de data uit het formulier en zet alles in de juiste vorm
success : function(text) {
$('#gegevens').html(text); // = steek tekst als innerHTML van het element met id="login"
})
})
})
});
$(document).ready(function($) {
$('#type').change(function(e) {
var aansluiting = $("#type").val();
if(aansluiting === "Bestuur/Trainer") {
$('#valaansluitingtr').hide();
}else if(aansluiting !== "Bestuur/Trainer") {
$('#valaansluitingtr').show();
})
})
});
$(document).ready(function($) {
$('#type').change(function(e) {
var aansluiting = $("#type").val();
if(aansluiting === "Steunend lid") {
$('#kavvvaansluitingtr').hide();
}else if(aansluiting !== "Steunend lid") {
$('#kavvvaansluitingtr').show();
})
})
});
// Hier
// Deze functie moet gemaakt worden om ervoor te zorgen dat de kavvv disabeld word voor jeugdatleten
function jeugdkavvvaansluiting() {
var geboortedatumjaar = $("#geboortedatumjaar").val();
if (geboortedatumjaar>=2000){
document.getElementById("kavvvaansluiting").checked=true;
document.getElementById("kavvvaansluiting").disabled=true;
$('#type :nth-child(1)').attr('selected', 'selected');
document.getElementById("type").disabled=true;
}
if (geboortedatumjaar<2000){
document.getElementById("kavvvaansluiting").disabled=false;
document.getElementById("type").disabled=false;
}
}
// Functie ga terug
function terug(lifenr,geboortedag, geboortemaand, geboortejaar) {
var geboortedag = $("#geboortedatumdag").val()
var geboortemaand = $("#geboortedatummaand").val()
var geboortejaar = $("#geboortedatumjaar").val()
var lifenr = $("#lifenr").val()
$.ajax({ type: "GET",
url: "login-controle.php?lifenr="+lifenr+"&geboortedatumdag="+geboortedag+"&geboortedatummaand="+geboortemaand
+"&geboortedatumjaar="+geboortejaar,
async: false,
success : function(text) {
$('#login').html(text); // = steek tekst als innerHTML van het element met id="login"
}
})
});
</script>
Groeten,
Olivier
Gewijzigd op 26/07/2012 11:23:41 door Olivier Peeters
Je moet echt goed zien dat elke accolade en elk rond haakje gesloten wordt.
Zie goed waar de } of ) mee overeen komt.
bv.
Code (php)
1
2
3
2
3
success : function(text) {
$('#gegevens').html(text);
})
$('#gegevens').html(text);
})
Deze laatste ) hoort daar niet.
De beste manier om dit te zien, is om heel consequent te indenteren (het aantal spaties aan het begin van de lijn)
bv. het eerste stuk
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function($) {
$('#3').submit(function(e) {
var form = $(this);
e.preventDefault(); // eerst en vooral: stop de normale werking van deze submit, en houd dus de submit tegen
//var geboorte = $("#geboortedatumjaar").val()+"-"+$("#geboortedatummaand").val()+"-"+$("#geboortedatumdag").val();
$.ajax({
type: "POST",
url: "gegevens-controle.php?",
data: form.serialize(), // dit leest de data uit het formulier en zet alles in de juiste vorm
success : function(text) {
$('#gegevens').html(text); // = steek tekst als innerHTML van het element met id="gegevens"
}
});
});
});
$('#3').submit(function(e) {
var form = $(this);
e.preventDefault(); // eerst en vooral: stop de normale werking van deze submit, en houd dus de submit tegen
//var geboorte = $("#geboortedatumjaar").val()+"-"+$("#geboortedatummaand").val()+"-"+$("#geboortedatumdag").val();
$.ajax({
type: "POST",
url: "gegevens-controle.php?",
data: form.serialize(), // dit leest de data uit het formulier en zet alles in de juiste vorm
success : function(text) {
$('#gegevens').html(text); // = steek tekst als innerHTML van het element met id="gegevens"
}
});
});
});
Die verjaardag zou ik dan in php aan mekaar plakken; anders moet je nog prutsen aan het resultaat van de serialize().
Gewijzigd op 26/07/2012 12:11:37 door Kris Peeters
de code werkt, of toch bijna. Deze code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
function jeugdkavvvaansluiting() {
var geboortedatumjaar = $("#geboortedatumjaar").val();
if (geboortedatumjaar>=2000){
document.getElementById("kavvvaansluiting").checked=true;
document.getElementById("kavvvaansluiting").disabled=true;
$('#type :nth-child(1)').attr('selected', 'selected');
document.getElementById("type").disabled=true;
$('#valaansluitingtr').hide();
}
if (geboortedatumjaar<2000){
document.getElementById("kavvvaansluiting").disabled=false;
document.getElementById("type").disabled=false;
}
}
var geboortedatumjaar = $("#geboortedatumjaar").val();
if (geboortedatumjaar>=2000){
document.getElementById("kavvvaansluiting").checked=true;
document.getElementById("kavvvaansluiting").disabled=true;
$('#type :nth-child(1)').attr('selected', 'selected');
document.getElementById("type").disabled=true;
$('#valaansluitingtr').hide();
}
if (geboortedatumjaar<2000){
document.getElementById("kavvvaansluiting").disabled=false;
document.getElementById("type").disabled=false;
}
}
Zorgt ervoor dat ik een paar keuzes disabled maak (is nodig omdat jonge atleten zowieso lid moeten zijn,...). Nu ik heb de inputgegevens van deze input wel nodig, en die krijg ik niet door met sterialze,. Doe ik iets fout? Of moet ik de sterialize manipuleren op een bepaalde manier zodanig dat deze ze wel meepakt.
Alvast bedankt,
Olivier
(JSHint is de nieuwe JSLint, beter kun je die gebruiken)
gezien jij nog de oude (foutieve) code hebt gepost, heb ik even een nieuwe gemaakt...
http://www.jshint.com/reports/653070
Kunnen jullie duidelijk maken of die fouten allemaal nagekeken moeten worden?
En hebben jullie een oplossingen voor voorgaand probleem? Dat vergendelde velden niet wornde megenomen met de JQuery post sterialize?
Groeten
Nu ik wil ook de disabeld velden meenemen in mijn verwerking. Daarvoor heb ik iets als dit gevonden, alleen werkt het niet...
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
$('input[disabled]').each( function() {
form = form.serialize();// dit leest de data uit het formulier en zet alles in de juiste vorm
form = form + '&' + $(this).attr('kavvvaansluiting') + '=' + $(this).val();
form = form + '&' + $(this).attr('type') + '=' + $(this).val();
});
$.ajax({
type: "POST",
url: "gegevens-controle.php?",
data: form,
success : function(text) {
$('#gegevens').html(text); // = steek tekst als innerHTML van het element met id="login"
}
form = form.serialize();// dit leest de data uit het formulier en zet alles in de juiste vorm
form = form + '&' + $(this).attr('kavvvaansluiting') + '=' + $(this).val();
form = form + '&' + $(this).attr('type') + '=' + $(this).val();
});
$.ajax({
type: "POST",
url: "gegevens-controle.php?",
data: form,
success : function(text) {
$('#gegevens').html(text); // = steek tekst als innerHTML van het element met id="login"
}
Groeten,
Olivier
Punt 2: $(this).attr('kavvvaansluiting') gaat niet werken. Geen enkele input heeft zo'n attribuut. Misschien attr('name') gebruiken om de naam van de input uit te lezen?
het werkt ;-)
Maar ik wil onderstaande code laten testen en dit werkt niet... Is een script om enkele velden te tonen of terug te verbergen.
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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<script>
$(document).ready(function($) {
$(".ICE1plus").click(function() {
$('#ICE2').show();
$('img.ICE1plus').replaceWith('<img class="ICE1min" src="http://2.bp.blogspot.com/_cf7lGNU3J0A/S0NTp7x1fkI/AAAAAAAAAEs/i_wSmG3ZNBI/s1600-R/minus
%2520new%2520blk.jpg">');
})
});
$(document).ready(function($) {
$(".ICE1min").click(function() {
$('#ICE2').hide();
$('img.ICE1min').replaceWith('<img class="ICE1plus" src="http://www.plasticjungle.com/blog/wp-content/uploads/2012/04/PlusSign.png">');
})
});
</script>
<style type="text/css">
img{
height: 25px;
}
</style>
ICE<br />
<p id="ICE1" style="
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #888888;
border-radius: 7px 7px 7px 7px;
color: #222222;
padding: 3px 4px;
float: left;
margin: 0;
">
1) ICE <input name="ICE1"> Bezitter <input name="ICE1Bezit"> Verwantschap
<select>
<option>partner</option>
<option>vader</option>
<option>moeder</option>
<option>stiefvader</option>
<option>stiefmoeder</option>
<option>oma</option>
<option>opa</option>
<option>tante</option>
<option>nonkel</option>
<option>ander</option>
</select>
<img class="ICE1plus" src="http://www.plasticjungle.com/blog/wp-content/uploads/2012/04/PlusSign.png">
</p>
<p id="ICE2" style="clear: left;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #888888;
border-radius: 7px 7px 7px 7px;
color: #222222;
padding: 3px 4px;
display: none;
float: left;
margin: 0;
">
2) ICE <input name="ICE2"> Bezitter <input name="ICE2Bezit"> Verwantschap
<select>
<option>partner</option>
<option>vader</option>
<option>moeder</option>
<option>stiefvader</option>
<option>stiefmoeder</option>
<option>oma</option>
<option>opa</option>
<option>tante</option>
<option>nonkel</option>
<option>ander</option>
</select>
<img class="ICE2" src="http://www.plasticjungle.com/blog/wp-content/uploads/2012/04/PlusSign.png">
</p>
Wat loopt er mis?
Groeten,
Olivier
$(document).ready(function($) {
$(".ICE1plus").click(function() {
$('#ICE2').show();
$('img.ICE1plus').replaceWith('<img class="ICE1min" src="http://2.bp.blogspot.com/_cf7lGNU3J0A/S0NTp7x1fkI/AAAAAAAAAEs/i_wSmG3ZNBI/s1600-R/minus
%2520new%2520blk.jpg">');
})
});
$(document).ready(function($) {
$(".ICE1min").click(function() {
$('#ICE2').hide();
$('img.ICE1min').replaceWith('<img class="ICE1plus" src="http://www.plasticjungle.com/blog/wp-content/uploads/2012/04/PlusSign.png">');
})
});
</script>
<style type="text/css">
img{
height: 25px;
}
</style>
ICE<br />
<p id="ICE1" style="
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #888888;
border-radius: 7px 7px 7px 7px;
color: #222222;
padding: 3px 4px;
float: left;
margin: 0;
">
1) ICE <input name="ICE1"> Bezitter <input name="ICE1Bezit"> Verwantschap
<select>
<option>partner</option>
<option>vader</option>
<option>moeder</option>
<option>stiefvader</option>
<option>stiefmoeder</option>
<option>oma</option>
<option>opa</option>
<option>tante</option>
<option>nonkel</option>
<option>ander</option>
</select>
<img class="ICE1plus" src="http://www.plasticjungle.com/blog/wp-content/uploads/2012/04/PlusSign.png">
</p>
<p id="ICE2" style="clear: left;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #888888;
border-radius: 7px 7px 7px 7px;
color: #222222;
padding: 3px 4px;
display: none;
float: left;
margin: 0;
">
2) ICE <input name="ICE2"> Bezitter <input name="ICE2Bezit"> Verwantschap
<select>
<option>partner</option>
<option>vader</option>
<option>moeder</option>
<option>stiefvader</option>
<option>stiefmoeder</option>
<option>oma</option>
<option>opa</option>
<option>tante</option>
<option>nonkel</option>
<option>ander</option>
</select>
<img class="ICE2" src="http://www.plasticjungle.com/blog/wp-content/uploads/2012/04/PlusSign.png">
</p>
Wat loopt er mis?
Groeten,
Olivier