title: Refresh SPAN content automatically
body: <p>I'm stuck in a problem here that I tried all google answers and nothing did this work out. Specially because I prefer to do a pure JavaScript solution if possible... I have a menu, with a cart. This menu shows something like: Your cart (0)
  where 0 is the number of items inside the cart. The items number are query from a SQL table 'cart', where I save all users products added to cart. So they don't lose the items on cart when the session closes. But I want to update this menu span everytime they add something inside the cart, without the need to refresh the page. The items are being added this way:</p>
  
  <p>In the table where products are displayed I have:</p>
  
  <pre><code>&lt;td id="add'.htmlspecialchars($row['id'], ENT_QUOTES, 'UTF-8').'"&gt; &lt;label&gt;&lt;a href="javascript:addtocart('.htmlspecialchars($row['id'], ENT_QUOTES, 'UTF-8').')"&gt;&lt;b&gt;&lt;img src="/img/cart.gif" /&gt;&lt;/b&gt;&lt;/a&gt;&lt;/label&gt; &lt;/td&gt;
  </code></pre>
  
  <p>so I call javascript:addtocart passing 'id' of the product as parameter. This function does:</p>
  
  <pre><code>function addtocart(id)
  {
      document.getElementById('add'+id).innerHTML='&lt;b&gt;On your cart!&lt;/b&gt;';
      load('/index.php?addtocart&amp;id='+id);
  }
  </code></pre>
  
  <p>Ok, function load does:</p>
  
  <pre><code>function load(url) {
  var xmlhttp;
  
  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 &amp;&amp; xmlhttp.status == 200) {
          eval( xmlhttp.responseText );
      }
  }
  
  xmlhttp.open('GET', url, true);
  xmlhttp.send();
  }
  </code></pre>
  
  <p>OK, so we have my index.php receiving the GET with id of the product to add to cart, and I do on index.php:</p>
  
  <pre><code>if (isset($_GET['addtocart']) &amp;&amp; isset($_GET['id']))
  {
      $id = mysql_real_escape_string($_GET['id']);
      mysql_query("INSERT INTO cart VALUES('$id', '$userid')");           
  }
  </code></pre>
  
  <p>This is working very well, and if I refresh the page, in the menu I get "Your cart (1)"... But how to do this refresh automatically when the client clicks on the table? Possible with pure javascript function?</p>
  
  <p>//EDIT for index.php content:</p>
  
  <pre><code>&lt;?php
      include("./includes/header.php");
      include("./includes/db.php");
  ?&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="./css/style.css"&gt;
      &lt;title&gt;MyShop&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
  
      function load(url) {
      var xmlhttp;
  
      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 &amp;&amp; xmlhttp.status == 200) {
             document.getElementById('cart').innerHTML = xmlhttp.responseText;
          }
      }
  
      xmlhttp.open('GET', url, true);
      xmlhttp.send();
      }
  
      function addtocart(id)
      {
          document.getElementById('add'+id).innerHTML='&lt;b&gt;On your cart!&lt;/b&gt;';
          load('/index.php?addtocart&amp;id='+id);
      }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body id="home"&gt;
      &lt;?php include 'menu.php'; ?&gt;
      &lt;div id="container"&gt;
          &lt;?php 
              if (isset($_GET['news']))
              {
                  include 'news.php';         
              }
              else if (isset($_GET['orders']))
              {
                  include 'orders.php';           
              }
              else if (isset($_GET['addtocart']) &amp;&amp; isset($_GET['id']))
              {
                  $id = mysql_real_escape_string($_GET['id']);
                  mysql_query("INSERT INTO cart VALUES('$id', '$userid')");           
              }
          ?&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>