How to pass the id from url in php function without refreshing the page?

Question

I have a div which contains a button(Book it).When I press the button I want to add to the current url the id of the item I clicked on.Then get that id to pop up a box with clicked item data without refreshing the page, because I need to pop up in the current page.

Here it gets the treatments Id

 <div class="treatments">
        <ul>
        <?php
          global $treatments;
          foreach($treatments as $treatment){
            echo ' <li><a href="treatments.php?treatmentID='.$treatment['id'].' #treatmentItem" style="color: inherit; text-decoration:none;">'.$treatment['name'].'</a></li>';
          };
        ?>
        </ul>
        <div class="line"></div>
      </div>

<div class="treatment-items">
        <?php 
         global $iController;
         $items;
         if(isset($_GET['treatmentID'])){
            $items = $iController->getItemByTreatmentId($_GET['treatmentID']); 
         }else{
            $items = $iController->getItemByTreatmentId(4); 
         }
         foreach($items as $item){
           echo '
           <div class="col-30 items">
            <div>
            <p>'.$item['id'].'</p>
              <img src="'.$item['img_url'].'" alt="'.$item['name'].'" />
              <h3>'.$item['name'].'</h3>
              <p>'.$item['time'].' min</p>
              <p>'.$item['price'].'$</p>
              <input type="hidden" id="hidden_input" name="id_item" value="'.$item['id'].'">
              <a class="bookBtn" id="btn"><button>BOOK IT</button></a>   // when I press this button I want that box to pop up 
            </div>
           </div>
           ';
         }
        ?>
      </div>

Pop up box

 <div class="bookDetails">
        <div class="details">
          <?php
          global $iController;
          $itemm;
          if(isset($_GET['id_item'])){
            $itemm = $iController->getItemById($_GET['id_item']); 
          }
          echo'
            <h1>Book your treatment</h1>
            <p>Treatment Name : '.$itemm['name'].'</p>
            <p>Treatment Time :'.$itemm['time'].' </p>
            <p>Treatment Price : '.$itemm['price'].'</p>
            ';
          ?>  
              <form action="" method="POST">
              <label for="date">Choose your date:</label>
              <input type="date" for="date" name="date"><br>
              <input type="submit" value="Cancel" id="cancel">
              <input type="submit" value="Book Now">
          </form>

Jquery code

  $(".bookBtn").click(function(){
      $(".bookDetails").show();
    })

getItemById function

 public function getItemById($id){
        $sql="SELECT * FROM treatments_item WHERE id=$id";
        echo $id;
        $items = mysqli_query($this->connection,$sql);
        $returnArray = array();
        if($items){
            while($row = mysqli_fetch_assoc($items)){
                array_push($returnArray, $row);
            }     
            return $returnArray[0];

        }else{
            echo'It doesn't work';
        }
    }

Does this answer your question? [How to get javascript value into php variable without reloading the page using ajax](https://stackoverflow.com/questions/48219861/how-to-get-javascript-value-into-php-variable-without-reloading-the-page-using-a) — Dharman, Jul 10 '20 at 17:40
Does this answer your question? [How do I edit PHP variable with JavaScript/jQuery?](https://stackoverflow.com/questions/54079448/how-do-i-edit-php-variable-with-javascript-jquery) — AndrewL64, Jul 10 '20 at 17:48

score 0 · Answer 1 · answered Jul 10 '20 at 17:41

You can use ajax or mix php and javascript like this:

<script>
  $(document).ready(function() {
    <?php session_start(); ?>//Remove session_start
    if (!<?php $_GET(['id'])?'true':'false'; ?>) {
      alert something
    } else {
      something ..
    }

  });
</script>

hope this was helpful. :)

Satish51 · Answer 2 · 2020-07-10T18:16:28.107

<div class="treatment-items">
<?php 
    global $iController;
    $items;
    if(isset($_GET['treatmentID'])){
        $items = $iController->getItemByTreatmentId($_GET['treatmentID']); 
    }else{
        $items = $iController->getItemByTreatmentId(4); 
    }
    foreach($items as $item){
        echo '
        <div class="col-30 items">
        <div>
        <p>'.$item['id'].'</p>
        <img src="'.$item['img_url'].'" alt="'.$item['name'].'" />
        <h3>'.$item['name'].'</h3>
        <p>'.$item['time'].' min</p>
        <p>'.$item['price'].'$</p>
        <input type="hidden" class="id_item" value="'.$item['id'].'">
        <div class="bookBtn"><button>BOOK IT</button></div>   // when I press this button I want that box to pop up 
        </div>
        </div>
        ';
    }
?>

Note: Never use id same name in one Page i.e., id="hidden_input" // In for loop same name will be generated. It will create bug down the line. Same goes for Input name, instead use class.

$(document).ready(function(){
    $('body').on('click','.bookBtn',function(){
        var treatmentID = $(this).siblings('.id_item').val();
        // $(this) --> it will read the data of the property you have clicked
        // .siblings --> adjacent class with name ('.id_item')
        $.ajax({
            url: 'treatments.php',
            type: "get", //send it through get method
            data: { 
                treatmentID: treatmentID
            },
            success: function(response) {
                //operation to show the data in div
                //e.g., $('#divId').html(data.name);
                $(".bookDetails").show();            
            }
        });
    })
})

still the page is refreshing and treatmentID is being replaced with id_items. I want to put this id_items after treatmentID — Rina5, Jul 10 '20 at 18:14
For that u have to use bootstrap modal. I just shown an example. We can't add all the code in here. Google for Bootstrap modal and use that.Hope this will help u. — Satish51, Jul 10 '20 at 18:47

How to pass the id from url in php function without refreshing the page?

2 Answers2