Values null when passed from another page using modal and jquery - php

Question

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

Answer 1

Add id attribute in your hidden field then use that in js like below code.
echo "<input type='hidden' data_project='$row[PROJECT_NAME]' data_headmark='$row[HEAD_MARK]' data_id='$row[ID]' id="data_field" />";
// your codes
$('#rejectbutton').click(function() {
var myData = $('#data_field');
$.post("testClass.php",{
projectName : myData.attr("data_project"),
headMark : myData.attr("data_headmark"),
id : myData.attr("data_id"),
reasonReject : $("#reasonForRejection").val()
});
});

Answer 2

Looking at this 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")});
});
it assumes, that when the element with id #rejectbutton is clicked, which is:
<button type="button" name="rejectbutton" id="rejectbutton" class="btn btn-danger">Confirm REJECT!</button>
It has the attributes you want on it, but it doesn't. Also, you are trying to get the attributes using getAttribute() - why don't you use the jquery method?
this is how you do it. Update your HTML to be like this:
<button
type="button"
name="rejectbutton"
id="rejectbutton"
class="btn btn-danger"
data_project="some project name",
headMark="some head mark",
data_id="1234",
reasonForRejection="some reason here"
>Confirm REJECT!</button>
Then update your JS to get those attributes in your post request like this:
$('#rejectbutton').click(function() {
$.post("testClass.php", {
projectName : $(this).attr('data_project'),
headMark : $(this).attr('headMark'),
id : $(this).attr('data_id'),
reasonReject : $(this).attr('reasonForRejection'),
});
});