getElementById, Checkbox und AJAX Aufruf

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • 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:

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Unbenanntes Dokument</title>
    6. <script type="text/Javascript">
    8. <!--
    9. function sendRequest() {
    11. try
    12. {
    13. req = window.XMLHttpRequest?new XMLHttpRequest():
    14. new ActiveXObject("Microsoft.XMLHTTP");
    15. }
    17. catch (e)
    18. {
    19. //Kein AJAX Support
    20. }
    22. req.onreadystatechange = handleResponse;
    23. id = document.getElementById('item['+id+']').value;
    24. req.open('post', 'func.php?s='+ id);
    25. req.send(null);
    26. }
    28. function handleResponse() {
    29. if ((req.readyState == 4) && (req.status == 200))
    30. {
    31. document.getElementById('obst').innerHTML = req.responseText;
    32. }
    33. }
    35. //-->
    37. </script>
    38. </head>
    39. <body>
    40. <table width="100%" border="0" cellspacing="0" cellpadding="0">
    41. <form id="form1" name="form1" method="post" action="">
    42. <tr>
    43. <td width="20"><input type="checkbox" name="item[1]" id="item[1]" onclick="if(this.checked==true){sendRequest();}else{sendRequest2();}" /></td>
    44. <td>Apfel</td>
    45. </tr>
    46. <tr>
    47. <td width="20"><input type="checkbox" name="item[2]" id="item[2]" onclick="if(this.checked==true){sendRequest();}else{sendRequest2();}" /></td>
    48. <td>Birne</td>
    49. </tr>
    50. <tr>
    51. <td width="20"><input type="checkbox" name="item[3]" id="item[3]" onclick="if(this.checked==true){sendRequest();}else{sendRequest2();}" /></td>
    52. <td>Orange</td>
    53. </tr>
    54. </form>
    55. </table>
    56. <div id="obst"></div>
    57. </body>
    58. </html>
    Alles anzeigen


    Bitte um Hilfe

    MfG

    kingluui
    Man muss nicht wissen wie es geht, man muss nur wissen wo es steht! Natürlich bei easy-coding 8o de

  • 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:

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Unbenanntes Dokument</title>
    6. <script type="text/Javascript">
    8. <!--
    9. function sendRequest() {
    11. try
    12. {
    13. req = window.XMLHttpRequest?new XMLHttpRequest():
    14. new ActiveXObject("Microsoft.XMLHTTP");
    15. }
    17. catch (e)
    18. {
    19. //Kein AJAX Support
    20. }
    22. req.onreadystatechange = handleResponse;
    23. id = document.getElementById('item['+id+']').value;
    24. req.open('get', 'func.php?s='+ id);
    25. req.send(null);
    26. }
    28. function handleResponse() {
    29. if ((req.readyState == 4) && (req.status == 200))
    30. {
    31. document.getElementById('obst').innerHTML = req.responseText;
    32. }
    33. }
    35. //-->
    37. </script>
    38. </head>
    39. <body>
    40. <table width="100%" border="0" cellspacing="0" cellpadding="0">
    41. <form id="form1" name="form1" method="post" action="">
    42. <tr>
    43. <td width="20"><input name="item1" type="checkbox" id="item[1]" onclick="if(this.checked==true){sendRequest();}else{sendRequest2();}" value="1" /></td>
    44. <td>Apfel</td>
    45. </tr>
    46. <tr>
    47. <td width="20"><input name="item2" type="checkbox" id="item[2]" onclick="if(this.checked==true){sendRequest();}else{sendRequest2();}" value="2" /></td>
    48. <td>Birne</td>
    49. </tr>
    50. <tr>
    51. <td width="20"><input name="item3" type="checkbox" id="item[3]" onclick="if(this.checked==true){sendRequest();}else{sendRequest2();}" value="3" /></td>
    52. <td>Orange</td>
    53. </tr>
    54. </form>
    55. </table>
    56. <div id="obst"></div>
    57. </body>
    58. </html>
    Alles anzeigen


    Kannste was mit der Fehlermeldung anfangen?
    Man muss nicht wissen wie es geht, man muss nur wissen wo es steht! Natürlich bei easy-coding 8o de