PASS VARIABLE FROM HTML PAGE TO TABCONTENTS PAGE

HOW CAN I PASS THE PRODUCT ID FROM PRODUCT VIEW PAGE TO NEW PAGE WHICH IS OPEN BY ONCLICK EVENT


9 Answers
1-9 of  9
9 Answers
  • You cannot directly pass a variable from one HTML page to another because HTML is static, but you can achieve this using JavaScript or a backend. One common method is using URL query parameters, where you attach data to a link (for example, page.html?name=John) and then retrieve it on the next page using JavaScript. Another approach is to use browser storage like localStorage or sessionStorage, which allows you to save data on one page and access it on another. If you are using a backend like Django or PHP, you can also pass variables through form submission (GET or POST methods) or sessions. These methods make it easy to transfer data between pages in a simple and effective way.

  • To pass a variable from one HTML page to another (like from index.html → tabcontents.html), you have a few simple methods. The most common one for beginners is using URL parameters (query string).

  • Use
    1)$query "Select *form table name " 2)$run=mysqli_query($connection,$query ) 
    3)use while($row=mysqli_fetch_array($run))
    4)get the product id using $product_id=$row['product_id'];
    5)Now use the $product_id to pass value of product id

  • We can send it as either query string or by POST method of form. If we want submit data without load a page we can send it by using AJAX.

  • Parameter to a web page

  • my project is as given kindly help me on that
    product.php code as follows
     <?php
      include('../dbcon.php');
      $sql="SELECT `Id`, `Short`, `Rate`, `Long_description`, `Restaurant`, `Image` FROM `menu` order by Id ASC";
      
      $run=mysqli_query($con,$sql);
      $num=mysqli_num_rows($run);
      
      
      if($num>0){
      while($product=mysqli_fetch_assoc($run)){
    ?>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <form method ="POST" action="../assets/shopcart.php" >
    <div id="cards">
    <h5 class="card-title bg-info text-white p-2 text-uppercase"><?php echo $product['Short'];?></h5>
    <div class="card-body">
    <img src="../image/<?php echo $product['Image']; ?>"alt ="" class="img-responsive mx-auto">
    <input class="text-uppercase" type="text" style="text-align:center; width:100%; border-radius:5px; font-size:20px;" name="rest" value="<?php echo $product['Id'];?>" ></input>
    <h5>&#8377;<?php echo $product['Rate'];?> ( <span><?php echo $product['Rate'];?> %off )</span></h5>
    <h5><?php echo $product['Restaurant'];?></h5>
    <!-- <input type ="number" name="getid" value=<?php echo $product['Id'];?></input>-->
    </div>
    <div class="btn-group d-flex">
    <!--<button class="btn btn-success flex-fill"> add to cart</button>
    <button class="btn btn-warning flex-fill"> buy now</button>-->
    <a href="../assets/shopcart.php?sid=<?php echo $product['Id'];?>" style="font-size:20px;" name="cartg" class="btn btn-primary" onclick="openNav3()">&#9776; VIEW</a>
    <a href="#" style="font-size:20px;" name="tst" class="btn btn-primary" onclick="openNav3()">121</a>
    </div>
    </div>
    </form>
    </div>
    <?php
    }
    } 
      ?>


    by conclick function as followes


    <script>



    function openNav3() {
      document.getElementById("mySidenav3").style.width = "364px";
      document.getElementById("main").style.marginLeft = "250px";
      
    function closeNav3() {
      document.getElementById("mySidenav3").style.width = "0";
      document.getElementById("main").style.marginLeft= "0";
      }
    </script>

      <div id="mySidenav3" class="sidenav2">

      <a href="void(0)" class="closebtn" onclick="closeNav3()">&times;</a>
    <div class="pay">

    <div class="demo">
    <h4> ADD TO CARD <span class="fa fa-shopping-cart"</span></h4>

  • you can use query params to pass product id from one to another page and another thing remember that on second page (new page) get product id from URL .

  • There are multiple ways of doing it
    1) If you are working with php-The $_POST or $_GET array might be having the value which you need. You need to specify the name of the elements
    2) Th easiest way is by using Javascript
    I hope this will help
    https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
     

  • javascript 
    when product is slected through radio button the id for the specific radio button is passed from main page to next page

Javascript

Didn't get the answer.
Contact people of Talent-Javascript directly by clicking here