AJAX: responseText --> input
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function calculate_multiply(field_return, number, price)
{
var xmlhttp;
var url = "calculate.php";
url = url+"?aantal="+number;
url = url+"?prijs="+price;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.form.totaal_8_6_4.value = xmlhttp.responseText;
//document.getElementByName(field_return).value=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
{
var xmlhttp;
var url = "calculate.php";
url = url+"?aantal="+number;
url = url+"?prijs="+price;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.form.totaal_8_6_4.value = xmlhttp.responseText;
//document.getElementByName(field_return).value=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
Met document.form.totaal_8_6_4.value = xmlhttp.responseText; wordt de uitkomst in het veld met de naam totaal_8_6_4 gezet. (<input id="text" name="totaal_8_6_4" size="7" value=""></input>) Echter bestaat dit form uit een aantal rijen met meerdere totaal-velden (bijv. totaal_8_6_5, totaal_8_6_6, etc.)
Daarom geeft ik een var field_return (input-field waarin de uitkomst moet komen) mee aan de functie zodat de uitkomst altijd in het juiste veld komt. Ik dacht dat op de volgende manier te kunnen doen:
document.form.field_return.value = xmlhttp.responseText;
Helaas werkt dit niet!
Daarom ook maar het volgende geprobeerd:
document.getElementByName(field_return).value=xmlhttp.responseText;
Ook dit werkt niet.
Is hetgeen ik wil uberhaupt wel mogelijk en zo ja, hoe?
Toevoeging op 03/02/2011 10:23:55:
Niemand een idee???
Gewijzigd op 03/02/2011 07:31:56 door Henk Jacobse
Je geeft dan een object mee waarin je zowel de waarde als het veld mee geeft, eventueel kan je meerdere waarden tegelijk doorsturen.
Interesse?
Zou je een voorbeeld kunnen geven?
index.php
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
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
<html>
<head>
<script>
function calculate_multiply(field_return, number, price)
{
var xmlhttp;
var url = "calculate.php?aantal=" + number +"&prijs=" + price +"&field_return=" + field_return;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var response = xmlhttp.responseText.toString();
var responseObject = eval('(' + response + ')');
document.getElementById(responseObject.field_return).value = responseObject.value;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form name="form">
<div><input id="totaal_8_6_4"> <span onclick="calculate_multiply('totaal_8_6_4', 'number', 'price')">klik</span> </div>
<div><input id="totaal_8_6_5"> <span onclick="calculate_multiply('totaal_8_6_5', 'number', 'price')">klik</span> </div>
<div><input id="totaal_8_6_6"> <span onclick="calculate_multiply('totaal_8_6_6', 'number', 'price')">klik</span> </div>
<div><input id="totaal_8_6_7"> <span onclick="calculate_multiply('totaal_8_6_7', 'number', 'price')">klik</span> </div>
</form>
</body>
</html>
<head>
<script>
function calculate_multiply(field_return, number, price)
{
var xmlhttp;
var url = "calculate.php?aantal=" + number +"&prijs=" + price +"&field_return=" + field_return;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var response = xmlhttp.responseText.toString();
var responseObject = eval('(' + response + ')');
document.getElementById(responseObject.field_return).value = responseObject.value;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form name="form">
<div><input id="totaal_8_6_4"> <span onclick="calculate_multiply('totaal_8_6_4', 'number', 'price')">klik</span> </div>
<div><input id="totaal_8_6_5"> <span onclick="calculate_multiply('totaal_8_6_5', 'number', 'price')">klik</span> </div>
<div><input id="totaal_8_6_6"> <span onclick="calculate_multiply('totaal_8_6_6', 'number', 'price')">klik</span> </div>
<div><input id="totaal_8_6_7"> <span onclick="calculate_multiply('totaal_8_6_7', 'number', 'price')">klik</span> </div>
</form>
</body>
</html>
calculate.php
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
$value = 'Hello World!'; // of uiteraard iets nuttiger
$waarde = new stdClass();
$waarde->field_return = $_GET['field_return'];
$waarde->value = $value;
echo json_encode($waarde);
?>
$value = 'Hello World!'; // of uiteraard iets nuttiger
$waarde = new stdClass();
$waarde->field_return = $_GET['field_return'];
$waarde->value = $value;
echo json_encode($waarde);
?>
Nu, wat je precies probeert te doen, weet ik niet.
Hoe je calculate_multiply() aanroept, weet ik ook niet.
ik had overigens het volgende:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div>
<input id="text" name="number_8_6_4" size="7" value="" onchange="calculate_multiply('totaal_8_6_4', this.value, '5.1')"></input>
<input id="text" name="prijs_8_6_4" size="7" value=""></input>
<input id="text" name="totaal_8_6_4" size="7" value=""></input>
<div>
<div>
<input id="text" name="number_8_6_5" size="7" value="" onchange="calculate_multiply('totaal_8_6_5', this.value, '2.6')"></input>
<input id="text" name="prijs_8_6_5" size="7" value=""></input>
<input id="text" name="totaal_8_6_5" size="7" value=""></input>
<div>
<input id="text" name="number_8_6_4" size="7" value="" onchange="calculate_multiply('totaal_8_6_4', this.value, '5.1')"></input>
<input id="text" name="prijs_8_6_4" size="7" value=""></input>
<input id="text" name="totaal_8_6_4" size="7" value=""></input>
<div>
<div>
<input id="text" name="number_8_6_5" size="7" value="" onchange="calculate_multiply('totaal_8_6_5', this.value, '2.6')"></input>
<input id="text" name="prijs_8_6_5" size="7" value=""></input>
<input id="text" name="totaal_8_6_5" size="7" value=""></input>
<div>
Effe kijken of ie hiermee ook werkt
Gewijzigd op 03/02/2011 13:58:38 door Henk Jacobse
Die meerdere id="text" mag niet. id hoort uniek te zijn. Daarom is het ook een id
Ik heb nu het volgende:
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
function calculate_multiply(field_return, number, price)
{
var url = "calculate.php?aantal=" + number +"&prijs=" + price +"&field_return=" + field_return;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var response = xmlhttp.responseText.toString();
alert(response);
var responseObject = eval('(' + response + ')');
document.getElementById(responseObject.field_return).value = responseObject.value;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
{
var url = "calculate.php?aantal=" + number +"&prijs=" + price +"&field_return=" + field_return;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var response = xmlhttp.responseText.toString();
alert(response);
var responseObject = eval('(' + response + ')');
document.getElementById(responseObject.field_return).value = responseObject.value;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
De alert(response); laat nu de berekende waarde zien alleen wordt het nergens getoond.
Toon ook eens je formulier en calculate.php
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script>
function calculate_multiply(field_return, number, price)
{
var xmlhttp;
var url = "calculate.php?aantal=" + number +"&prijs=" + price +"&field_return=" + field_return;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var response = xmlhttp.responseText.toString();
alert("Response = "+response);
var responseObject = eval('(' + response + ')');
document.getElementById(responseObject.field_return).value = responseObject.value;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form name="form" method="post" action="" enctype="multipart/form-data" accept-charset="UTF8">
<div>
<input id="aantal_8_6_4" name="aantal_8_6_4" size="7" value="" onchange="calculate_multiply('totaal_8_6_4', this.value, '5.2')" /></input>
x
<input id="bedrag_8_6_4" name="bedrag_8_6_4" size="7" value=""></input>
=
<input id="totaal_8_6_4" name="totaal_8_6_4" size="7" value=""></input>
</div>
<div>
<input id="aantal_8_6_5" name="aantal_8_6_5" size="7" value="" onchange="calculate_multiply('totaal_8_6_5', this.value, '1.3')" /></input>
x
<input id="bedrag_8_6_5" name="bedrag_8_6_5" size="7" value=""></input>
=
<input id="totaal_8_6_5" name="totaal_8_6_5" size="7" value=""></input>
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script>
function calculate_multiply(field_return, number, price)
{
var xmlhttp;
var url = "calculate.php?aantal=" + number +"&prijs=" + price +"&field_return=" + field_return;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var response = xmlhttp.responseText.toString();
alert("Response = "+response);
var responseObject = eval('(' + response + ')');
document.getElementById(responseObject.field_return).value = responseObject.value;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form name="form" method="post" action="" enctype="multipart/form-data" accept-charset="UTF8">
<div>
<input id="aantal_8_6_4" name="aantal_8_6_4" size="7" value="" onchange="calculate_multiply('totaal_8_6_4', this.value, '5.2')" /></input>
x
<input id="bedrag_8_6_4" name="bedrag_8_6_4" size="7" value=""></input>
=
<input id="totaal_8_6_4" name="totaal_8_6_4" size="7" value=""></input>
</div>
<div>
<input id="aantal_8_6_5" name="aantal_8_6_5" size="7" value="" onchange="calculate_multiply('totaal_8_6_5', this.value, '1.3')" /></input>
x
<input id="bedrag_8_6_5" name="bedrag_8_6_5" size="7" value=""></input>
=
<input id="totaal_8_6_5" name="totaal_8_6_5" size="7" value=""></input>
</div>
</form>
</body>
</html>
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?php
$value = 5;
//$_GET['aantal'] * $_GET['prijs'];
$waarde = new stdClass();
$waarde->field_return = $_GET['field_return'];
$waarde->value = $value;
echo json_encode($waarde);
?>
$value = 5;
//$_GET['aantal'] * $_GET['prijs'];
$waarde = new stdClass();
$waarde->field_return = $_GET['field_return'];
$waarde->value = $value;
echo json_encode($waarde);
?>
Toevoeging op 03/02/2011 15:15:57:
Nu krijg ik ook geen waarden meer terug in de alert ... pfff
Het gaat om een soort van winkelkarretje, ja?
Dan zullen we het een beetje anders moeten aanpakken.
Om te beginnen, javascript is zelf bekwaam om dit te kunnen uitrekenen. Ajax is hier niet nodig (tenzij er nog iets extra moet gebeuren op de server).
Nu heb je een functie met drie parameters. Je vult de prijs in in de onchange. De bedoeling zal wel zijn dat die waarde uit de tweede input komt, ja?
index.php
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<form name="form" method="post" action="" enctype="multipart/form-data" accept-charset="UTF8">
<div id="_8_6_4" class="article_row">
<input name="aantal_8_6_4" class="aantal" size="7" value="" />
x
<input name="bedrag_8_6_4" class="bedrag" size="7" value="" />
=
<input name="totaal_8_6_4" class="totaal" size="7" value="" />
</div>
<div id="_8_6_5" class="article_row">
<input name="aantal_8_6_5" class="aantal" size="7" value="" />
x
<input name="bedrag_8_6_5" class="bedrag" size="7" value="" />
=
<input name="totaal_8_6_5" class="totaal" size="7" value="" />
</div>
<div id="_8_6_6" class="article_row">
<input name="aantal_8_6_6" class="aantal" size="7" value="" />
x
<input name="bedrag_8_6_6" class="bedrag" size="7" value="" />
=
<input name="totaal_8_6_6" class="totaal" size="7" value="" />
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<form name="form" method="post" action="" enctype="multipart/form-data" accept-charset="UTF8">
<div id="_8_6_4" class="article_row">
<input name="aantal_8_6_4" class="aantal" size="7" value="" />
x
<input name="bedrag_8_6_4" class="bedrag" size="7" value="" />
=
<input name="totaal_8_6_4" class="totaal" size="7" value="" />
</div>
<div id="_8_6_5" class="article_row">
<input name="aantal_8_6_5" class="aantal" size="7" value="" />
x
<input name="bedrag_8_6_5" class="bedrag" size="7" value="" />
=
<input name="totaal_8_6_5" class="totaal" size="7" value="" />
</div>
<div id="_8_6_6" class="article_row">
<input name="aantal_8_6_6" class="aantal" size="7" value="" />
x
<input name="bedrag_8_6_6" class="bedrag" size="7" value="" />
=
<input name="totaal_8_6_6" class="totaal" size="7" value="" />
</div>
</form>
</body>
</html>
js.js
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
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
$(document).ready(function (e) {
$('.article_row .aantal, .article_row .bedrag').change(input_changed);
});
function input_changed (e) {
// try to find the row where the input was changed.
// first try if the input was a "aantal"
var selected_row = $('.article_row .aantal').index(e.target);
// if not, try if the input was a "bedrag"
if (selected_row == -1) {
selected_row =$('.article_row .bedrag').index(e.target);
}
// now we know the affected row, we will check the values of "aantal" & "bedrag"
var aantal = $($('.article_row .aantal')[selected_row]).val();
var bedrag = $($('.article_row .bedrag')[selected_row]).val();
// check if both values are numerical
if ( Number(aantal) && Number(bedrag) ) {
var id = $('.article_row')[selected_row].id;
// alert(id);
var url = "calculate.php"
+"?aantal=" + Number(aantal)
+"&bedrag=" + Number(bedrag)
+"&id=" + escape(id)
+"&selected_row=" + Number(selected_row)
;
// Ajax request
$.ajax({
type: "GET",
url: url,
dataType: "json",
success: calculated
});
/**
// MERK OP: ZONDER AJAX LUKT HET OOK.
$($('.article_row .totaal')[selected_row]).val( Number(aantal) * Number(bedrag) );
*/
}
else {
// if needed, handle non-numerical data
}
}
function calculated (data) {
var selected_row = data.selected_row;
$($('.article_row .totaal')[selected_row]).val(data.totaal);
}
$('.article_row .aantal, .article_row .bedrag').change(input_changed);
});
function input_changed (e) {
// try to find the row where the input was changed.
// first try if the input was a "aantal"
var selected_row = $('.article_row .aantal').index(e.target);
// if not, try if the input was a "bedrag"
if (selected_row == -1) {
selected_row =$('.article_row .bedrag').index(e.target);
}
// now we know the affected row, we will check the values of "aantal" & "bedrag"
var aantal = $($('.article_row .aantal')[selected_row]).val();
var bedrag = $($('.article_row .bedrag')[selected_row]).val();
// check if both values are numerical
if ( Number(aantal) && Number(bedrag) ) {
var id = $('.article_row')[selected_row].id;
// alert(id);
var url = "calculate.php"
+"?aantal=" + Number(aantal)
+"&bedrag=" + Number(bedrag)
+"&id=" + escape(id)
+"&selected_row=" + Number(selected_row)
;
// Ajax request
$.ajax({
type: "GET",
url: url,
dataType: "json",
success: calculated
});
/**
// MERK OP: ZONDER AJAX LUKT HET OOK.
$($('.article_row .totaal')[selected_row]).val( Number(aantal) * Number(bedrag) );
*/
}
else {
// if needed, handle non-numerical data
}
}
function calculated (data) {
var selected_row = data.selected_row;
$($('.article_row .totaal')[selected_row]).val(data.totaal);
}
calculate.php
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?php
$waarde = new stdClass();
$waarde->selected_row = (int) $_GET['selected_row'];
$waarde->id = $_GET['id']; // eventueel doe je hier iets mee
$waarde->totaal = (int) $_GET['aantal'] * (float) $_GET['bedrag'];
echo json_encode($waarde);
?>
$waarde = new stdClass();
$waarde->selected_row = (int) $_GET['selected_row'];
$waarde->id = $_GET['id']; // eventueel doe je hier iets mee
$waarde->totaal = (int) $_GET['aantal'] * (float) $_GET['bedrag'];
echo json_encode($waarde);
?>
Je weet hoe je jQuery kan toevoegen?
Eventueel gehost door Google: klik
Kan je daar mee weg?
Gewijzigd op 04/02/2011 07:40:04 door Henk Jacobse
Ofwel download je jquery en sla je die op als jquery.js
ofwel vervang je op lijn 5 "jquery.js" door "//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"
Indien ik het zonder de ajax-code doet werkt het alleen lijkt het erop dat de ajax code (ik vermoedt json) niet werkt. Enig idee hoe we dit oplossen?
Gewijzigd op 04/02/2011 10:37:14 door Henk Jacobse
Nog even een vraagje: ik zou nu bij <input name="totaal_8_6_4" class="totaal" size="7" value="" /> willen veranderen in een div of span. En deze vullen met de som uit de velden aantal en bedrag.
Hoe gaat dat in zijn werk?