title: Update several elements via Ajax from PHP array result
body: <p>I am trying to generate some invoices based on user's input (date selection). That is something like this:</p>
  
  <ol>
  <li><p>The <code>invoice.php</code> file would let the user select a date from a form, and based on that selection the contents of the invoice (like amount, customer, etc.) on that same page  would be updated through Ajax.</p></li>
  <li><p>The <code>ajaxInvoice.php</code> would generate a MySQL query and in the end create an array with the corresponding table row based on date selection and merchant (unique row).</p></li>
  </ol>
  
  <hr>
  
  <p><code>invoice.php</code></p>
  
  <pre><code>...
  
  &lt;body&gt;
  
  &lt;script language="javascript" type="text/javascript"&gt;
  &lt;!-- 
  //Browser Support Code
  function ajaxFunction(){
      var ajaxRequest;
  
      try{
          // Opera 8.0+, Firefox, Safari
          ajaxRequest = new XMLHttpRequest();
      } catch (e){
          // Internet Explorer Browsers
          try{
              ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
          } catch (e) {
              try{
                  ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
              } catch (e){
                  // Something went wrong
                  alert("Your browser broke!");
                  return false;
              }
          }
      }
      // Create a function that will receive data sent from the server
      ajaxRequest.onreadystatechange = function(){
          if(ajaxRequest.readyState == 4){
              var ajaxDisplay = document.getElementById('field_1');
              ajaxDisplay.innerHTML = ajaxRequest.responseText;
          }
      }
      var date = document.getElementById('date').value;
      var merchant = document.getElementById('merchant').value;
      var queryString = "?date=" + date + "&amp;merchant=" + merchant;
      ajaxRequest.open("GET", "ajaxInvoice.php" + queryString, true);
      ajaxRequest.send(null); 
  }
  
  //--&gt;
  &lt;/script&gt;
  
  ...
  
  &lt;form name="invoiceDate"&gt;
  &lt;input type="hidden" id="merchant" value="&lt;?php echo $merchant; ?&gt;" /&gt;
  Date: &lt;select id="date"&gt;
  &lt;option&gt;2013-07-23&lt;/option&gt;
  &lt;option&gt;2013-07-25&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="button" onclick="ajaxFunction()" value="Select Date" /&gt;
  &lt;/form&gt;
  
  ...
  
  &lt;div id="field_1"&gt;FIELD 1&lt;/div&gt;
  
  ...
  
  &lt;div id="field_2"&gt;FIELD 2&lt;/div&gt;
  
  ...
  
  &lt;div id="field_3"&gt;FIELD 3&lt;/div&gt;
  
  ...
  </code></pre>
  
  <hr>
  
  <p><code>ajaxInvoice.php</code></p>
  
  <pre><code>include_once('includes/db.php');
  
  $merchant = $_GET['merchant'];
  $date = $_GET['date'];
  
  $merchant = mysql_real_escape_string($merchant);
  $date = mysql_real_escape_string($date);
  
  $query = "SELECT * FROM settlements WHERE datePayment = '$date' AND merchant = '$merchant'";
  $result = mysql_query($query) or die(mysql_error());
  
  $array = array();
  
  while($row = mysql_fetch_assoc($result)) {
      $array[] = $row;
  }
  </code></pre>
  
  <hr>
  
  <p>I was wondering if I could have access to that array this way:</p>
  
  <pre><code>echo $array[0]['fieldName'];
  </code></pre>
  
  <p>and update selected elements on the page based on different row fields. Not sure if <code>getElementById</code> or <code>getElementByName</code> should be used. </p>
  
  <p>My question would be how to actually access the php array within the script part and also within the rest of the page, so that I can update the various div elements with the corresponding data obtained from the DB query after the user selects the date from the form.</p>
  
  <p>In fact, if <em>only</em> one div has to be updated, the code works just fine, but I don't know how to extend the logic to update more than one div.</p>
  
  <p>Any help or hints on the syntax or code logic would be greatly appreciated.</p>
  
  <p>Thank you very much in advance!</p>