时间戳

首页 > 解决方案 > 在 PHP/HTML 中按下按钮不会执行任何操作

javascript - 在 PHP/HTML 中按下按钮不会执行任何操作

问题描述

所以我正在为大学项目制作一个基本的“书店”网站。我试图做到这一点，当您按下书的“详细信息”按钮时，会弹出一个弹出窗口并显示信息，用户可以“添加到购物车”或关闭弹出窗口。我可能错过了一些我似乎无法注意到的小东西。

这是 index.php 的代码

<!DOCTYPE html>
<html>
    <head>
        <title>Books 101 Shop</title>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" href="css/main.css"/>
        <meta name="viewport" content="width=device-width, initial-scale=1,user-scaleable=no">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
        </script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top" id="navbar">
            <div class="container">
                <a href="index.php" class="navbar-brand" id="text">Books 101</a>
                <ul class="nav navbar-nav">
                    <!--DROP DOWN MENU-->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Genre<span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Fantasy</a></li>
                            <li><a href="#">Detective</a></li>
                            <li><a href="#">Romance</a></li>                            
                            </ul>
                </ul>
            </div>
        </nav>
        <!--INSERTING IMAGES-->
        <div id="background-image">
            <div id="image-1"></div>
            <div id="image-2"></div>
        </div>
        <!--REMOVE THE SPACES AND CENTER THE PRODUCTS-->
        <div class="col-md-2"></div>

        <!-- MAIN CONTENT OF FEATURED PRODUCTS-->
        <div class="col-md-8">
            <div class="row">
                <h2 class="text-center">Featured Books</h2>
                <div class="col-md-3">
                    <h4>The Witcher</h4>
                    <img src="images/fantasy.jpg" alt="The Witcher" id="images"/>
                    <p class="list-price text-danger">List Price: <s>$29.99</s></p>
                    <p class="price">Our price: $19.99</p>
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="details-1">Details</button>
                </div>


                <div class="col-md-3">
                    <h4>Lord Of The Rings</h4>
                    <img src="images/lordoftherings.jpg" alt="LotR" id="images"/>
                    <p class="list-price text-danger">List Price: <s>$24.99</s></p>
                    <p class="price">Our price: $19.99</p>
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="details-2">Details</button>
                </div>


                <div class="col-md-3">
                    <h4>50 Shades of Gray</h4>
                    <img src="images/shadesofgray.jpg" alt="50 Shades of Gray" id="images"/>
                    <p class="list-price text-danger">List Price: <s>$19.99</s></p>
                    <p class="price">Our price: $9.99</p>
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="details-3">Details</button>
                </div>

                <div class="col-md-3">
                    <h4>Sherlock Holmes</h4>
                    <img src="images/sherlock.jpg" alt="Sherlock Holmes" id="images"/>
                    <p class="list-price text-danger">List Price: <s>$29.99</s></p>
                    <p class="price">Our price: $19.99</p>
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="details-4">Details</button>
                </div>


                <div class="col-md-3">
                    <h4>The Hobbit</h4>
                    <img src="images/the_hobbit.jpg" alt="The Hobbit" id="images"/>
                    <p class="list-price text-danger">List Price: <s>$29.99</s></p>
                    <p class="price">Our price: $19.99</p>
                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="details-5">Details</button>
                </div>
            </div>
        </div>

        <!--DETAILS MODAL-->
        <?php include 'details-modal-witcher.php';
             // include 'details-modal-lotr.php';
             // include 'details-modal-shadesofgray.php';
             // include 'details-modal-sherlock.php';
             // include 'details-modal-hobbit.php';
        ?>
        <!--DETAILS MODAL END-->

        <footer class="text-center" id="footer">&copy; Copyright Books 101</footer>
    </body>
</html>

这是进行按下操作的代码：

<div class="modal fade details-1" id="details-1" tableindex="-1" role="dialog" aria-labelledby="details-1" aria-hidden="true">
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
      <div class="modal-header">
       <button class="close" type="button" data-dismiss="modal" aria-label="Close">
       <span aria-hidden="true">&times;</span>
       </button>
       <h4 class="modal-title text-center">The Witcher</h4>
      </div>
     <div class="modal-body">
       <div class="container-fluid">
         <div class="row">
           <div class="col-sm-6">
            <div class="center-block">
              <img src="images/fantasy.jpg" alt="The Witcher" class="details img-responsive"/>
            </div>
           </div>
          <div class="col-sm-6">
           <h4>Details</h4>
           <p>One of the best fantasy books in the market</p>
           <hr/>
           <p>Price: $19.99</p>
           <p>Writer: Sapkowski</p>
          <form action="add_cart.php" method="post">
            <div class="form-group">
              <div class="col-xs-3">
                <label for="quantity" id="quantity-label">Quantity:</label>
                <input type="text" class="form-control" id="quantity" name="quantity"/>
              </div><br />
             <div class="form-group">
               <label for="size">Cover:</label>
               <select name="size" id="size" class="form-control">
                 <option value=""></option>
                 <option value="Hardcover">Hardcover</option>
                  <option value="Softcover">Softcover</option>
               </select>
             </div>
           </div>
         </form>
          </div>
         </div>
      </div>
   </div>
    <div class="modal-footer">
      <button class="btn btn-default" data-dismiss="modal">Close</button>
      <button class="btn btn-warning" type="submit"><span class="glyphicon glyphicon-shopping-cart"></span>Add To Cart</button>
  </div>
 </div>
</div>

标签： javascripthtmlformsbootstrap-modal

解决方案

问题仅在于按钮及其相应模式之间的链接。像这样添加前面的#：

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#details-1">
    Details
</button>


<!DOCTYPE html>
  <html>
      <head>
          <title>Books 101 Shop</title>
          <meta name="viewport" content="width=device-width, initial-scale=1,user-scaleable=no">

          <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
          
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
      </head>
      <body>
          <nav class="navbar navbar-default navbar-fixed-top" id="navbar">
              <div class="container">
                  <a href="index.php" class="navbar-brand" id="text">Books 101</a>
                  <ul class="nav navbar-nav">
                      <!--DROP DOWN MENU-->
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Genre<span class="caret"></span>
                          </a>
                          <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Fantasy</a></li>
                            <li><a href="#">Detective</a></li>
                            <li><a href="#">Romance</a></li>                            
                          </ul>
                  </ul>
              </div>
          </nav>
          <!--INSERTING IMAGES-->
          <div id="background-image">
              <div id="image-1"></div>
              <div id="image-2"></div>
          </div>
          <!--REMOVE THE SPACES AND CENTER THE PRODUCTS-->
          <div class="col-md-2"></div>

          <!-- MAIN CONTENT OF FEATURED PRODUCTS-->
          <div class="col-md-8">
              <div class="row">
                  <h2 class="text-center">Featured Books</h2>
                  <div class="col-md-3">
                      <h4>The Witcher</h4>
                      <img src="https://via.placeholder.com/150" alt="The Witcher" id="images"/>
                      <p class="list-price text-danger">List Price: <s>$29.99</s></p>
                      <p class="price">Our price: $19.99</p>
                      <button type="button" class="btn btn-success" data-toggle="modal" data-target="#details-1">Details</button>
                  </div>


                  <div class="col-md-3">
                      <h4>Lord Of The Rings</h4>
                      <img src="https://via.placeholder.com/150" alt="LotR" id="images"/>
                      <p class="list-price text-danger">List Price: <s>$24.99</s></p>
                      <p class="price">Our price: $19.99</p>
                      <button type="button" class="btn btn-success" data-toggle="modal" data-target="details-2">Details</button>
                  </div>


                  <div class="col-md-3">
                      <h4>50 Shades of Gray</h4>
                      <img src="https://via.placeholder.com/150" alt="50 Shades of Gray" id="images"/>
                      <p class="list-price text-danger">List Price: <s>$19.99</s></p>
                      <p class="price">Our price: $9.99</p>
                      <button type="button" class="btn btn-success" data-toggle="modal" data-target="details-3">Details</button>
                  </div>

                  <div class="col-md-3">
                      <h4>Sherlock Holmes</h4>
                      <img src="https://via.placeholder.com/150" alt="Sherlock Holmes" id="images"/>
                      <p class="list-price text-danger">List Price: <s>$29.99</s></p>
                      <p class="price">Our price: $19.99</p>
                      <button type="button" class="btn btn-success" data-toggle="modal" data-target="details-4">Details</button>
                  </div>


                  <div class="col-md-3">
                      <h4>The Hobbit</h4>
                      <img src="https://via.placeholder.com/150" alt="The Hobbit" id="images"/>
                      <p class="list-price text-danger">List Price: <s>$29.99</s></p>
                      <p class="price">Our price: $19.99</p>
                      <button type="button" class="btn btn-success" data-toggle="modal" data-target="details-5">Details</button>
                  </div>
              </div>
          </div>

          <!--DETAILS MODAL-->
          <div class="modal fade details-1" id="details-1" tableindex="-1" role="dialog" aria-labelledby="details-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                  <h4 class="modal-title text-center">The Witcher</h4>
                </div>
              <div class="modal-body">
                <div class="container-fluid">
                  <div class="row">
                    <div class="col-sm-6">
                      <div class="center-block">
                        <img src="images/fantasy.jpg" alt="The Witcher" class="details img-responsive"/>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <h4>Details</h4>
                      <p>One of the best fantasy books in the market</p>
                      <hr/>
                      <p>Price: $19.99</p>
                      <p>Writer: Sapkowski</p>
                      <form action="add_cart.php" method="post">
                        <div class="form-group">
                          <div class="col-xs-3">
                            <label for="quantity" id="quantity-label">Quantity:</label>
                            <input type="text" class="form-control" id="quantity" name="quantity"/>
                          </div>
                          <br />
                          <div class="form-group">
                            <label for="size">Cover:</label>
                            <select name="size" id="size" class="form-control">
                              <option value=""></option>
                              <option value="Hardcover">Hardcover</option>
                              <option value="Softcover">Softcover</option>
                            </select>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">Close</button>
                <button class="btn btn-warning" type="submit"><span class="glyphicon glyphicon-shopping-cart"></span>Add To Cart</button>
              </div>
            </div>
          </div>

          <!--DETAILS MODAL END-->

          <footer class="text-center" id="footer">&copy; Copyright Books 101</footer>
      </body>
  </html>

推荐阅读