title: javascript unable to assign hidden input elements from HTML input tag
body: <p>i am trying to grab the hidden input value from a form i have. The form passes all the elements properly EXCEPT for the HIDDEN elements. I know they are declared because if I choose "view source" on the page it shows me the correct values (basically the user credentials).</p>
  
  <pre><code>&lt;form name="addExperienceForm" id="addExperienceForm" style="display:none;"&gt;
                  Title:&lt;input type="text" name="title" id="title" /&gt;
                  From:&lt;input type="text" name="startDate" id="startDate" /&gt;
                  To:&lt;input type="text" name="endDate" id="endDate" /&gt;
                  Description:&lt;textarea type="message" name="description" id="description"&gt;&lt;/textarea&gt;
                  &lt;input type="button" value="Submit" onclick="addUserExp()"/&gt;
                  &lt;input type="hidden" value="&lt;?=$_SESSION['userID']?&gt;" id="userID" /&gt;
                  &lt;input type="hidden" value="&lt;?=$_SESSION['email']?&gt;" id="email" /&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>function addUserExp(){
  
      //get info
      var title = document.getElementById('title').value;
      var startDate = document.getElementById('startDate').value;
      var endDate = document.getElementById('endDate').value;
      var userID = document.getElementById('userID').value;
      var email = document.getElementById('email').value;
      var description = document.getElementById('description').value;
  
      //construct POST string with name value pair
      var str = "title="+title+"start="+startDate+"end="+endDate+"userID="+userID+"email="+email+"desc="+description;
  
      //establish XMLHTTP object
      var req = getXMLHTTP();
  
      if(req){
  
          req.onreadystatechange = function(){
              if (req.readyState == 4) {
                  // only if "OK"
                  if (req.status == 200) {                        
                      document.getElementById('addNewExp').innerHTML=req.responseText;    
  
  
                  } else {
                      alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                  }
              }
          }
      }
      req.open("post", "addExperience.php", true);
      req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      req.send(str);
  }
  </code></pre>
  
  <p>PHP</p>
  
  <pre><code>   &lt;?php
  
  
  $title = $_POST['title'];
  $startDate = $_POST['start'];
  $endDate = $_POST['end'];
  $userID = $_POST['userID'];
  $email = $_POST['email'];
  $description = $_POST['desc'];
  
  $sql = "INSERT INTO `user_experience`(`user_id`, `email`, `experience_title`, `experience_desc`, `start_date`, `end_date`) 
              VALUES ('$userID', '$email', '$title', '$startDate', '$endDate', '$description')";
  
  echo $sql;
  
  ?&gt;
  </code></pre>
  
  <p>I am echoing out the MYSQL statement so you can see that the fields are not being populated. The output of the above produces the following when data is entered into the form:</p>
  
  <pre><code>INSERT INTO `user_experience`(`user_id`, `email`, `experience_title`, `experience_desc`, `start_date`, `end_date`) VALUES ('', '', 'test', 'Feb-2013', 'May-2013', 'test') 
  </code></pre>