Javascript en php?
Ik heb een invulform gemaakt en zag op een andere website dat als je dan de PC invult hij zelf de straat aanvult, als je het veld uit tapt.
Via een php script kan ik de PC omzetten naar een straat.
Is het ook mogelijk om tijdens het invullen van de velden de waardes van een veld door het PHP script te laten afhandelen zodat ik in het veld 'woonplaats' de woonplaats kan laten echo'en?
Groet,
Dennis
dan moet je met ajax / jquery gaan werken.
Oké, kan ik ergens een voorbeeldje vinden van hoe met ajax / jquery om te gaan is?
@wouter Ik veronderstel dat deze meneer weinig? Ervaring heeft met JavaScript en jquery. Voor dat soort mensen staat het op w3schools veel simpeler uitgelegd.
Ik heb het allemaal geleerd met de documentatie van jquery zelf, daar staan ook voorbeelden en alles is uitgelegd
Vandaar daar ik hier hoop wat aanknopingspunten te vinden.
Bedankt voor de reactie, maar denk niet dat ik er uit kom.
Gewijzigd op 08/07/2011 11:08:02 door Dennis van Dijk
geeft ook geen response. (in jouw code)
dit werkt gewoon goed:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Type something and then click or tab out of the input.</p>
<input type="text" id="test" value="type something" />
<script>
$('input').bind('blur', function() {
$(this).val(function(i, val) {
return val.toUpperCase();
}
);
});
</script>
</body>
</html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Type something and then click or tab out of the input.</p>
<input type="text" id="test" value="type something" />
<script>
$('input').bind('blur', function() {
$(this).val(function(i, val) {
return val.toUpperCase();
}
);
});
</script>
</body>
</html>
Met google kom ik ook niet ver en heel simple veld met focusout krijg ik zelfs al niet werkend :-(
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
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
$("#T1").blur(function(){
alert('TEST!');
}
});
</script>
<p><input type="text" id="T1" name="T1" size="20"></p>
</body>
</html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
$("#T1").blur(function(){
alert('TEST!');
}
});
</script>
<p><input type="text" id="T1" name="T1" size="20"></p>
</body>
</html>
Graag in het vervolg bij code, [code] [/code] tags gebruiken. [/modedit]
Gewijzigd op 09/07/2011 00:46:05 door Bas IJzelendoorn
kijk eens wat de error console zegt (in chrome [ctrl]+[shift]+[j])
$("#T1").blur(function() {
alert('TEST!');
}
});
Hierbij zie je dat het rode haakje (of hoe dat heet) nergens wordt geopend, deze moet je dus weghalen.
En zou je graag voortaan [code] tags om je code willen zetten? Ik heb het hier niet gedaan omdat ik nu even met kleurtjes het wou duidelijk maken.
Gewijzigd op 08/07/2011 13:55:01 door Wouter J
Blur en focusout zijn verschillend (zie documentatie). Kijk ook bij het voorbeeld op de focusout pagina. Blur wordt niet altijd aangeroepen als je uit een veld gaat.
Wouter J op 08/07/2011 13:54:50:
Hierbij zie je dat het rode haakje (of hoe dat heet) nergens wordt geopend, deze moet je dus weghalen.
Hierbij zie je dat het rode haakje (of hoe dat heet) nergens wordt geopend, deze moet je dus weghalen.
Die heten in het Nederlands gewoon accolades en in het Engels curly braces.
Focus out en load url werkt.
Komt een alert en zie dat er een andere waarde in field 2 komt. Maar kan de ingelezen PHP pagina niet koppelen aan de value van het field. Kan alleen het result van test.php weergeven in de DIV.
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
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<input id="target" type="text" value="Field 1" />
<input id="woonplaats" type="text" value="Field 2" />
</form>
<script>
$('#target').focusout(function() {
alert('test');
$('#a').load('test.php');
$("#woonplaats").val('hier een variable uit de aangeroepen PHP pagina');
});
</script>
<div id="a" style="background-color:blue;">
Zomaar tekst
</div>
</body>
</html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<input id="target" type="text" value="Field 1" />
<input id="woonplaats" type="text" value="Field 2" />
</form>
<script>
$('#target').focusout(function() {
alert('test');
$('#a').load('test.php');
$("#woonplaats").val('hier een variable uit de aangeroepen PHP pagina');
});
</script>
<div id="a" style="background-color:blue;">
Zomaar tekst
</div>
</body>
</html>
In het scriptje, gebruik je vervolgens PHP. Dus waar op dit moment 'hier een variabele uit de aangeroepen PHP pagina' staat, zet je dan:
Op die manier combineer je javascript met PHP.
Bas Kreleger op 09/07/2011 02:10:40:
Ja precies, maar dat lukt dus niet.
Ik heb in de test.php pagina staan
En het script
Code (php)
hallo wordt wel netje weergegeven bij de focusout net als de alert, maar op de variable uit test.php worden niet overgenomen.
Het laten echo'n van de waarde werkt sowieso niet.
geeft een leeg field 2 terwijl
wel een waarde geeft in field 2
De volgende keer moet je even naar de broncode kijken, dan zul je het wel zien
Gewijzigd op 09/07/2011 10:09:54 door Vincent Huisman
Vincent Huisman op 09/07/2011 10:09:15:
De volgende keer moet je even naar de broncode kijken, dan zul je het wel zien
De volgende keer moet je even naar de broncode kijken, dan zul je het wel zien
Thx en had het nog in een index.html staan, moet dan natuurlijk ook php worden..
MAAR
als ik
gebruik voor de variable werkt het script nietmeer
Het werkt wel als ik het op deze manier laat echo'n, beetje vreemd
Maar dan krijg ik weer een andere foutmelding met de variable
bron:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script>
$('#target').focusout(function() {
alert('test');
$('this').load('test.php');
<br />
<b>Notice</b>: Undefined variable: adres in <b>/postcode/index.php</b> on line <b>18</b><br />
$("#woonplaats").val("");});
</script>
$('#target').focusout(function() {
alert('test');
$('this').load('test.php');
<br />
<b>Notice</b>: Undefined variable: adres in <b>/postcode/index.php</b> on line <b>18</b><br />
$("#woonplaats").val("");});
</script>
Het script moet de variable natuurlijk pas aanroepen en invullen na de focusout, zou dat mij met de input van field 1 en zijn waarde test.php kan laten uitvoeren.
Toevoeging op 09/07/2011 12:57:06:
Ik heb het nu werkend, of het netjes is weet ik niet.
Thx voor de tips en antwoorden.
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
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
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<input id="target" type="text" value="Field 1" />
<input id="woonplaats" type="text" value="Field 2" />
</form>
<script>
$('#target').focusout(function() {
var postcode = $("#target").val();
$.ajax({
url: 'pc.php?postcode='+postcode,
type: 'POST',
data: '',
success: function(result3) {
$("#woonplaats").val(result3);
}
});
});
</script>
</body>
</html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<input id="target" type="text" value="Field 1" />
<input id="woonplaats" type="text" value="Field 2" />
</form>
<script>
$('#target').focusout(function() {
var postcode = $("#target").val();
$.ajax({
url: 'pc.php?postcode='+postcode,
type: 'POST',
data: '',
success: function(result3) {
$("#woonplaats").val(result3);
}
});
});
</script>
</body>
</html>
Gewijzigd op 09/07/2011 13:12:49 door Dennis van Dijk
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
<script>
$('#target').focusout(function() {
var postcode = $("#target").val();
$.ajax({
url: 'pc3.php?postcode='+postcode,
type: 'POST',
data: '',
success: function(result3) {
var dataAlsString = result3;
var dataAlsArray = new Array();
dataAlsArray = dataAlsString.split(',');
$("#woonplaats").val(dataAlsArray[0]);
$("#adres").val(dataAlsArray[1]);
}
});
});
</script>
$('#target').focusout(function() {
var postcode = $("#target").val();
$.ajax({
url: 'pc3.php?postcode='+postcode,
type: 'POST',
data: '',
success: function(result3) {
var dataAlsString = result3;
var dataAlsArray = new Array();
dataAlsArray = dataAlsString.split(',');
$("#woonplaats").val(dataAlsArray[0]);
$("#adres").val(dataAlsArray[1]);
}
});
});
</script>
Maar dat komt omdat ik het niet voor elkaar krijg de variable $variable uit te lezen die in pc3.php staan.
Of ik zet er er verkeerd in, of ik moet ze op een andere manier uitlezen.
Iemand een voorbeeldje daarvan?
Dennis
json_encode. Geef daar je array aan mee en echo de JSON string.
Waar gaat het precies fout? Heb je met Firebug in Firefox gekeken of de request aan komt en of het een resultaat teruggeeft? Als je "console.log(result3);" doet in de success function dan kan je in het "Console" tabblad van Firebug zien welk resultaat je terugkrijgt. Kortom, ga eens debuggen en kijk waar het exact fout gaat.
Kijk eens naar Waar gaat het precies fout? Heb je met Firebug in Firefox gekeken of de request aan komt en of het een resultaat teruggeeft? Als je "console.log(result3);" doet in de success function dan kan je in het "Console" tabblad van Firebug zien welk resultaat je terugkrijgt. Kortom, ga eens debuggen en kijk waar het exact fout gaat.