javascript - What am i doing wrong in my toggle visibility -
i made html page using simple bootstrap , have linked database using php. want page simple @ beginning, 2 sections, , complete inputs , press next, section becomes visible. tried doing toggle visibility in javascript reason either doesn't switch between display: none or block, doesn't take on inputs or nothing.
below 2 sections, if can explain why , how not work.
/*contect style*/ input, textarea { padding: 10px; border: 1px solid #e5e5e5; width: 200px; color: #999999; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; } textarea { width: 400px; height: 150px; max-width: 400px; line-height: 18px; } input:hover, textarea:hover, input:focus, textarea:focus { border-color: 1px solid #c9c9c9; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px; } .form label { margin-left: 10px; color: #999999; } .submit input { width: 100px; height: 40px; background-color: #474e69; color: #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } /*sections*/ body { width: 100%; height: 100%; } html { width: 100%; height: 100%; } @media(min-width:767px) { .navbar { padding: 20px 0; -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out; -moz-transition: background .5s ease-in-out, padding .5s ease-in-out; transition: background .5s ease-in-out, padding .5s ease-in-out; } .top-nav-collapse { padding: 0; } } .intro-section { height: 100%; padding-top: 150px; text-align: center; background: #fff; } .about-section { height: 100%; padding-top: 150px; text-align: center; background: #eee; display: none; } .services-section { height: 100%; padding-top: 150px; text-align: center; background: #fff; display: none; } .reservation-section { height: 100%; padding-top: 150px; text-align: center; background: #eee; display: none; } .contact-section { height: 100%; padding-top: 150px; text-align: left; background: #fff; }<?php $servername="localhost" ; $username="root" ; $password="" ; // create connection $conn=n ew mysqli($servername, $username, $password); // check connection if ($conn->connect_error) { die("connection failed: " . $conn->connect_error); } $conn->select_db("airports"); ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link href="bootstrap.css" rel="stylesheet" type="text/css" /> <link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="scrolling-nav.css" rel="stylesheet" type="text/css" /> <link href="contactstyle.css" rel="stylesheet" type="text/css" /> <script src="paymentformjs.js" type="text/javascript"></script> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <title>licenta - rezervare bilete de avion</title> <script type="text/javascript"> <!-- function toggle_visibility(id) { var e = document.getelementbyid(id); if (e.style.display == 'none') e.style.display = 'block'; else e.style.display = 'none'; } //--> </script> </head> <!-- #page-top id part of scrolling feature - data-spy , data-target part of built-in bootstrap scrollspy function --> <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <!-- navigation <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand page-scroll" href="#page-top">home</a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="hidden"> <a class="page-scroll" href="#page-top"></a> </li> <li> <a class="page-scroll" href="#about">about</a> </li> <li> <a class="page-scroll" href="#services">services</a> </li> <li> <a class="page-scroll" href="#reservation">reservation</a> </li> <li> <a class="page-scroll" href="#contact">contact</a> </li> </ul> </div> </div> </nav>--> <!-- intro section --> <section id="intro" class="intro-section section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div style="height: 50px"></div> <h1>tells want!</h1> <div style="height: 100px;"></div> <form role="form"> <div class="form-group col-xs-6"> <h3><label for="departure">where leaving from</label></h3> <input class="form-control input-lg" id="departure" type="text" placeholder="madrid, spain" name="source"> </div> <div class="form-group col-xs-6"> <h3><label for="arrival">where arrive to</label></h3> <input class="form-control input-lg" id="arrival" type="text" placeholder="bucharest, romania" name="destination"> </div> <div class="form-group col-xs-4" style="margin-left: 33%; margin-top: 100px;"> <button type="submit" class="btn btn-info btn-lg btn-block" name="city_search" id="aboutbtn" onclick="toggle_visibility('about')"> <a class="page-scroll-about" href="#about" style="text-decoration: none; color: #ffffff;"> find </a> </button> </div> </form> </div> </div> </div> </section> <!-- section --> <section id="about" class="about-section"> <div class="container" style=""> <div class="row"> <div class="col-lg-12"> <h1>pick flight</h1> <div style="height: 50px;"></div> <form role="form"> <?php if(isset($_get[ "city_search"])) { $src=$ _get[ "source"]; $dest=$ _get[ "destination"]; $query_txt="select * flights source_city '%{$src}%' , destination_city '%{$dest}%'" ; if($qu=$ conn->query($query_txt)) { while($row = $qu->fetch_row()) { echo " <div class=\ "form-group col-xs-12\" style=\ "border: 1px solid black; height: auto\">"; echo " <div class=\ " col-lg-6\" style=\ "border-right: 1px solid black; height: 100px; margin-top: 15px; font-family: arial; font-size: 32px;\">"; echo " <p style=\ " margin-top: 25px;\">{$row[1]}</p>"; echo "</div>"; echo " <div class=\ " col-lg-6\" style=\ " height: 100px; margin-top: 15px; font-family: arial; font-size: 32px;\">"; echo " <p style=\ " margin-top: 25px;\">{$row[2]}</p>"; echo "</div>"; echo " <button type=\ "submit\" class=\ "btn btn-primary btn-sm \" name=\ "flight_id\" value=\ "{$row[0]}\" id=\ "submitbtn{$row[0]}\" style=\ " margin-top: 15px; margin-bottom: 15px;\" onclick=\ "toggle_visibility('services')\"><a class=\ "page-scroll\" href=\ "#services\" style=\ "text-decoration: none; color: #ffffff;\">pick flight</a> </button>"; echo "</div>"; } } } ?> </form> </div> </div> </div> </section> <!-- services section --> <section id="services" class="services-section section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>tell you</h1> <form class="form-horizontal col-lg-6" role="form" style="margin-left: 23%;"> <div class="form-group"> <label for="inputdefault">name</label> <input class="form-control" id="inputdefault" type="text" placeholder="john" style="text-align: center;" name="client_name"> </div> <div class="form-group"> <label for="inputdefault">surname</label> <input class="form-control" id="inputdefault" type="text" placeholder="doe" style="text-align: center;" name="client_surname"> </div> <div class="form-group"> <label for="inputdefault">id</label> <input class="form-control" id="inputdefault" type="text" placeholder="1770423112233" style="text-align: center;" name="client_id"> </div> <div class="form-group"> <label for="inputdefault">age</label> <input class="form-control" id="inputdefault" type="text" placeholder="27" style="text-align: center;" name="client_age"> </div> <div class="form-group"> <label for="inputdefault">address</label> <input class="form-control" id="inputdefault" type="text" placeholder="bd. unirii nr. 144" style="text-align: center;" name="client_address"> </div> <div class="form-group col-xs-3" style="margin-left: 80%; margin-top: 15px;"> <button type="submit" class="btn btn-info btn-lg btn-block" name="client_flight_id" value="<?php if(isset($_get[" flight_id "])) echo $_get["flight_id "]; else echo "nullb "; ?>" id="reservationbtn" onclick="toggle_visibility('reservation')"> <a class="page-scroll" href="#reservation" style="text-decoration: none; color: #ffffff;" onclick="toggle_visibility('reservation')"><span class="glyphicon glyphicon-search"></span> neext </a> </button> <?php if(isset($_get[ "client_flight_id"])) { $client_name=$ _get[ "client_name"]; $client_surname=$ _get[ "client_surname"]; $client_id=$ _get[ "client_id"]; $client_age=$ _get[ "client_age"]; $client_address=$ _get[ "client_address"]; $client_flight_id=$ _get[ "client_flight_id"]; $query_txt="insert clients (name, surname, client_id, age, address, flight_id) values (\" {$client_name}\ ",\"{$client_surname}\ ", {$client_id}, {$client_age}, \"{$client_address}\ ", {$client_flight_id})"; $conn->query($query_txt); $client_db_id = $conn->insert_id; } ?> </div> </form> </div> </div> </div> </section> </body> </html>thanks in advance answers.
just tested code , moving script in bottom of page seemed fix problem. if using google chrome check console (ctrl + shift + i) when messing javascript. , javascript makes dom manipulation should loaded @ end of page after elements loaded or using load event must in order execute code after elements loaded.
Comments
Post a Comment