title: Values null when passed from another page using modal and jquery
body: <p>I am having problem on passing values into another page using jQuery and modal. So here is my code.</p>
  
  <p>Firing up the modal:</p>
  
  <pre><code>echo "&lt;input type='hidden' data_project='$row[PROJECT_NAME]' data_headmark='$row[HEAD_MARK]' data_id='$row[ID]'&gt;&lt;/input&gt;";
  
  echo '&lt;button type="button" name="qcreject" id="qcreject" class="btn btn-primary btn-danger btn-lg btn-block" data-toggle="modal" data-target="#qcRejectModal"&gt; 
                  &lt;span style="font-size:35px"&gt; '.$row['PROJECT_NAME'].' / &lt;b&gt;'.$_POST["hm"].'&lt;/b&gt;/'.$row['ID'].' ~ FAIL&lt;/span&gt;&lt;/button&gt;';
  
   &lt;div class="modal-body"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-12"&gt;
                              &lt;div class="form-group"&gt;
                                This is the confirmation window to PASS all the Quality Control for, &lt;br/&gt;&lt;br/&gt;
                                PROJECT : &lt;b&gt;'.$row['PROJECT_NAME'].'&lt;/b&gt;
                                HEADMARK : &lt;b&gt;'.$row['HEAD_MARK'].'&lt;/b&gt;
                                ID : &lt;b&gt;'.$row['ID'].'
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;br/&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-12"&gt;
                            &lt;div class="form-group"&gt;
                              &lt;textarea name="reasonForRejection" id="reasonForRejection" class="form-control" placeholder="Reason for rejection" rows="2" required&gt;&lt;/textarea&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                      &lt;button type="button" name="rejectbutton" id="rejectbutton" class="btn btn-danger"&gt;Confirm REJECT!&lt;/button&gt;
                    &lt;/div&gt;
  </code></pre>
  
  <p>and when user click the reject button it should pass PROJECT_NAME, HEAD_MARK, ID and values in the textarea to the testClass.php.</p>
  
  <p>jQuery is,</p>
  
  <pre><code>$('#rejectbutton').click(function() {
  
          $.post("testClass.php",{
          projectName : this.getAttribute("data_project"), 
          headMark : this.getAttribute("data_headmark"),
          id : this.getAttribute("data_id"),
          reasonReject : this.getAttribute("reasonForRejection")});
      });
  </code></pre>
  
  <p>and inside the testClass.php</p>
  
  <pre><code>    echo 'TEST CLASS WORKS';
  
  $val1 = $_POST["projectName"];
  $val2 = $_POST["headMark"];
  $val3 = $_POST["id"];
  $val4 = $_POST["reasonReject"];
  
  var_dump($val1);
  var_dump($val2);
  var_dump($val3);
  var_dump($val4);
  </code></pre>
  
  <p>unfortunately all the values I'm getting in the testClass are null</p>
  
  <pre><code>TEST CLASS WORKSstring(0) ""
  string(0) ""
  string(0) ""
  string(0) ""
  </code></pre>