GET PHP variable value from HTML data-id

Question

I asked a question earlier today which in a nutshell asks when a user clicks a button on a page -- a pop up modal comes up, which should get a PHP variable value.

Since there is no GET or POST request when popup modal btn is clicked which means I can not get the variable value using above two options

tried the following:

`<a id="myid" data-id="<?php echo $userID ?>">link</a>
<script>
  $('#myid').data("id");
</script>`

Now I have the PHP $userID value in a javascript variable. Which leads me to my question what would be the most efficient way to retrieve the $userID variable and insert it into a php variable.

Additional Info

I found this question on SO but it is not really applicable to me.

Example Image of what im trying to achieve

LOOP GENERATED PHP LIST

$teacherClass = new TeacherSearch();
            $teachers = $teacherClass->showAllTeachers();
            if (is_array($teachers)) {
            foreach ($teachers as $teacher) {
                 $src = $teacher['userID'];
<div class="teacher-info">
                        <p class="teacherLabel">
                            NAME:
                            <?php
                            echo $teacher['name'];
                            ?>
                        </p>

                        <p class="teacherLabel">
                            HEADLINE:
                            <?php
                            echo $teacher['headline'];
                            ?>

                        <p class="teacherLabel">
                            LOCATION:
                            <?php
                            echo $teacher['location']
                            ?>
                        </p>
                       <!--BUTTON GOES HERE-->
 <a id="myid" data-id="<?php echo $teacher['userID'] ?>" data-toggle="modal" data-target="#myModal">Hire <?php echo $teacher['name'] ?></a>
                        }//foreach

Example IMG

Modal

<!-- Trigger the modal with a button -->
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 id="modalTitle" class="modal-title"></h4>
            </div>
            <div class="modal-body">
                Need to perform PHP here with $userID variable
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

@NanaPartykar How would I get that value into a PHP variable. Excuse me if Im being stupid here but know very little jscript — Timothy Coetzee, Jul 25 '17 at 15:04
Only by making a new request to the server - so either AJAX, submitting a form, changing the URL via a link click or location.href ... so basically what that question you said was not applicable is about. — CBroe, Jul 25 '17 at 15:04
@Timothy: Please share your code. How you opening the model? Share that code too. Please — Nana Partykar, Jul 25 '17 at 15:04
Or, [Passing data via Modal Bootstrap and getting php variable?](https://stackoverflow.com/questions/33043115/passing-data-via-modal-bootstrap-and-getting-php-variable/33043821#33043821) — Nana Partykar, Jul 25 '17 at 15:06
well instead of data-id why don't you use data-src and generate the src loop below it? — Just_Do_It, Jul 25 '17 at 15:12
@Just_Do_It Sorry, im not quite with you what do you mean generate the src loop below it? — Timothy Coetzee, Jul 25 '17 at 15:14
You can use ajax for this , but the main mistake you have is you have the id (myid) with in for loop which is not true to do — Osama, Jul 25 '17 at 15:14
@Osama yes since it will generate invalid HTML just saw that now thank you....any alternative suggestion? — Timothy Coetzee, Jul 25 '17 at 15:15
Is this page of modal within the same page of the test code if ? — Osama, Jul 25 '17 at 15:19
@osama NO the modal is `included('view/html/modalHire.php')` — Timothy Coetzee, Jul 25 '17 at 15:22

Nana Partykar · Accepted Answer · 2017-07-25T15:24:05.060

First of all, remove id="myId" from <a></a>. ID must be unique. Use class.

First_Page.php

<?php
$teacherClass = new TeacherSearch();
$teachers = $teacherClass->showAllTeachers();
if (is_array($teachers)) {
  foreach ($teachers as $teacher) {
    $src = $teacher['userID'];
    ?>
    <div class="teacher-info">
      <p class="teacherLabel">
        NAME:<?php echo $teacher['name']; ?>
      </p>
      <p class="teacherLabel">
        HEADLINE:
        <?php echo $teacher['headline'];?>
      </p>
      <p class="teacherLabel">
        LOCATION: <?phpecho $teacher['location'];?>
      </p>
      <!--BUTTON GOES HERE-->
      <a class="openModal" data-id="<?php echo $teacher['userID'] ?>" data-toggle="modal" href="#myModal">
        Hire <?php echo $teacher['name']; ?>
      </a>
    </div>
  <?php }
}?>

Put below code in footer before end of </body> tag.

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">

    </div>
  </div>
</div>

JS

<script>
  $('.openModal').click(function(){
      var id = $(this).attr('data-id');
      $.ajax({url:"modal_ajax.php?id="+id,cache:false,success:function(result){
          $(".modal-content").html(result);
      }});
  });
</script>

Create a new file modal_ajax.php.

[NOTE: Remember, this page name modal_ajax.php is used in script tag also. if you are planning to change the name of this page, change page name there in script tag too. Both are related.]

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">&times;</button>
  <h4 id="modalTitle" class="modal-title"></h4>
</div>
<div class="modal-body">
  <?php echo "ID: ".$_GET['id'];?>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

Already answered similar question. Please have a look Passing data via Modal Bootstrap and getting php variable?

Thank you so much mate, gimmie a couple of minutes to study up on the code and give it a test. Will give feedback soon — Timothy Coetzee, Jul 25 '17 at 15:23
@TimothyCoetzee: No problem brother. Take your time. I'm leaving for now. Will be available after an hour. So, please comment if anything not working. Ok. — Nana Partykar, Jul 25 '17 at 15:25
Worked wonders, THANK YOU SO MUCH. just a quick question if you dont mind. 1) `$.ajax({url:"modal_ajax.php?id="+id,cache:false,success:function` what is the reason for adding `cache:false` in ajax url? 2) There gets an html modal placed at bottom of page, yet you have a separate `modal_ajax.php` file, why...? Thanks again — Timothy Coetzee, Jul 25 '17 at 15:36
This entire thing could have been done on single page using data-src instead of data-id — Just_Do_It, Jul 25 '17 at 15:36

GET PHP variable value from HTML data-id

1 Answers1

Linked