title: Using this Facebook style Lightbox - request AJAX - overlay with multiple buttons on a page
body: <p>I'm using the following light-box overlay by David Walsh to create an overlay that comes off a click function for multiple buttons on the page.  </p>
  
  <p><a href="http://davidwalsh.name/facebook-lightbox" rel="nofollow">http://davidwalsh.name/facebook-lightbox</a></p>
  
  <p>The problem I have is that this code is built for having one input id per page that calls it.  I need to make it so when multiple buttons are created in a php while loop, then it creates both a hidden input field with the object id of that while loop and a button input field that calls the javascript.  </p>
  
  <p>This is the type of form objects I would like to create in each time through the while loop:</p>
  
  <pre><code>&lt;input type="hidden" id="personName" value="postToAjax" /&gt; 
  &lt;input type="button" value="Add a new person" id="add" class="submit" /&gt;
  </code></pre>
  
  <p>Here is the Javascript that it calls: </p>
  
  <pre><code>&lt;script&gt;
      window.addEvent('domready',function(){
  
          document.id('add').addEvent('click',function(){
  
              ajaxFace = new LightFace.Request({
                  url: 'ajax.php',
                  buttons: [
                      { title: 'Add A Person', event: function() { 
                                              alert('hi!'); 
                                              }, 
                                              color: 'green' },
                      { title: 'Cancel', event: function() { this.close(); } }
                  ],
                  request: { 
                      data: { 
                          day: document.id('personName').value || 'PersonWhoIsTooCoolToGiveTheirName' 
                      },
                      method: 'post'
                  },
                  title: 'Add a name to this person'
              }).open();
  
          });
     });      
  &lt;/script&gt;
  </code></pre>
  
  <p>Some Header things: </p>
  
  <pre><code>&lt;link rel="stylesheet" href="../Assets/lightface.css" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools.js"&gt;&lt;/script&gt;
  &lt;script src="../Source/LightFace.js"&gt;&lt;/script&gt;
  &lt;script src="../Source/LightFace.Request.js"&gt;&lt;/script&gt;
      &lt;!-- this was the code that in the html doc to begin with in DW's code --&gt;
  &lt;script src="../Source/addpersonlightbox.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I want the ajax to post up the object_id to the php file receiving it, then I should be able to do everything else within the that php script.  </p>
  
  <p>I think I would need to change the document.id in the js to something with a class or a rel.  I would love some help on what to put here. </p>
  
  <pre><code>    request: { 
                  data: { 
                      day: document.id('personName').value || 'PersonWhoIsTooCoolToGiveTheirName' 
                  },
                  method: 'post'
              },
  </code></pre>
  
  <p>Additionally I think I need to change the two input fields to have something besides id to put a php variable in.  Like id="personName", but I don't know if it should be a class or a del or something else.  Then I don't know how that would work with the javascript.  </p>
  
  <p>Thanks in advance!</p>
  
  <pre><code>&lt;input type="hidden" id="personName" value="postToAjax" /&gt; 
  &lt;input type="button" value="Add a new person" id="add" class="submit" /&gt;
  </code></pre>