I have a navigation toggle it appears when screen is small after i included 1 php file which which is bootstrap modal, after including that my navigation toggle is not closing after opening.Im unable to close the navigation menu.
I have include both the files index as well as request which is data modal file
<?php require 'request.php';?>
<header class="navigation navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /responsive nav button -->
<!-- logo -->
<a class="navbar-brand logo" href="index.html">
<img class="logo-white" src="images/logo1.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-white" style="float:right;font-size: 30px;color: white;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
<img class="logo-default" src="images/logo2.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-default" style="float:right;font-size: 30px;color: #000;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
</a>
<!-- /logo -->
</div>
<!-- main nav -->
<nav class="collapse navbar-collapse navbar-right">
<ul id="nav" class="nav navbar-nav menu">
<li>
<a href="index.html" >Home </span></a>
</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Mobile App Development</li>
<li>Web Development</li>
<li>Software Development</li>
<li>Software Consultancy</li>
<li>Software Testing and<br> Quality Assurance</li>
</ul>
</li>
<li>Technologies</li>
<li>About Us</li>
<li>Careers</li>
<li><button type="button" data-toggle="modal" data-target="#myModal">Request A Quote</button></li>
<li>Contact Us</li>
</li>
</ul>
</nav>
<!-- /main nav -->
</div>
</header>
<this is request.php>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="form.css" >
<script src="form.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Request A Quote</h4>
</div>
<div class="panel-body">
<form id="reused_form">
<div class="form-group">
<input type="text" name="name" required class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<input type="email" name="email" required class="form-control" placeholder="Enter Email">
</div>
<div class="form-group">
<input name="phone" class="form-control" placeholder="Enter Phone Number">
</div>
<div class="form-group">
<textarea rows="3" name="message" class="form-control" placeholder="Write Your Requirements"></textarea>
</div>
<div class="form-group">
<button class="btn btn-raised btn-lg btn-warning" type="submit" style="
border: none;
padding: 15px 0;
width: 100%;
margin: 0;
background: #2b315d;
color: #fff;
border-radius: 0;
">Send</button>
</div>
</form>
<div id="error_message" style="width:100%; height:100%; display:none; ">
<h4>
Error
</h4>
Sorry there was an error sending your form.
</div>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h2 style="color:#000; font-size:22px;text-align:center;">Thank You! <br>Your Message was Sent Successfully.<br>One of our representatives will contact you shortly.</h2>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I think require.php breaks the html including head section again and opening and closing html and body tags.
Maybe this will work ?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="form.css" >
<script src="form.js"></script>
</head>
<body>
<header class="navigation navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /responsive nav button -->
<!-- logo -->
<a class="navbar-brand logo" href="index.html">
<img class="logo-white" src="images/logo1.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-white" style="float:right;font-size: 30px;color: white;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
<img class="logo-default" src="images/logo2.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-default" style="float:right;font-size: 30px;color: #000;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
</a>
<!-- /logo -->
</div>
<!-- main nav -->
<nav class="collapse navbar-collapse navbar-right">
<ul id="nav" class="nav navbar-nav menu">
<li>
<a href="index.html" >Home </span></a>
</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Mobile App Development</li>
<li>Web Development</li>
<li>Software Development</li>
<li>Software Consultancy</li>
<li>Software Testing and<br> Quality Assurance</li>
</ul>
</li>
<li>Technologies</li>
<li>About Us</li>
<li>Careers</li>
<li><button type="button" data-toggle="modal" data-target="#myModal">Request A Quote</button></li>
<li>Contact Us</li>
</li>
</ul>
</nav>
<!-- /main nav -->
</div>
</header>
<?php require 'request.php';?>
</body>
</html>
below request PHP
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Request A Quote</h4>
</div>
<div class="panel-body">
<form id="reused_form">
<div class="form-group">
<input type="text" name="name" required class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<input type="email" name="email" required class="form-control" placeholder="Enter Email">
</div>
<div class="form-group">
<input name="phone" class="form-control" placeholder="Enter Phone Number">
</div>
<div class="form-group">
<textarea rows="3" name="message" class="form-control" placeholder="Write Your Requirements"></textarea>
</div>
<div class="form-group">
<button class="btn btn-raised btn-lg btn-warning" type="submit" style="
border: none;
padding: 15px 0;
width: 100%;
margin: 0;
background: #2b315d;
color: #fff;
border-radius: 0;
">Send</button>
</div>
</form>
<div id="error_message" style="width:100%; height:100%; display:none; ">
<h4>
Error
</h4>
Sorry there was an error sending your form.
</div>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h2 style="color:#000; font-size:22px;text-align:center;">Thank You! <br>Your Message was Sent Successfully.<br>One of our representatives will contact you shortly.</h2>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Related
I am trying to implement the login and signup forms of my site as a bootstrap modal, but the modal is not showing up at all after clicking the link inside the navbar. I have encountered on couple of similar questions on this topic before, but none of the solutions seem to be working for me. JQuery is included so I have no clue what could be causing modal to be shy to show up. Can anyone help, please? Code is as follows:
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="Mc8MyxbLVQ93MY1dMlbE6y9NXzlTiVrVB80P0lYl">
<link rel="stylesheet" href="http://mypage.me/css/app.css">
<title>MyPage</title>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/images/ukay3.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar { margin-bottom: 0 !important; }
</style>
</head>
<body>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Logi</a>
<!-- Old Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Section: Logo and collapse button -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="display:block; margin:7px; margin-right:20px" href="/ " class="pull-left"><img
src="/images/logosmall.png" alt="Not found!"></a>
</div><!-- End Section: Logo and collapse button -->
<!-- Section: Collapsible part of Navbar -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Market</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/about">About<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Services</li>
<li>Contact</li>
</ul>
<!-- Section: Right side of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal"><span
class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://mypage.me/register"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
</li>
</ul><!-- Right Side of Navbar --><!-- End Section: Right side of Navbar -->
</div><!-- End Section: Collapsible part of Navbar -->
</div>
</nav>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End --> <div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to MyPage.com</h1>
</div>
</div>
</body>
</html>
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="Mc8MyxbLVQ93MY1dMlbE6y9NXzlTiVrVB80P0lYl">
<link rel="stylesheet" href="http://mypage.me/css/app.css">
<title>MyPage</title>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/images/ukay3.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar { margin-bottom: 0 !important; }
</style>
</head>
<body>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Logi</a>
<!-- Old Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Section: Logo and collapse button -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="display:block; margin:7px; margin-right:20px" href="/ " class="pull-left"><img
src="/images/logosmall.png" alt="Not found!"></a>
</div><!-- End Section: Logo and collapse button -->
<!-- Section: Collapsible part of Navbar -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Market</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/about">About<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Services</li>
<li>Contact</li>
</ul>
<!-- Section: Right side of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="#loginModal" data-toggle="modal" data-target="#loginModal"><span
class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://mypage.me/register"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
</li>
</ul><!-- Right Side of Navbar --><!-- End Section: Right side of Navbar -->
</div><!-- End Section: Collapsible part of Navbar -->
</div>
</nav>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End --> <div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to MyPage.com</h1>
</div>
</div>
</body>
</html>
Seems like your cdn is not supporting your code i have added cdn of bootstrap4 below
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="Mc8MyxbLVQ93MY1dMlbE6y9NXzlTiVrVB80P0lYl">
<link rel="stylesheet" href="http://mypage.me/css/app.css">
<title>MyPage</title>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/images/ukay3.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar { margin-bottom: 0 !important; }
</style>
</head>
<body>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Logi</a>
<!-- Old Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Section: Logo and collapse button -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="display:block; margin:7px; margin-right:20px" href="/ " class="pull-left"><img
src="/images/logosmall.png" alt="Not found!"></a>
</div><!-- End Section: Logo and collapse button -->
<!-- Section: Collapsible part of Navbar -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Market</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/about">About<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Services</li>
<li>Contact</li>
</ul>
<!-- Section: Right side of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal"><span
class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://mypage.me/register"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
</li>
</ul><!-- Right Side of Navbar --><!-- End Section: Right side of Navbar -->
</div><!-- End Section: Collapsible part of Navbar -->
</div>
</nav>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End --> <div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to MyPage.com</h1>
</div>
</div>
</body>
</html>
Add the bootstrap css into the head of your html: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>MyPage</title>
<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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Login</a>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End --> <div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to MyPage.com</h1>
</div>
</div>
</body>
</html>
Just add this in your header.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
try to import bootstarp css files to the head before the app.css.
something like this
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="Mc8MyxbLVQ93MY1dMlbE6y9NXzlTiVrVB80P0lYl">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="http://mypage.me/css/app.css">
<title>MyPage</title>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<style>
body,
html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/images/ukay3.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar {
margin-bottom: 0 !important;
}
</style>
</head>
<body>
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal">Logi</a>
<!-- Old Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Section: Logo and collapse button -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="display:block; margin:7px; margin-right:20px" href="/ " class="pull-left"><img
src="/images/logosmall.png" alt="Not found!"></a>
</div><!-- End Section: Logo and collapse button -->
<!-- Section: Collapsible part of Navbar -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Market</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/about">About<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Services</li>
<li>Contact</li>
</ul>
<!-- Section: Right side of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal"><span
class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://mypage.me/register"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
</li>
</ul><!-- Right Side of Navbar -->
<!-- End Section: Right side of Navbar -->
</div><!-- End Section: Collapsible part of Navbar -->
</div>
</nav>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End -->
<div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to MyPage.com</h1>
</div>
</div>
</body>
</html>
Link bootstrap.min.css file in you current code and define proper classes on modal html section. Check below code it is working fine...
<!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" />
<!-- CSRF Token -->
<meta name="csrf-token" content="Mc8MyxbLVQ93MY1dMlbE6y9NXzlTiVrVB80P0lYl" />
<link rel="stylesheet" href="http://mypage.me/css/app.css">
<title>MyPage</title>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("/images/ukay3.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar { margin-bottom: 0 !important; }
</style>
</head>
<body>
<!-- Old Navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Section: Logo and collapse button -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="display:block; margin:7px; margin-right:20px" href="/ " class="pull-left"><img
src="/images/logosmall.png" alt="Not found!"></a>
</div><!-- End Section: Logo and collapse button -->
<!-- Section: Collapsible part of Navbar -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Market</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/about">About<span class="caret">
</span></a>
<ul class="dropdown-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Services</li>
<li>Contact</li>
</ul>
<!-- Section: Right side of Navbar -->
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#loginModal"><span
class="glyphicon glyphicon-log-in"></span> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://mypage.me/register"><span class="glyphicon
glyphicon-user"></span> Sign Up</a>
</li>
</ul><!-- Right Side of Navbar --><!-- End Section: Right side of Navbar -->
</div><!-- End Section: Collapsible part of Navbar -->
</div>
</nav>
<!-- Login Modal -->
<div class="modal" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal End --> <div class="bg"></div>
<div class="container">
<div class="jumbotron text-center">
<h1>Welcome to Mohd. Aslam</h1>
</div>
</div>
</body>
</html>
I have literally tried every solution out there on the Internet and I still can't manage to figure out why my jQuery is not firing.
The main aim is to show a modal when clicking on the "addUser-div", but when I click the div nothing happens.
I used the EXACT SAME code on page that only has HTML ( no php ) and jQuery fires just fine, i just can't manage to find out what the problem is, this occurs with all the jQuery functions, thought i can see that my js is properly loaded to the page.
Here is the users.php code :
<?php
session_start();
if (isset($_SESSION['role']) && $_SESSION['role'] == 1) {
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" />
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../css/styles.css" />
<script type="text/javascript" src="../script/date_time.js"></script>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script type="text/javascript">
$('.addUser-div').click(function() {
$('.modal').modal('show')
})
</script>
</head>
<title>Espace de Connexion</title>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark static-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="../images/Logoestia.png" class="img-responsive" width="150" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item "><a class="nav-link" href="./panel.php">Tableau De Bord
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item "><a class="nav-link" href="./armoires.php">Gestion des Armoires
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item "><a class="nav-link" href="./outils.php">Gestion des Outils
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item active"><a class="nav-link" href="./users.php">Gestion Employés
<span class="sr-only">(current)</span>
</a></li>
<li class="nav-item"><a class="nav-link" href="../logout.php">Déconnexion
<span class="sr-only">(current)</span>
</a></li>
</ul>
</div>
</div>
</nav>
</head>
<body>
<h2 class="display-4">Gestion utilisateurs</h2>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="container">
<div class="row">
<INPUT type=button value="Retour " onClick="history.back();">
<div class="col-md-6 addUser-div" style="cursor: pointer;">
<div class="card-counter info">
<i class="fa fa-users"></i>
<span class="count-numbers">
<?php
session_start();
echo $_SESSION["userCount"];?>
</span>
<span class="count-name">Ajouter un Utilisateur</span>
</div>
</div>
<div class="col-md-6" style="cursor: pointer;" onclick="window.location='../panel/prep.jsp';">
<div class="card-counter danger">
<i class="fa fa-trash"></i> <span class="count-name">Supprimer
un utilisateur</span>
</div>
</div>
</div>
</div>
<div class="modal modal-dialog" id="infos">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Ajouter un Utilisateur</h4>
</button>
</div>
<div class="modal-body">
<div style="display: flex; width: 100%;">
<form action="./CreaterUserServlet">
<div style="width: 100%;">
<p>Nom</p>
<input type="text" name="n" placeholder="Nom" required="required" />
</div>
<div style="width: 100%;">
<p>Login</p>
<input type="text" name="u" placeholder="Identifiant" required="required" />
</div>
<div style="width: 100%;">
<p>Mot de passe</p>
<input type="password" name="p" placeholder="Mot de Passe" required="required" />
</div>
<div style="width: 100%;">
<p>Role</p>
<select name="role-select">
<option value="">Veuillez choisir..</option>
<option value="1">ADMIN</option>
<option value="2">PREPARATEUR</option>
<option value="3">COMMERCIAL</option>
<option value="4">EXPEDITEUR</option>
</select>
</div>
<p>
<input type="submit" class="btn btn-primary btn-block btn-large" value="Ajouter">
</p>
</form>
</div>
</div>
</div>
</div>
<?php include 'usersTable.php';?>
</body>
<footer>
<p>M.Ramzi</p>
</footer>
</html>
<?php
}else {
header("location: ../index.php");
}
?>
You're trying to bind the click event to the div before the div exists in the DOM. Wrap the event listener in a document ready:
$(document).ready(function() {
$('.addUser-div').click(function() {
$('.modal').modal('show');
})
});
Also, you're loading the bootstrap library twice; that can't be good. Remove one of these lines:
<script src="../js/bootstrap.min.js"></script>
https://imgur.com/a/PYokL
Hello,I am aware that there are some duplicate column in my database at the moment as I encountered some errors I'm just trying to make my website functional at the moment. I am currently working on displaying the highest bid for a listing.I am confused as to how I would find the highest bid for each specific listing as the bids all seem to bundle together into one table.I was wondering if anyone could help me do this?
<?php
require 'config.php';
if(isset($_POST['submit']))
{
$valueToSearch = $_POST['valueToSearch'];
// search in all table columns
// using concat mysql function
$query = "SELECT * FROM listings` WHERE CONCAT(`location`, `description`, `price`, `date`,`title`) LIKE '%".$valueToSearch."%'";
$query2 = "SELECT `listID` FROM listings"
$search_result = filterTable($query);
}
else {
$query = "SELECT * FROM `listings`";
$search_result = filterTable($query);
}
// function to connect and execute the query
function filterTable($query)
{
$conn = mysqli_connect("localhost", "root", "", "auction");
$filter_Result = mysqli_query($conn, $query);
return $filter_Result;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bid4MyJob</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Bid4MyJob">
<meta name="author" content="James Wood">
<!-- CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/main.css" rel="stylesheet" type="text/css">
<link href="assets/css/my-custom-styles.css" rel="stylesheet" type="text/css">
<!-- IE 9 Fallback-->
<!--[if IE 9]>
<link href="assets/css/ie.css" rel="stylesheet">
<![endif]-->
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic,400italic,700,400,300' rel='stylesheet' type='text/css'>
<!-- FAVICONS -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/repute144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/repute114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/repute72x72.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/repute57x57.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>
<body>
<!-- WRAPPER -->
<div class="wrapper">
<!-- NAVBAR -->
<nav class="navbar navbar-default " role="navigation">
<div class="container">
<!-- TOPBAR -->
<div class="topbar">
<ul class="list-inline top-nav">
<li>
<div class="btn-group">
<button type="button" class="btn btn-link dropdown-toggle btn-xs" data-toggle="dropdown"><img src="assets/img/flags/United-Kingdom.png" alt="United Kingdom"> United Kingdom <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right country-selector" role="menu">
<li>
<img src="assets/img/flags/United-Kingdom.png" alt="United Kingdom"> United Kingdom
</li>
<li>
<img src="assets/img/flags/Japan.png" alt="Japan"> Japan
</li>
<li>
<img src="assets/img/flags/China.png" alt="China"> China
</li>
<li>
<img src="assets/img/flags/Germany.png" alt="Germany"> Germany
</li>
</ul>
</div>
</li>
<li>Help</li>
<li>Support</li>
</ul>
<div class="searchbox">
<form method="post">
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="search ...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
</div>
</div>
<!-- END TOPBAR -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle Navigation</span>
<i class="fa fa-bars"></i>
</button>
<a href="index.html" class="navbar-brand navbar-logo navbar-logo-bigger">
</a>
</div>
<!-- MAIN NAVIGATION -->
<div id="main-nav" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
HOME
</li>
<li>
HOW IT WORKS
</li>
<li>
POST JOB
</li>
<li>
FIND JOB
</li>
<li>
SIGN UP
</li>
<li>
LOGIN
</li>
</ul>
</div>
<!-- END MAIN NAVIGATION -->
</div>
</nav>
<!-- END NAVBAR -->
<!-- BREADCRUMBS -->
<div class="page-header">
<div class="container">
<h1 class="page-title pull-left">Find Job</h1>
<ol class="breadcrumb">
<li>Home</li>
<li class="active">Find Job</li>
</ol>
</div>
</div>
<!-- END BREADCRUMBS -->
<!-- PAGE CONTENT -->
<div class="page-content page-search-result">
<div class="container">
<!-- Search Form -->
<form class="form form-horizontal" action="findjob.php" method="post">
<div class="input-group input-group-lg">
<div class="input-group-btn">
<!--<select id="search-type-select" name="valueToSearch" class="multiselect multiselect-single-lg search-type-select">
<option value="all" selected="selected">All</option>
<option value="page">Page</option>
<option value="task">Task</option>
<option value="user">User</option>
<option value="image">Image</option>
</select>
</div>-->
<input class="form-control input-lg" type="text" name="valueToSearch" placeholder="type keyword ..." />
<span class="input-group-btn">
<button type="submit" name= "submit" value="Search" class="btn btn-primary btn-lg"><i class="icon ion-android-search"></i> Go</button>
</span>
</div>
</form>
<!-- End Search Form -->
</div>
</div>
<div>
<table>
<tr>
<th>Title</th>
<th>Location</th>
<th>Description</th>
<th>Budget</th>
<th>Due date</th>
</tr>
<!-- populate table from mysql database -->
<?php while($row = mysqli_fetch_array($search_result)):?>
<tr>
<td><?php echo $row['title'];?></td>
<td><?php echo $row['location'];?></td>
<td><?php echo $row['description'];?></td>
<td><?php echo $row['price'];?></td>
<td><?php echo $row['date'];?></td>
<td><form method="post" action="actionpage5.php" class="form-horizontal">
<?php //echo _("Enter ") . ' ' . $last_bid_plus . ' ' . _('or more'); ?>
<div class="input-group ">
<input type="number" value="bid" class="form-control" name="bid" id= "bid" required/>
</div>
<br/>
<input type="submit" name="sb_bid" value="<?php echo _('Place your Bid'); ?>"
class="btn btn-xlarge btn-block btn-primary"/>
<br/>
</form></td>
</tr>
<?php endwhile;?>
</table>
</div>
<!-- END PAGE CONTENT -->
<!-- FOOTER -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- COLUMN 1 -->
<h3 class="sr-only">ABOUT US</h3>
<img src="assets/img/logo/repute-logo-light.png" class="logo" alt="Repute">
<p>Proactively aggregate B2B initiatives before extensive channels. Monotonectally extend interactive methods of empowerment through excellent applications. Rapidiously synergize visionary products with sticky technology.</p>
<br>
<address class="margin-bottom-30px">
<ul class="list-unstyled">
<li>Unit 5, Block B Nesfield Road
<br/> Colchester, Essex CO4 3ZL 222222</li>
<li>Phone: 01206 588 000</li>
<li>Email: sales#universalwebdesign.co.uk</li>
</ul>
</address>
<!-- END COLUMN 1 -->
</div>
<div class="col-md-4">
<!-- COLUMN 2 -->
<h3 class="footer-heading">USEFUL LINKS</h3>
<div class="row margin-bottom-30px">
<div class="col-xs-6">
<ul class="list-unstyled footer-nav">
<li>About Us</li>
<li>News</li>
<li>Community</li>
<li>Career</li>
<li>Blog</li>
</ul>
</div>
<div class="col-xs-6">
<ul class="list-unstyled footer-nav">
<li>Press Kit</li>
<li>FAQ</li>
<li>Terms</li>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<!-- END COLUMN 2 -->
</div>
<div class="col-md-4">
<!-- COLUMN 3 -->
<div class="newsletter">
<h3 class="footer-heading">NEWSLETTER</h3>
<p>Get the latest update from us by subscribing to our newsletter.</p>
<form class="newsletter-form" method="POST">
<div class="input-group input-group-lg">
<input type="email" class="form-control" name="email" placeholder="youremail#domain.com">
<span class="input-group-btn"><button class="btn btn-primary" type="button"><i class="fa fa-spinner fa-spin"></i><span>SUBSCRIBE</span></button>
</span>
</div>
<div class="alert"></div>
</form>
</div>
<div class="social-connect">
<h3 class="footer-heading">GET CONNECTED</h3>
<ul class="list-inline social-icons">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-rss"></i></li>
</ul>
</div>
<!-- END COLUMN 3 -->
</div>
</div>
</div>
<!-- COPYRIGHT -->
<div class="text-center copyright">
©2018 Bid4MyJob. All Rights Reserved.
</div>
<!-- END COPYRIGHT -->
</footer>
<!-- END FOOTER -->
</div>
<!-- END WRAPPER -->
<!-- JAVASCRIPTS -->
<script src="assets/js/jquery-2.1.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins/bootstrap-multiselect/bootstrap-multiselect.js"></script>
<script src="assets/js/plugins/autohidingnavbar/jquery.bootstrap-autohidingnavbar.min.js"></script>
<script src="assets/js/repute-scripts.js"></script>
</body>
</html>
$query = "SELECT MAX(bid) FROM listingsWHERE CONCAT(location,description,price,date,title`) LIKE '%".$valueToSearch."%' GROUP BY listing"
I just put contact form in HTML one page site, but after I add contact code to HTML index file, when I open my site my page loads not on top banner, logo etc., but on contact form.
<!-- contact pradzia -->
<form id="contact" action="" method="post">
<fieldset>
<input placeholder="Jūsų vardas" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Jūsų el. pašto adresas" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Jūsų tel. nr." type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input placeholder="Tema" type="url" tabindex="4" required>
</fieldset>
<fieldset>
<textarea placeholder="Rašykite žinute čia..." tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Siųsti</button>
</fieldset>
</form>
<!-- contact pabaiga -->
</div>
<?php
require __DIR__ . '/../app/src/app.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gintaro drožyba</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/> <!-- ikonele -->
</head>
<body>
<!-- Navigacija -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Logo ir responsive toggle -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<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" href="#">
<span class="glyphicon glyphicon-fire"></span>
Gintaro drožyba
</a>
</div>
<!-- Navbar linkai -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">
Pagrindinis
</li>
<li>
Galerija
</li>
<li class="dropdown">
Darbai <span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="about-us">
<li>Paveikslai</li>
<li>Skulptūros</li>
<li>Baldai</li>
<li>Suvenyrai</li>
<li>Kita</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<!-- baneris -->
<div class="jumbotron feature">
<div class="container">
<h1><span class="glyphicon glyphicon-equalizer"></span> Gintaro Černiaus drožyba</h1>
<p>Medžio darbai, drožyba, mediniai baldai, paveikslai, skulptūros</p>
<p><a class="btn btn-primary" href="#">Plačiau</a></p>
</div>
</div>
<!-- heading -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="text-center">Ilgametė patirtis</h1>
<p class="lead text-center">Kažkokia informacija. Pasirinkite:</p>
</div>
</div>
</div>
<!-- darbai -->
<div class="container-fluid">
<div class="row promo">
<a href="#">
<div class="col-md-4 promo-item item-1">
<h3>
Galerija
</h3>
</div>
</a>
<a href="#">
<div class="col-md-4 promo-item item-2">
<h3>
Kontaktai
</h3>
</div>
</a>
<a href="#">
<div class="col-md-4 promo-item item-3">
<h3>
Užsakymas
</h3>
</div>
</a>
</div>
</div><!-- /.container-fluid -->
<!-- parduodami darbai -->
<div class="container">
<h1 class="text-center">Padaryti darbai pardavimui</h1>
<div class="row">
<!-- darbas 1 -->
<div class="col-sm-6 col-md-3">
<div class="thumbnail featured-product">
<a href="#">
<img src="images/foto1.jpg" alt="">
</a>
<div class="caption">
<h3>Paveikslas</h3>
<p>Kažkoks tekstas</p>
<p class="price">95.99 EUR</p>
<!-- mygtukas bootstrap -->
<div class="input-group">
<input type="number" class="form-control" value="1">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
Pridėti į krepšelį
</button>
</span>
</div>
</div>
</div>
</div>
<!-- darbas 2 -->
<div class="col-sm-6 col-md-3">
<div class="thumbnail featured-product">
<a href="#">
<img src="images/foto2.jpg" alt="">
</a>
<div class="caption">
<h3>Paveikslas 2</h3>
<p>Kažkoks tekstas</p>
<p class="price"><s>85.95 EUR</s>65.95 EUR</p>
<!-- mygtukas bootstrap -->
<div class="input-group">
<input type="number" class="form-control" value="1">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
Pridėti į krepšelį
</button>
</span>
</div>
</div>
</div>
</div>
<!-- darbas 3 -->
<div class="col-sm-6 col-md-3">
<div class="thumbnail featured-product">
<a href="#">
<img src="images/foto3.jpg" alt="">
</a>
<div class="caption">
<h3>Paveikslas 3</h3>
<p>Kažkoks tekstas</p>
<p class="price">145.99 EUR</p>
<!-- mygtukas bootstrap -->
<div class="input-group">
<input type="number" class="form-control" value="1">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
Pridėti į krepšelį
</button>
</span>
</div>
</div>
</div>
</div>
<!-- darbas 4 -->
<div class="col-sm-6 col-md-3">
<div class="thumbnail featured-product">
<a href="#">
<img src="images/foto3.jpg" alt="">
</a>
<div class="caption">
<h3>Paveikslas 3</h3>
<p>Kažkoks tekstas</p>
<p class="price">199.99 EUR</p>
<!-- mygtukas bootstrap -->
<div class="input-group">
<input type="number" class="form-control" value="1">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
Pridėti į krepšelį
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
<div class="container text-center">
<div class="container">
<h1>Apie mane</h1>
<p class="lead">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
<img class="img-responsive img-circle center-block" src="images/service.jpg" alt="">
</div><!--/.container-->
<!-- contact pradzia -->
<form id="contact" action="" method="post">
<fieldset>
<input placeholder="Jūsų vardas" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Jūsų el. pašto adresas" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Jūsų tel. nr." type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input placeholder="Tema" type="url" tabindex="4" required>
</fieldset>
<fieldset>
<textarea placeholder="Rašykite žinute čia..." tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Siųsti</button>
</fieldset>
</form>
<!-- contact pabaiga -->
<!-- footeris -->
<footer>
<h1 class="text-center">Mane rasite</h1>
<!-- Map -->
<script id="map" src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyA4G64jXEiyPLOA1XKXDkvl901-khuxrao'></script><div style='overflow:hidden;height:423px;width:1401px;'><div id='gmap_canvas' style='height:423px;width:1401px;'></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div> <a href='https://embedmaps.net'>add google map</a> <script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=0884e686c4548d57daed57d5f4148e6ad91ea399'></script><script type='text/javascript'>function init_map(){var myOptions = {zoom:17,center:new google.maps.LatLng(55.3386064,26.155018400000017),mapTypeId: google.maps.MapTypeId.SATELLITE};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(55.3386064,26.155018400000017)});infowindow = new google.maps.InfoWindow({content:'<strong>Mane rasite</strong><br>Turistų g. 20<br>30136 Ignalina<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>
<div class="container">
<div class="row">
<div class="col-sm-12 footer-info-item text-center">
<h2>Susisiekite</h2>
<p class="lead"><span class="glyphicon glyphicon-phone-alt"></span> +370 672 07463</p>
<p class="lead"><span class="glyphicon glyphicon-envelope"></span> drozyba#gmail.com</p>
</div>
</div>
</div>
<!-- Footer Links -->
<div class="footer-info">
<div class="container">
<div class="row">
<div class="col-sm-4 footer-info-item">
<h3>Informacija</h3>
<ul class="list-unstyled">
<li>Apie mane</li>
<li>Galerija</li>
<li>Kontaktai</li>
<li>Paslaugos</li>
</ul>
</div>
<div class="col-sm-4 footer-info-item">
<h3>My Account</h3>
<ul class="list-unstyled">
<li>Sign In</li>
<li>View Cart</li>
<li>My Wishlist</li>
<li>Track My Order</li>
<li>Help</li>
</ul>
</div>
<div class="col-sm-4 footer-info-item">
<h3><span class="glyphicon glyphicon-list-alt"></span> Newsletter</h3>
<p>Sign up for exclusive offers.</p>
<div class="input-group">
<input type="email" class="form-control" placeholder="Enter your email address">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
Subscribe!
</button>
</span>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</div>
<!-- Copyright -->
<div class="small-print">
<div class="container">
<p>Copyright © drozyba.lt 2017 </p>
</div>
</div>
</footer>
<!-- jQuery pirmas :) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrapo JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport failas -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Try to remove the autofocus attribute form your first input (:
My website is running with phpstorm's editor's localhot with any error .
http://localhost:63342/html/Bag%C4%B1s/bagisyap.html
on the other hand ; if i want to start with only my localhost
http://localhost/Bag%C4%B1s/index.html
i can not connect bootstrap 's argumant . how i can i solve that ?
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Bağış Sitesi</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="../Bagıs/public/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="../Bagıs/public/css/main.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="../Bagıs/public/css/owl.carousel.css">
<link rel="stylesheet" href="../Bagıs/public/css/owl.theme.css">
</head>
<body id="index">
<div class="container main-nav">
<div class="row margin-bottom-zero">
<div class="col-xs-12">
<nav class="navbar">
<ul class="nav navbar-nav">
<li class="active"><i class="glyphicon glyphicon-home"></i> Anasayfa</li>
<li>Neden yardım etmeliyim</li>
<li>Bağış Yap</li>
<li>İhtiyaç sahipleri</li>
<li>Hakkımızda</li>
<li>İletişim</li>
</ul>
<ul class="nav navbar-nav navbar-right user-login-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<i class="glyphicon glyphicon-user"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Giriş</li>
<li>Kayıt Ol</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="row panel">
<div class="col-xs-12">
<img class="img-responsive" src="../Bagıs/public/img/logo.png" alt="Logo">
</div>
</div>
</div>
<div class="container">
<div class="row white-box-style min-row-height">
<form action="bagısyap.php" method="POST">
<div class="col-xs-4 choose-category">
<h4>Kategori Seçin</h4>
<select class="form-control" name="category">
<option value="0">Kategori Seçin</option>
<option value="1">Elbise</option>
<option value="2">Teknoloji</option>
<option value="3">Mobilya</option>
<option value="3">Küçük Ev Aletleri</option>
</select>
<select class="form-control" name="category">
<option value="0">Alt Kategori Seçin</option>
<option value="1">Telefon</option>
<option value="2">Laptop</option>
<option value="3">Monitör</option>
<option value="3">Telefon Kılıfları</option>
</select>
</div>
<div class="col-xs-8">
<div class="row">
<h4> </h4>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img class="img-responsive" src="../Bagıs/public/img/empty-image.jpg" alt="...">
</a>
</div>
<div class="col-xs-9">
<textarea name="desc" class="form-control" rows="6" placeholder="Ürün hakkında kısa bir açıklama"></textarea>
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="1">
Bu ürünü ismimi gizleyerek (anonim olarak) ekleyin
</label>
</div>
<button type="submit" class="btn btn-primary">Tamamla</button>
</div>
</form>
</div>
</div>
<div class="modal fade" id="login-modal-box" role="dialog" aria-labelledby="gridSystemModalLabel" aria-hidden="true">
<form action="#giris-kontrol" method="POST">
<div class="modal-dialog user-login-box-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Kullanıcı Giriş Paneli</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="form-group">
<label for="exampleInputEmail1">Eposta Adresiniz</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Şifre</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Beni hatırla
</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
Giriş Yap
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</form>
</div><!-- /.modal -->
<!-- Include Jquery -->
<script src="../Bagıs/public/js/jquery-1.11.1.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="../Bagıs/public/js/bootstrap.min.js"></script>
<script src="../Bagıs/public/js/owl.carousel.min.js"></script>
<script src="../Bagıs/public/js/script.js"></script>
</body>
</html>