getElementById, Checkbox und AJAX Aufruf

kingluui

Intermediate

Posts: 81

Friday, May 16th 2008, 11:49pm

getElementById, Checkbox und AJAX Aufruf

Hallo liebe gemeinde,

ich habe da ein kleines Problem, wie das Script unten zeigt möchte ich z.B. eine von drei checkboxen anklicken, z.b. wenn ich die zweite checkbox abhake soll eine ajax aktion quasi die ID zwei für Birne in eine Datenbank eintragen (Warenkorbfunktion sozusagen). Wie kann ich das oben im JS Teil ändern, dass es funktioniert, ich schätze mal bei Zeile 23 id = document.getElementById('item['+id+']').value; stimmt was nicht:

Source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Unbenanntes Dokument</title> 
<script type="text/Javascript"> 

<!-- 
function sendRequest() { 

try 
{ 
req = window.XMLHttpRequest?new XMLHttpRequest(): 
new ActiveXObject("Microsoft.XMLHTTP"); 
} 

catch (e) 
{ 
//Kein AJAX Support 
} 

req.onreadystatechange = handleResponse; 
id = document.getElementById('item['+id+']').value; 
req.open('post', 'func.php?s='+ id); 
req.send(null); 
} 

function handleResponse() { 
if ((req.readyState == 4) && (req.status == 200)) 
{ 
document.getElementById('obst').innerHTML = req.responseText; 
} 
} 

//--> 

</script> 
</head> 
<body> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<form id="form1" name="form1" method="post" action=""> 
<tr> 
<td width="20"><input type="checkbox" name="item[1]" id="item[1]" onclick="if(this.checked==true){sendRequest();}else{sendRequest2();}" /></td> 
<td>Apfel</td> 
</tr> 
<tr> 
<td width="20"><input type="checkbox" name="item[2]" id="item[2]" onclick="if(this.checked==true){sendRequest();}else{sendRequest2();}" /></td> 
<td>Birne</td> 
</tr> 
<tr> 
<td width="20"><input type="checkbox" name="item[3]" id="item[3]" onclick="if(this.checked==true){sendRequest();}else{sendRequest2();}" /></td> 
<td>Orange</td> 
</tr> 
</form> 
</table> 
<div id="obst"></div> 
</body> 
</html>

Bitte um Hilfe

MfG

kingluui

Torben Brodt

Administrator

Posts: 8,454

Saturday, May 17th 2008, 12:34am

Die checkbox hat doch gar kein Value?

ansonsten nur ein tipp

	JavaScript Code
1 2 3	function foo(ob) { alert(ob.checked); }

	HTML Code
1	<input type="checkbox" onclick="foo(this)" />

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

kingluui

Intermediate

Posts: 81

Saturday, May 17th 2008, 2:16pm

Danke für Deine schnelle Antwort,

habe den checkboxen nun values gegeben, das ist ja auch das mindeste was die brauchen *grml* und auch Deine Tipps beherzigt, aber die Funktion wird doch onclick aufgerufen if(this.checked==true){sendRequest();}.

Die Fehlermeldung vom Browser lautet:

'id' ist undefiniert Hier nochmal die aktuelle Version:

Source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Unbenanntes Dokument</title> 
<script type="text/Javascript"> 

<!-- 
function sendRequest() { 

try 
{ 
req = window.XMLHttpRequest?new XMLHttpRequest(): 
new ActiveXObject("Microsoft.XMLHTTP"); 
} 

catch (e) 
{ 
//Kein AJAX Support 
} 

req.onreadystatechange = handleResponse; 
id = document.getElementById('item['+id+']').value; 
req.open('get', 'func.php?s='+ id); 
req.send(null); 
} 

function handleResponse() { 
if ((req.readyState == 4) && (req.status == 200)) 
{ 
document.getElementById('obst').innerHTML = req.responseText; 
} 
} 

//--> 

</script> 
</head> 
<body> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<form id="form1" name="form1" method="post" action=""> 
<tr> 
<td width="20"><input name="item1" type="checkbox" id="item[1]" onclick="if(this.checked==true){sendRequest();}else{sendRequest2();}" value="1" /></td> 
<td>Apfel</td> 
</tr> 
<tr> 
<td width="20"><input name="item2" type="checkbox" id="item[2]" onclick="if(this.checked==true){sendRequest();}else{sendRequest2();}" value="2" /></td> 
<td>Birne</td> 
</tr> 
<tr> 
<td width="20"><input name="item3" type="checkbox" id="item[3]" onclick="if(this.checked==true){sendRequest();}else{sendRequest2();}" value="3" /></td> 
<td>Orange</td> 
</tr> 
</form> 
</table> 
<div id="obst"></div> 
</body> 
</html>

Kannste was mit der Fehlermeldung anfangen?