How do I send HTML email so that it will look nice with Bootstrap 4? When I send mail it looks nice, but when receiver gets it it looks bad.
here's code:
https://jsfiddle.net/bluemilkyh/6m4v9pnf/1/
I'd also like to make footer form (it's about news subscription) when they fill the form and press the button it would save to my database (I have database already which is not localhost...).
code:
<!DOCTYPE html>
<html>
<head>
<title>Stanovanja Fink</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="http://localhost/stanovanjefink/index.php">Stanovanja Fink</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="http://localhost/stanovanjefink/stanovanjeanja.php">Stanovanje Anja</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/stanovanjefink/stanovanjealjaz.php">Stanovanje Aljaž</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/stanovanjefink/kontakt.php">Kontakt</a>
</li>
</ul>
</form>
</div>
</nav>
<hr>
<body>
<div class="p-3 mb-2 bg-light text-dark container text-center d-flex flex-column align-items-center">
<h2 form-inline justify-content-center>Rezervacija Stanovanje Aljaz</h2>
<br>
<br>
<label ><b>Ime: </b></label>
<input type="text" class=" form-control col-sm-6 " disabled value="" >
<label><b>Priimek: </b></label>
<input type="text" class="form-control col-sm-6 " disabled value="" ><label><b>Telefon: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
<label><b>E-mail: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
<label><b>Prihod: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
<label><b>Odhod: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
<label><b>Cena: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
<br>
<h3>Informacije </h3>
<p><i class="gdlr-icon fa fa-map-marker"></i><b> Lokacija:</b> Pod Lipovim trotom</p>
<p><i class="gdlr-icon fa fa-phone"></i> <b>Telefon:</b> +36 41 8813 49219 </p>
<p><i class="gdlr-icon fa fa-envelope"></i> <b>Email :</b> +36 41 88213 49912 </p>
<br>
</div>
</body>
<footer class="bg-dark text-center">
<div class="container p-4">
<form action="kontakt.php">
<div class="row d-flex justify-content-center">
<div class="col-auto">
<p class="pt-2" style="color:white;">
<b>Naroci se na novice: </b>
</p>
</div>
<div class="col-md-5 col-12">
<div class="form-outline form-white mb-4">
<input type="email" placeholder="email" name="novice" class="form-control" required>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-outline-light mb-4">
Narocite se
</button>
</div>
</div>
<section class="mb-4">
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-facebook-f"></i
></a>
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-twitter"></i
></a>
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-instagram"></i></a>
</section>
</form>
</div>
<div class="text-center p-3" style="background-color:black; color:gray;">
© 2020 Stanovanja Fink
</div>
</div>
</footer>`
I am guessing you are using bootstrap. Use bootstrap for e-mail instead. Web frameworks will NOT play nicely with e-mail. HTML e-mail have different rules and best practices on how to develop markup for it, than classic web sites.
Possibly related:
Look for the top answer here to get a general idea about developing for e-mail: CSS Email Template at Outlook does not display correctly
Here for basic layout: How to make a fluid width email with a max width
Related
I need to save my form without reloading the page, I have tried all the methods...but I'm beginner at Ajax and I can't figure it out how to do that.
Here is the most relevant link, but when I press submit button, doesn't working.
How to send data without refreshing page in laravel?
My view
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content" style="top: 50px">
<div class="modal-header" style="border-bottom: none">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<section>
<div class="wizard col-md-6" style="right: 5px;margin: 0px auto">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist" style="margin: 0px auto">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="icon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="icon-note"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="icon-check"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form" action="{{ action('CareerSolutionController#careerReport') }}" method="post">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="user_id" value="{{ Sentinel::check()->id }}">
<input type="hidden" name="user_id_posted" value="{{ $career_solution->user->id }}">
<input type="hidden" name="career_solution_id" value="{{ $career_solution->id}} ">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3>Why are you reporting this content :</h3>
<ul style="list-style: none">
<li>
<input type="radio" id="box-9" name="why_reporting" value="Spam">
<label for="box-9">Spam</label>
<div class="check"></div>
<small id="box-9-s" style="display: none">I consider this content irrelevant and annoying.</small>
</li>
<li>
<input type="radio" id="box-10" name="why_reporting" value="Fake Profile">
<label for="box-10">Fake Profile</label>
<div class="check"><div class="inside"></div></div>
<small id="box-10-s" style="display: none">This content was posted by way of a profile that clearly doesn't represent a real person.
</small>
</li>
<li>
<input type="radio" id="box-11" name="why_reporting" value="Advertising">
<label for="box-11">Advertising</label>
<div class="check"><div class="inside"></div></div>
<small id="box-11-s" style="display: none">This content is or contains advertising.
</small>
</li>
<li>
<input type="radio" id="box-12" name="why_reporting" value="Untrustworthy source">
<label for="box-12">Untrustworthy source</label>
<div class="check"><div class="inside"></div></div>
<small id="box-12-s" style="display: none">This content is from an untrustworthy source and contains unverifiable statements.
</small>
</li>
<li>
<input type="radio" id="box-13" name="why_reporting" value="Defamatory">
<label for="box-13">Defamatory</label>
<div class="check"><div class="inside"></div></div>
<small id="box-13-s" style="display: none">The reported content is insulting or defamatory to me or other people.
</small>
</li>
<li>
<input type="radio" id="box-14" name="why_reporting" value="Violence or pornography">
<label for="box-14">Violence or pornography</label>
<div class="check"><div class="inside"></div></div>
<small id="box-14-s" style="display: none">This content contains violence or pornography.
</small>
</li>
<li>
<input type="radio" id="box-15" name="why_reporting" value="Violates IP rights">
<label for="box-15">Violates IP rights</label>
<div class="check"><div class="inside"></div></div>
<small id="box-15-s" style="display: none">This content includes third-party content (e.g. an image) posted under their own name.
</small>
</li>
<li>
<input type="radio" id="box-16" name="why_reporting" value="Promotes structural distribution measures">
<label for="box-16">Promotes structural distribution measures</label>
<div class="check"><div class="inside"></div></div>
<small id="box-16-s" style="display: none">This content promotes a chain distribution system, multilevel selling or pyramid sales.
</small>
</li>
<li >
<input type="radio" id="box-17" name="why_reporting" value="Other">
<label for="box-17" id="other">Other</label>
<div class="check"><div class="inside"></div></div>
<div class="form-group" id="mydiv" style="display: none">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Please let us know why you're reporting this content:
" style="resize: none" name="why_reporting_message"></textarea>
</div>
</li>
</ul>
<ul class="list-inline pull-right">
<li><button style="background-color: #18ba9b;border-color: white" type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Why would you like to report this?</h3>
<div class="form-group">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5" style="resize: none" placeholder="
Please let us know why you're reporting this content:" name="additional_message"></textarea>
</div>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step">Skip</button></li>
<li><button style="background-color: #18ba9b;border-color: white" type="button" class="btn btn-primary btn-info-full next-step" id="save">Submit your report</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h2 class="title-box-v2" style="font-size: 17px !important;line-height: 35px">We'll look into this as soon as possible. Thanks for helping us improve the quality of content on Workstickers.</h2>
<p style="text-align: center">You have successfully completed all steps.Flagged content and users are reviewed by Workstickers staff 24 hours a day, seven days a week to determine whether they violate Community Guidelines. Accounts are penalized for Community Guidelines violations, and serious or repeated violations can lead to account termination.
</p>
<div style="text-align: center;margin-top: 50px">If you've changed your mind - Cancel report</div>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END MY MODAL -->
Ajax
<script>
$(document).on("click",".save",function(){
e.preventDefault(); //Prevent page from submiting
$(document).on("click", ".save", function() {
$.ajax({
type: "post",
url: 'career_report',
data: $(".why_reporting").serialize(),
success: function(store) {
},
error: function() {
}
});
});
});
</script>
My controller
public function careerReport(requ $request)
{
$report = \App\Reports::create([
'user_id' => $request['user_id'],
'user_id_posted' => $request['user_id_posted'],
'career_solution_id' =>$request['career_solution_id'],
'why_reporting' =>$request['why_reporting'],
'why_reporting_message' =>$request['why_reporting_message'],
'additional_message' =>$request['additional_message'],
]);
if($report != ""){
flash('Career solution report submited', 'success');
}else{
flash('Career solution report', 'warning');
}
return Redirect('career_report')->with('message',"success");
}
Your event listener for the click is wrongly declared (you have an event listener declared after the first event is triggered and end up with two event listener on 'click') plus you might have a wrong url in your ajax.
try this
<script>
$('form').on("submit", function(){
e.preventDefault(); //Prevent page from submiting
var data = new FormData(this);
var url = this.action;
var method = this.method;
$.ajax({
type: method,
url: url,
data: data,
success: function(store) {
},
error: function() {
}
});
});
</script>
I took the code from the Bootstrap Documentation with my existent code and it crashed it, meanwhile I put the same code in a Test.html and it works. I tried downloading the last version, put all bootstrap.min.css and all that stuff but it doesn't work, tried to put container-fluid at line 18 but the problem persists
I took the code from the Bootstrap Documentation (NavBars).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portal</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Also my login.php code (when it collide)
<?php require 'inc/cabecera.inc'; ?>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1>Portal web</h1>
</div>
</div>
<div class="row">
<div class="col-sm-4 caja col-centrar">
<form action="login.php" method="POST" role="form">
<legend>Logueate!</legend>
<div class="form-group">
<input name="email" type="text" class="form-control" id="" placeholder="Su email...">
</div>
<div class="form-group">
<input name="contrasena" type="password" class="form-control" id="" placeholder="Su contraseña...">
</div>
<button type="submit" class="btn btn-primary">Ingresar</button>
<a class="pull-right" href="registrarse.php">Registrarse</a>
<label for="" class="checkbox-inline">
<input name="recordar" type="checkbox" value="activo"> Mantener sesión iniciada.
</label>
</form>
</div>
</div>
</div>
<?php require 'inc/footer.inc'; ?>
The problem:
It's all good:
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 (:
I'm trying to create a profile page with blanks like username, city etc. I have successfully stored username & city in the MySQL Database using the UPDATE query. I have set the WHERE condition according to the email of the users. I have made 2 accounts with separates emails, for testing purposes. When I logged in from account #1, entered username & id, it was successfully stored in the correct row. Then I logged out, and logged in from account #2, and the username & city I entered in account #1 was duplicated and printed on blanks of account #2. BUT in database, the data was still distinguished until I pressed ENTER. So my question is, why is this happening and how do I fix this?
Action.php:
<?php
session_start(); //---> start session
ini_set('display_errors', 1); ini_set('log_errors',1); error_reporting(E_ALL); mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$con = mysqli_connect('localhost', 'id1753243_venom', 'roushan123', 'id1753243_gameware_01');
if(!$con)
{
echo 'Not connected to the server';
}
$city = $_SESSION['city'];
$city = $_POST['city'];
if(isset($_POST['username']))
if(isset($_POST['city']))
{
$username = $_POST['username'];
$sql = "UPDATE users SET username='".mysqli_real_escape_string($con,$username)."', city = '$city' WHERE email='".mysqli_real_escape_string($con,$_SESSION['email'])."'";
$insert = mysqli_query($con,$sql);
$_SESSION['username'] = $username; //---> this will store username into session variable
$_SESSION['city'] = $city; //---> this will store city into session variable
}
if(!$insert)
{
echo 'Not inserted';
}
else
{
echo 'Inserted';
}
header("refresh:2; url=user.php");
?>
And this is the user.php:
<?php
ini_set('display_errors', 1); ini_set('log_errors',1); error_reporting(E_ALL); mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
/* Displays user information and some useful messages */
session_start();
include 'db.php';
// Check if user is logged in using the session variable
if ( $_SESSION['logged_in'] != 1 ) {
$_SESSION['message'] = "You must log in before viewing your profile page!";
header("location: error.php");
}
else {
// Makes it easier to read
$first_name = $_SESSION['first_name'];
$last_name = $_SESSION['last_name'];
$email = $_SESSION['email'];
$active = $_SESSION['active'];
$username = $_SESSION['username'];
$city = $_SESSION['city'];
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="assets/img/favicon.ico">
<title>Social Junction | User Profile</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<!-- Animation library for notifications -->
<link href="assets/css/animate.min.css" rel="stylesheet"/>
<!-- Light Bootstrap Table core CSS -->
<link href="assets/css/light-bootstrap-dashboard.css" rel="stylesheet"/>
<!-- CSS for Demo Purpose, don't include it in your project -->
<link href="assets/css/demo.css" rel="stylesheet" />
<!-- Fonts and icons -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<link href="assets/css/pe-icon-7-stroke.css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div class="sidebar" data-color="blue" data-image="http://www.zastavki.com/pictures/originals/2015/Creative_Wallpaper_Set_of_business_people_100390_.jpg">
<!-- you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple" -->
<div class="sidebar-wrapper">
<div class="pic"></div>
<div class="logo">
<a href="#">
<span style="font-size: 28px;">Hello <span style="font-weight: bold;"><?php echo $first_name.' '.$last_name; ?>!</span></span>
</a>
</div>
<ul class="nav">
<li>
<a href="dashboard.php">
<i class="pe-7s-graph"></i>
<p>Dashboard</p>
</a>
</li>
<li class="active">
<a href="user.html">
<i class="pe-7s-user"></i>
<p>User Profile</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<nav class="navbar navbar-default navbar-fixed">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
<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="#">Profile</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-dashboard"></i>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-globe"></i>
<b class="caret"></b>
<span class="notification">5</span>
</a>
<ul class="dropdown-menu">
<li>Notification 1</li>
<li>Notification 2</li>
<li>Notification 3</li>
<li>Notification 4</li>
<li>Another notification</li>
</ul>
</li>
<li>
<a href="">
<i class="fa fa-search"></i>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="">
Account
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something</li>
<li>Another action</li>
<li>Something</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>
<a href="index.php">
Log out
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="header">
<h4 class="title">Edit Profile</h4>
</div>
<div class="content">
<form method="POST" action="action.php">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label>Company (disabled)</label>
<input type="text" class="form-control" disabled placeholder="Company" value="Creative Code Inc.">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Username</label>
<input name="username" type="text" class="form-control" placeholder="Username" value="<?php echo $username; ?>">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" placeholder="Email" value="<?php echo $email; ?>">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>First Name</label>
<input type="text" name="first_name" class="form-control" placeholder="Company" value="<?php echo $first_name; ?>">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Last Name</label>
<input type="text" name="last_name" class="form-control" placeholder="Last Name" value="<?php echo $last_name; ?>">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Address</label>
<input type="text" name="address" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>City</label>
<input type="text" name="city" class="form-control" placeholder="City" value="<?php echo $_SESSION['city']; ?>">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Country</label>
<input type="text" name="country" class="form-control" placeholder="Country" value="Andrew">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Postal Code</label>
<input type="number" class="form-control" placeholder="ZIP Code">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>About Me</label>
<textarea name="aboutme" rows="5" class="form-control" placeholder="Here can be your description" value="Mike">Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.</textarea>
</div>
</div>
</div>
<button type="submit" class="btn btn-info btn-fill pull-right">Update Profile</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-user">
<div class="image">
<img src="https://ununsplash.imgix.net/photo-1431578500526-4d9613015464?fit=crop&fm=jpg&h=300&q=75&w=400" alt="..."/>
</div>
<div class="content">
<div class="author">
<a href="#">
<img class="avatar border-gray" src="assets/img/faces/face-3.jpg" alt="..."/>
<h4 class="title"><?php echo $first_name; ?><br />
<small><?php echo $username; ?></small>
</h4>
</a>
</div>
<p class="description text-center"> "Lamborghini Mercy <br>
Your chick she so thirsty <br>
I'm in that two seat Lambo"
</p>
</div>
<hr>
<div class="text-center">
<button href="#" class="btn btn-simple"><i class="fa fa-facebook-square"></i></button>
<button href="#" class="btn btn-simple"><i class="fa fa-twitter"></i></button>
<button href="#" class="btn btn-simple"><i class="fa fa-google-plus-square"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid">
<nav class="pull-left">
<ul>
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Company
</a>
</li>
<li>
<a href="#">
Portfolio
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
</ul>
</nav>
<p class="copyright pull-right">
© 2016 Creative Tim, made with love for a better web
</p>
</div>
</footer>
</div>
</div>
</body>
<!-- Core JS Files -->
<script src="assets/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Checkbox, Radio & Switch Plugins -->
<script src="assets/js/bootstrap-checkbox-radio-switch.js"></script>
<!-- Charts Plugin -->
<script src="assets/js/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="assets/js/bootstrap-notify.js"></script>
<!-- Google Maps Plugin -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
<script src="assets/js/light-bootstrap-dashboard.js"></script>
<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
<script src="assets/js/demo.js"></script>
</html>
I know the code is not secure, this is just for test purposes. Help is highly appreciated.
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>