show hide a table on clicking show button

Question

I am newbie in php and js .I want show my table on clicking on the show button . but its not working. My tables should display only when i click on the show button. i am a php student please help me.

  <!DOCTYPE HTML>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }       </script>
  <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
  <link href="css/style.css" rel='stylesheet' type='text/css' />
  <link href='//fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
  <link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
  <link href='//fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  <link href="css/font-awesome.css" rel="stylesheet">
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <!-- Custom Theme files -->
  <script src="js/jquery-1.12.0.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <!--animate-->
  <link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
  <script src="js/wow.min.js"></script>
      <script>
           new WOW().init();
      </script>
      </head>
   <style>
                      #home {
                        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                        border-collapse: collapse;

                      }

                      #home td, #home th {
                        border: 1px solid #ddd;
                        padding: 5px;
                      }

                      #home tr:nth-child(even){background-color: #f2f2f2;}

                      #home tr:hover {background-color: #ddd;}

                      #home th {
                        padding-top: 12px;
                        padding-bottom: 12px;
                        text-align: left;
                        background-color: #007bff;
                        color: white;

                      }
                      </style>   
  <style type="text/css">
    #profile {
      display: none;
    }
  </style>

  <body>
  <?php include('include/header.php');?>

  <div class="banner3" style="background: url(images/17.jpg); background-size: cover;">
    <div class="container">
      <h1 class="wow zoomIn animated animated" data-wow-delay=".5s" style="visibility: visible; animation-delay: 0.5s; animation-name: zoomIn;">My Tour</h1>
    </div>
  </div>

   <form class="form-horizontal"  method="post" style="padding-top: 75px;padding-right: 50px;padding-bottom: 100px">
      <div class="form-group">
          <label class="control-label col-sm-2" for="From">From:</label>
          <div class="col-sm-10">
            <select class="form-control" name="From" required/>
              <option value="">------Select-----</option>
              <option value="Kottayam">Kottayam</option>
              <option value="Kollam">Kollam</option>
              <option value="Kochi">Kochi</option>
              <option value="TVM">TVM</option>
              <option value="Munnar">Munnar</option>
              <option value="Kozhikode">Kozhikode</option>
              <option value="Muvattupuzha">Muvattupuzha</option>
            </select>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-2" for="To">To:</label>
          <div class="col-sm-10">
            <select class="form-control" name="To" required/>
              <option value="">------Select-----</option>
              <option value="Kottayam">Kottayam</option>
              <option value="Kollam">Kollam</option>
              <option value="Kochi">Kochi</option>
              <option value="TVM">TVM</option>
              <option value="Munnar">Munnar</option>
              <option value="Kozhikode">Kozhikode</option>
              <option value="Muvattupuzha">Muvattupuzha</option>
            </select>
            </select>
          </div>
        </div>

      <div class="control-label" style="padding-bottom: 50px">

              <button type="submit" name="submit"  class="btn-primary btn" formnovalidate onclick="detail();">Show</button>
        </div>
      </form>
      <div id="profile">
      <div>
        <?php
        $From =$_POST['From'];
        $result = mysqli_query($conn,"SELECT veh_type,veh_driver,veh_drivno FROM vehicle where picup_point = '$From'") or die("Error: " . mysqli_error($conn));
        ?>
        <table id="home" align="left" border="1" width="45%">
          <tr><th>Vehicle Type</th>
            <th>Driver</th>
            <th>Phone Number</th></tr>
            <?php
            while($row = mysqli_fetch_array($result))
            {
              if(isset($_POST["submit"]))
            {
              $veht=$row['veh_type'];
              $veho=$row['veh_driver'];
              $vehno=$row['veh_drivno'];
              ?>
            <tr>  
              <td><?php echo "$veht"; ?></td>
              <td><?php echo "$veho"; ?></td>
              <td><?php echo "$vehno"; ?></td>
            </tr>
              <?php } ?>
          <?php } ?>

        </table>

      </div>
      <div>
        <?php
        $To =$_POST['To'];
        $result = mysqli_query($conn,"SELECT veh_type,veh_driver,veh_drivno FROM vehicle where picup_point = '$To'") or die("Error: " . mysqli_error($conn));
        ?>
        <table id="home" border="1" align="right" width="45%">
          <tr><th>Vehicle Type</th>
            <th>Driver</th>
            <th>Phone Number</th></tr>
            <?php
            while($row = mysqli_fetch_array($result))
            {
              if(isset($_POST["submit"]))
            {
              $veht=$row['veh_type'];
              $veho=$row['veh_driver'];
              $vehno=$row['veh_drivno'];
              ?>
            <tr>  
              <td><?php echo "$veht"; ?></td>
              <td><?php echo "$veho"; ?></td>
              <td><?php echo "$vehno"; ?></td>
            </tr>
              <?php } ?>
          <?php } ?>

        </table>

      </div>

    <!----------------->
    <div>
        <?php
        $From =$_POST['From'];
        $result = mysqli_query($conn,"SELECT hotel_name,hotel_no,hotel_email FROM hotels where hotel_loc = '$From'") or die("Error: " . mysqli_error($conn));
        ?>
        <table id="home" align="left" border="1" width="45%" style="padding-top: 25px">
          <tr><th>Hotel</th>
            <th>Phone Number</th>
            <th>Email</th>
            <th>Details</th></tr>
            <?php
            while($row = mysqli_fetch_array($result))
            {
              if(isset($_POST["submit"]))
            {
              $hot_name=$row['hotel_name'];
              $hot_no=$row['hotel_no'];
              $hot_email=$row['hotel_email'];
              ?>
            <tr>  
              <td><?php echo "$hot_name"; ?></td>
              <td><?php echo "$hot_no"; ?></td>
              <td><?php echo "$hot_email"; ?></td>
              <td><a href="hotels.php?hot_name=<?php echo $hot_name;?>"><i class="fas fa-hotel fa-fw" style="color: #17a2b8;"></i></a></td>
            </tr>
              <?php } ?>
          <?php } ?>

        </table>

      </div>
       <div>
        <?php
        $To =$_POST['To'];
        $result = mysqli_query($conn,"SELECT hotel_name,hotel_no,hotel_email FROM hotels where hotel_loc = '$To'") or die("Error: " . mysqli_error($conn));
        ?>
        <table id="home" align="right" border="1" width="45%">
          <tr><th>Hotel</th>
            <th>Phone Number</th>
            <th>Email</th>
            <th>Details</th></tr>
            <?php
            while($row = mysqli_fetch_array($result))
            {
              if(isset($_POST["submit"]))
            {
              $hot_name=$row['hotel_name'];
              $hot_no=$row['hotel_no'];
              $hot_email=$row['hotel_email'];
              ?>
            <tr>  
              <td><?php echo "$hot_name"; ?></td>
              <td><?php echo "$hot_no"; ?></td>
              <td><?php echo "$hot_email"; ?></td>
              <td><a href="hotels.php?hot_name=<?php echo $hot_name;?>"><i class="fas fa-hotel fa-fw" style="color: #17a2b8;"></i></a></td>
            </tr>
              <?php } ?>
          <?php } ?>

        </table>

      </div>
    </div>


      <?php } ?>

Javascript is

  function detail() {
    document.getElementById('profile').style.visibility = "visible";

  }

My tables should display only when i click on the show button. i am a php student please help me.

Possible duplicate of [JavaScript hide/show element](https://stackoverflow.com/questions/6242976/javascript-hide-show-element) — delavega66, Jan 14 '19 at 09:06

Kashan · Answer 1 · 2019-01-14T09:15:01.493

1

Try this:

function detail() {
  document.getElementById('profile').style.display='block';
      }

you have to Remove the semicolon when calling the function from onclick too like this:

<button type="submit" name="submit"  class="btn-primary 
     btn" formnovalidate="formnovalidate" onclick="detail()">Show</button>

edited Jan 14 '19 at 09:15

answered Jan 14 '19 at 09:09

Kashan

348
3
19

did you try formnovalidate="formnovalidate" – Kashan Jan 14 '19 at 09:18

score 0 · Answer 2 · answered Jan 14 '19 at 09:17

0

On your javascript add "#" to the profile, you are calling a HTML DOM id Property. i.e

document.getElementById('#profile').style.visibility = "visible";

Check this https://www.w3schools.com/jsref/prop_html_id.asp

answered Jan 14 '19 at 09:17

Immanuel Okeke

9
2

I think you confund jquery and javascript. It's an error in javascript to add "#" before the id. – R3tep Jan 14 '19 at 09:32

Aishwarya · Accepted Answer · 2019-01-14T09:37:17.270

0

    $("#btn").click(function() {
   $("#tblop").toggleClass("tbl_close");
    });

.tbl_open{
display:none;
}
.tbl_close{
display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table id="tblop" class="tbl_open">
      <thead>
        <th>
          <tr>
            <td>Name</td>
            <td>Salary</td>
          </tr>
        </th>
      </thead>
      <tbody>
        <tr>
          <td>Jhon</td>
          <td>23400</td>
        </tr>
      </tbody>
    </table>
    <button id="btn" type=submit>click to show table</button>

edited Jan 14 '19 at 09:37

answered Jan 14 '19 at 09:17

Aishwarya

637
9
21

what actually happens and what you need can you explain lil bit – Aishwarya Jan 14 '19 at 09:31

show hide a table on clicking show button

3 Answers3