Warning: Cannot modify header information: headers already sent [duplicate] - php

This question already has answers here:
How to fix "Headers already sent" error in PHP
(11 answers)
Closed 7 years ago.
I am trying to create a few pages with database interaction.
Here is my code, CSS:
<HTML>
<HEAD>
<TITLE>Modify Employee's Information</TITLE>
<style type="text/css">
.form_style {
margin:10px auto;
max-width: 400px;
padding: 20px 12px 10px 20px;
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form_style li {
padding: 0;
display: block;
list-style: none;
margin: 10px 0 0 0;
}
.form_style h1{
text-align: center;
}
.form_style label{
margin:0 0 3px 0;
padding:0px;
display:block;
font-weight: bold;
}
.form_style input[type=text],
.form_style input[type=date],
.form_style input[type=datetime],
.form_style input[type=number],
.form_style input[type=search],
.form_style input[type=time],
.form_style input[type=url],
.form_style input[type=email],
textarea,
select{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border:1px solid #BEBEBE;
padding: 7px;
margin:0px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}
.form_style input[type=text]:focus,
.form_style input[type=date]:focus,
.form_style input[type=datetime]:focus,
.form_style input[type=number]:focus,
.form_style input[type=search]:focus,
.form_style input[type=time]:focus,
.form_style input[type=url]:focus,
.form_style input[type=email]:focus,
.form_style textarea:focus,
.form_style select:focus{
-moz-box-shadow: 0 0 8px #88D5E9;
-webkit-box-shadow: 0 0 8px #88D5E9;
box-shadow: 0 0 8px #88D5E9;
border: 1px solid #88D5E9;
}
.form_style .field-divided{
width: 49%;
}
.form_style .field-short{
width: 18.8%;
text-align: center;
}
.form_style .field-salary{
width:39.4%;
text-align: center;
}
.form_style .field-id{
width: 10%;
text-align: center;
}
.form_style .field-long{
width: 90%;
}
.form_style .field-select{
width: 100%;
}
.form_style .field-textarea{
height: 100px;
}
.form_style input[type=submit], .form_style input[type=button]{
background: #4B99AD;
padding: 8px 15px 8px 15px;
border: none;
color: #fff;
margin: 0 auto;
}
.form_style input[type=submit]:hover, .form_style input[type=button]:hover{
background: #4691A4;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
.form_style .required{
color:red;
}
</style>
</HEAD>
<BODY>
PHP:
<?php
include 'connection.php';
if (!isset($_POST['edit'])) {
$query = "SELECT * FROM employee_data WHERE emp_id = $_GET[id]";
$result = mysql_query($query);
$emp = mysql_fetch_array($result);
}
?>
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post">
<ul class="form_style">
<li>
<h1>Modify Employee's Information</h1>
</li>
<li>
<b>Employee ID:</b> <input type="text" name="id" class="field-id" value="<?php echo $emp['emp_id']?>" readonly/>
</li>
<li>
<label>Employee Name</label>
<input type="text" name="inputFname" class="field-divided" placeholder="First" value="<?php echo $emp['f_name'] ?>"/> <input type="text" name="inputLname" class="field-divided" placeholder="Last" value="<?php echo $emp['l_name'] ?>"/>
</li>
<li>
Title <input type="text" name="inputTitle" class="field-short" value="<?php echo $emp['title'] ?>"/> Age <input type="text" name="inputAge" class="field-short" value="<?php echo $emp['age'] ?>"/> Year of Services <input type="text" name="inputYos" class="field-short" value="<?php echo $emp['yos'] ?>"/>
</li>
<li>
Salary <input type="text" name="inputSalary" class="field-salary" value="<?php echo $emp['salary'] ?>"/> Perks <input type="text" name="inputPerks" class="field-salary" value="<?php echo $emp['perks'] ?>"/>
</li>
<li>
Email <input type="email" name="inputEmail" class="field-long" value="<?php echo $emp['email'] ?>"/>
</li>
<li>
<input type="submit" name="edit" value="Modify" />
<p>Change any information as you want, or click Modify directly to save without any change. </p>
<p>p.s. Employee ID is not changeable.</P>
</li>
</ul>
</form>
<?php
if (isset($_POST['edit'])) {
$edit = "UPDATE employee_data SET f_name ='$_POST[inputFname]',"
. "l_name ='$_POST[inputLname]',"
. "title ='$_POST[inputTitle]',"
. "age ='$_POST[inputAge]',"
. "yos ='$_POST[inputYos]',"
. "salary ='$_POST[inputSalary]',"
. "perks ='$_POST[inputPerks]',"
. "email ='$_POST[inputEmail]'"
. "WHERE emp_id = '$_POST[id]'";
mysql_query($edit) or die(mysql_error());
header('Location: index.php');
}
?>
</BODY>
I guess it is a bit messy and I will get it much cleaner after I fix all the functional bugs.
So what I don't understand is why is it telling me:
Warning: Cannot modify header information - headers already sent by (output started at /Applications/XAMPP/xamppfiles/htdocs/Employee/modify.php:128) in /Applications/XAMPP/xamppfiles/htdocs/Employee/modify.php on line 166
The line 128 is just handling the user ID for passing by it to the SQL action. Why is it sending the header? Everything works fine except the page gives me this error and refuses to redirect to the main page.
This code had been working before I added some CSS and style to the form. Could anyone give me an idea what was the major differences about them?
<?php
include 'connection.php';
if (!isset($_POST['edit'])) {
$query = "SELECT * FROM employee_data WHERE emp_id = $_GET[id]";
$result = mysql_query($query);
$emp = mysql_fetch_array($result);
}
?>
<form action = "<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
Employee ID<input type="text" name ="id" value="<?php echo $emp['emp_id'] ?>" readonly/> <br />
First Name<input type="text" name="inputFname" value="<?php echo $emp['f_name'] ?>" /> <br />
Last Name<input type="text" name="inputLname" value="<?php echo $emp['l_name'] ?>" /> <br />
Title<input type="text" name="inputTitle" value="<?php echo $emp['title'] ?>" /> <br />
Age<input type="text" name="inputAge" value="<?php echo $emp['age'] ?>" /> <br />
Year of Service<input type="text" name="inputYos" value="<?php echo $emp['yos'] ?>" /> <br />
Salary<input type="text" name="inputSalary" value="<?php echo $emp['salary'] ?>" /> <br />
Perks<input type="text" name="inputPerks" value="<?php echo $emp['perks'] ?>" /> <br />
Email<input type="text" name="inputEmail" value="<?php echo $emp['email'] ?>" /> <br />
<br />
<input type="submit" name="edit" value="Modify The Employee"/> <br />
</form>
<?php
if (isset($_POST['edit'])) {
$edit = "UPDATE employee_data SET f_name ='$_POST[inputFname]',"
. "l_name ='$_POST[inputLname]',"
. "title ='$_POST[inputTitle]',"
. "age ='$_POST[inputAge]',"
. "yos ='$_POST[inputYos]',"
. "salary ='$_POST[inputSalary]',"
. "perks ='$_POST[inputPerks]',"
. "email ='$_POST[inputEmail]'"
. "WHERE emp_id = '$_POST[id]'";
mysql_query($edit) or die(mysql_error());
header("Location: index.php");
}
?>

The following error:
Warning: Cannot modify header information - headers already sent
is caused when there has already been output to the page before a header is sent. By convention, all header()s (including cookies) must be sent out before any output is displayed.
To fix this, you can simply move your entire PHP script (<?php ... header('Location: index.php'); ?> to the top of the page.

Related

Trouble Aligning Columns in Form

I'm creating an online form and having a bit of trouble aligning the input boxes in the form. I've tried <br>, but it's always slightly off. I'm assuming this is affecting the text below as well.
Also, is PHPMailer still the preferred(simplest) way to go to retrieve the data user's input and attach? Some files might be pretty large.
head,
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.header {
background-color: #0C2440;
color: white;
padding-top: 10px;
padding-bottom: 15px;
padding-right: 5px;
}
.header img {
float: left;
padding-top: 10px;
padding-right: 10px;
}
.header h1 {
text-align: center;
margin-right: 110px;
}
h2 {
text-align: center;
}
input[type=text],
select {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=date],
select {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=button] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]:hover {
background-color: #45a049;
}
.column {
width: 50%;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Mileage Certification Change Request Form</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700,800" media="all" onload="if(media!='all')media='all'">
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
document.getElementById('date').value = Date();
// document.getElementById('submit').onclick = function () {
// location.href = "confirmation.html";
// return false;
// };
// document.querySelectorAll('a[href^="#"]').forEach(anchor => {
// anchor.addEventListener('click', function (e) {
// e.preventDefault();
// document.querySelector(this.getAttribute('href')).scrollIntoView({
// behavior: 'smooth'
// });
// });
// });
</script>
</head>
<body>
<div class="header">
<img src="logo.png" alt="Logo">
<h1>Planning Department</h1>
</div>
<br>
<h2>Mileage Change Request Form</h2>
<br>
<div class="form">
<form>
<fieldset>
<br>
<div class="column">
Date of Submittal:<br>
<input type="date" id="date" name="date"><br> County Name:<br>
<input type="text" id="county" name="county"><br> City/Town Name:<br>
<input type="text" id="cityname" name="cityname"><br> Name of Office and Title:<br>
<input type="text" id="officename" name="officename"><br> Address:
<br>
<input type="text" id="address" name="address"><br> City:
<br>
<input type="text" id="city" name="city"><br>
</div>
<div class="column">
State:<br>
<input type="text" id="state" name="address"><br> ZIP Code:<br>
<input type="text" id="zip" name="zip"><br> Telephone:
<br>
<input type="text" id="phone" name="phone"><br> Fax:
<br>
<input type="text" id="fax" name="fax"><br> Email:
<br>
<input type="text" id="email" name="email"><br> Comments:
<br>
<input type="text" id="comments" name="comments"><br>
</div>
<div class="reqs">
<br>
<p><b>Before we can make any changes, you MUST include items 1-3 for each submission. For annexations with mileage changes, you MUST include items 1-4. If you only have an annexation with no changes to mileage, item 4 is all you need to submit.</b></p>
<ol>
<li>Copy of a current (scaled) map(s) depicting the roads that need added and/or removed OR a shapefile or file geodatabase. If none of these are available, provide a copy of measurable (Scaled) plats depicting the roads that need added/removed.</li>
<input type="file" id="uploaded_file" name="pic" accept="image/*" required>
<li>Copy of meeting minutes at which a governing body accepted the roads into your system. If unavailable, please provide a letter stating the acceptance of the roads signed by an elected official. An example acceptance letter is available if
needed.</li> <input type="file" name="pic" accept="image/*" required>
<li>A list of each road and its requested mileage.</li> <input id="fileSelect" name="spreadsheet" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" required>
<li>Copy of annexation ordinance(s) establishing the new corporate limits along with a shapefile and/or file geodatabase of the correct corporate limits. If a shapefile is not available provide a drawing of the correct corporate limits on a scaled
map.</li> <input type="file" name="pic" accept="image/*" required>
</ol>
</div>
</fieldset>
</form>
</div>
<input id="submit" type="button" value="Submit"></input>
<!-- <?php
if(isset($_POST['submit'])) {
$emailAddress = '';
require "class.phpmailer.php";
$msg = 'Date:'.$_POST['date'].'<br /> County:'.$_POST['county'].'<br /> City/Town Name:'.$_POST['cityname'].'<br /> Name of Office and Title: '.$_POST['officename']. '<br /> Address: '.$_POST['address']. '<br /> City: '.POST['city'], '<br /> State: $_POST['state']. '<br /> ZIP Code: '.POST['zip']. '<br /> Telephone: '.$_POST['phone']. '<br /> Fax: '.$_POST['fax']. '<br /> Email: '.$_POST['email']. '<br /> Comments: '$_POST['comments']. '<br />';
move_uploaded_file($_FILES["uploaded_file"]["tmp_name"], $_FILES["uploaded_file"]["name"]);
$mail = new PHPMailer();
$mail->IsMail();
$mail->AddReplyTo($_POST['email'], $_POST['name']);
$mail->AddAddress($emailAddress);
$mail->SetFrom($_POST['email'], $_POST['name']);
$mail->Subject = "Subject";
$mail->MsgHTML($msg);
$mail->AddAttachment( $_FILES["uploaded_file"]["name"]);
$mail->Send();
echo'<script> window.location="../MCCR.html"; </script> ';
}
?> -->
</body>
</html>
Remove <br> and use CSS style. Added some style in your existing code as
// newly added style begin
h2 {
text-align: center;
margin:30px 0;
}
fieldset {
padding-top:20px;
}
.form-fields {
display: flex;
flex-direction:row;
width: 80%;
margin: 0 auto;
}
.column {
width:50%;
display:flex;
flex-direction:column;
}
input {
width:100%;
}
//end
head,
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
.header {
background-color: #0C2440;
color: white;
padding-top: 10px;
padding-bottom: 15px;
padding-right: 5px;
}
.header img {
float: left;
padding-top: 10px;
padding-right: 10px;
}
.header h1 {
text-align: center;
margin-right: 110px;
}
input[type=text],
select {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=date],
select {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=button] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]:hover {
background-color: #45a049;
}
// newly added style begin
h2 {
text-align: center;
margin:30px 0;
}
fieldset {
padding-top:20px;
}
.form-fields {
display: flex;
flex-direction:row;
width: 80%;
margin: 0 auto;
}
.column {
width:50%;
display:flex;
flex-direction:column;
}
input {
width:100%;
}
//end
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Mileage Certification Change Request Form</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700,800" media="all" onload="if(media!='all')media='all'">
<script src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//document.getElementById('date').value = Date();
// document.getElementById('submit').onclick = function () {
// location.href = "confirmation.html";
// return false;
// };
// document.querySelectorAll('a[href^="#"]').forEach(anchor => {
// anchor.addEventListener('click', function (e) {
// e.preventDefault();
// document.querySelector(this.getAttribute('href')).scrollIntoView({
// behavior: 'smooth'
// });
// });
// });
</script>
</head>
<body>
<div class="header">
<img src="logo.png" alt="Logo">
<h1>Planning Department</h1>
</div>
<h2>Mileage Change Request Form</h2>
<div class="form">
<form>
<fieldset>
<div class="form-fields">
<div class="column">
Date of Submittal:
<input type="date" id="date" name="date"> County Name:
<input type="text" id="county" name="county"> City/Town Name:
<input type="text" id="cityname" name="cityname"> Name of Office and Title:
<input type="text" id="officename" name="officename"> Address:
<input type="text" id="address" name="address"> City:
<input type="text" id="city" name="city">
</div>
<div class="column">
State:
<input type="text" id="state" name="address"> ZIP Code:
<input type="text" id="zip" name="zip"> Telephone:
<input type="text" id="phone" name="phone"> Fax:
<input type="text" id="fax" name="fax"> Email:
<input type="text" id="email" name="email"> Comments:
<input type="text" id="comments" name="comments">
</div>
</div>
<div class="reqs">
<p><b>Before we can make any changes, you MUST include items 1-3 for each submission. For annexations with mileage changes, you MUST include items 1-4. If you only have an annexation with no changes to mileage, item 4 is all you need to submit.</b></p>
<ol>
<li>Copy of a current (scaled) map(s) depicting the roads that need added and/or removed OR a shapefile or file geodatabase. If none of these are available, provide a copy of measurable (Scaled) plats depicting the roads that need added/removed.</li>
<input type="file" id="uploaded_file" name="pic" accept="image/*" required>
<li>Copy of meeting minutes at which a governing body accepted the roads into your system. If unavailable, please provide a letter stating the acceptance of the roads signed by an elected official. An example acceptance letter is available if
needed.</li> <input type="file" name="pic" accept="image/*" required>
<li>A list of each road and its requested mileage.</li> <input id="fileSelect" name="spreadsheet" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" required>
<li>Copy of annexation ordinance(s) establishing the new corporate limits along with a shapefile and/or file geodatabase of the correct corporate limits. If a shapefile is not available provide a drawing of the correct corporate limits on a scaled
map.</li> <input type="file" name="pic" accept="image/*" required>
</ol>
</div>
</fieldset>
</form>
</div>
<input id="submit" type="button" value="Submit"></input>
<!-- <?php
if(isset($_POST['submit'])) {
$emailAddress = '';
require "class.phpmailer.php";
$msg = 'Date:'.$_POST['date'].'<br /> County:'.$_POST['county'].'<br /> City/Town Name:'.$_POST['cityname'].'<br /> Name of Office and Title: '.$_POST['officename']. '<br /> Address: '.$_POST['address']. '<br /> City: '.POST['city'], '<br /> State: $_POST['state']. '<br /> ZIP Code: '.POST['zip']. '<br /> Telephone: '.$_POST['phone']. '<br /> Fax: '.$_POST['fax']. '<br /> Email: '.$_POST['email']. '<br /> Comments: '$_POST['comments']. '<br />';
move_uploaded_file($_FILES["uploaded_file"]["tmp_name"], $_FILES["uploaded_file"]["name"]);
$mail = new PHPMailer();
$mail->IsMail();
$mail->AddReplyTo($_POST['email'], $_POST['name']);
$mail->AddAddress($emailAddress);
$mail->SetFrom($_POST['email'], $_POST['name']);
$mail->Subject = "Subject";
$mail->MsgHTML($msg);
$mail->AddAttachment( $_FILES["uploaded_file"]["name"]);
$mail->Send();
echo'<script> window.location="../MCCR.html"; </script> ';
}
?> -->
</body>
</html>

how to fix my booking because when i send it. It doesn't show any data at mysql and it show echo "failed" [duplicate]

This question already has answers here:
How can I prevent SQL injection in PHP?
(27 answers)
Closed 3 years ago.
i'm setting up my reservation web application and support UTF-8.
I already running PHP 7 and MySQL also Apache 2.In the past i've tried doing registration form and login form and when doing my reservation form seem end up sending echo "failed".
I'm doing php using method object oriented
this is my bookingtest.php
<?php
$php_variable = 'string';
// connection
include ('config.php');
ob_start();
// if button register pressed
if(isset($_POST['book']))
{
$fname = $_POST['fname'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$country = $_POST['country'];
$swimming = $_POST['swimming'];
$date = $_POST['date'];
$numbercus= $_POST['numbercus'];
$suits= $_POST['suits'];
$certificate = $_POST['certificate'];
$guide= $_POST['guide'];
//inserting php form to mysql
$sql_book = "INSERT INTO booking (fname, email, phone, country, swim,
date, num, suits, cert, guide)
VALUES ('$fname', '$email', '$phone', '$country', $swimming, '$date',
'$numbercus', '$suits', '$certificate', '$guide')";
//result
if ($result_book = $conn->query($sql_book))
{
sleep(1);
echo "success";
}
else
{
echo "Failed ! Please check your details !";
}
}
?>
This is my bookinfo.php
<!DOCTYPE html>
<html>
<!-- header -->
<head>
<title>BOOKING INFORMATION | E-Diving</title>
<link href="https://fonts.googleapis.com/css?
family=Bungee+Outline&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?
family=Archivo+Narrow&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?
family=Patua+One&display=swap" rel="stylesheet">
</head>
<body>
<!-- top bars -->
<ul>
<li>HOME</li>
<li>ABOUT</li>
</ul>
<h1>BOOKING INFORMATION</h1>
<!-- reservation form -->
<form class="field" method="post" action="booktest.php">
<fieldset>
<legend>Personal Details: </legend>
<br>
Name: <input type="text" name="fname" placeholder="Full Name">
<br>
<br>
Email: <input type="text" name="email"
placeholder="example#example.com">
<br>
<br>
Phone:<input type="tel" name="phone" placeholder="012-3456789">
<br>
<br>
<p>Country: <select name="country" required>
<option name="country">MALAYSIA</option>
<option name="country">UNITED STATES</option>
<option name="country">UNITED KINGDOM</option>
</select> </p>
<br>
<p>Do you know Swimming ?</p>
<input type="radio" name="swimming">YES
<br>
<br>
<input type="radio" name="swimming">NO
<br>
<br>
Choose your Date: <input type="date" name="date" min="2019-01-
01">
<br>
<br>
No. Customers: <input type="number" name="numbercus" min="1"
max="100">
<br>
<br>
<p>Do you have swimming suits?</p>
<input type="radio" name="suits">YES<br><br>
<input type="radio" name="suits">NO
<br>
<br>
<p>Level of Certificate :</p>
<input type="radio" name="certificate">Recretional Scuba Diving
Certification Levels.<br>
<br>
<input type="radio" name="certificate">Professional Scuba Diving
Certification Levels.
<br>
<br>
<p>Do you need a guide?</p>
<input type="radio" name="guide">YES<br><br>
<input type="radio" name="guide">NO
<br>
<br>
</fieldset>
<br>
<br>
<input type="submit" name="book" value="Continue...">
</form>
</body>
<!-- style -->
<style>
h1 {
font-family: 'Bungee Outline', cursive;
text-align: center;
margin-top: 20px;
font-size: 70px;
color: #3A506B;
}
body {
height: 110vh;
margin: 0;
padding: 0;
font-family: 'Product', sans-serif;
background-image: linear-gradient(120deg, #6B7FD7, #BCEDF6, #EAF8BF,
#99DDC8, #F9CFF2, #A9FBD7);
}
.field p {
font-size: 19px;
}
.field input[type="radio"],
.field input[type="text"],
.field input[type="number"],
.field input[type="date"] {
font-size: 14px;}
fieldset {
background-color: #A4BAB7;
font-weight: bold;
font-family: 'Archivo Narrow', sans-serif;
color: #533E2D;
font-style: oblique;
font-size: 19px;
border-radius: 20px;
: 16px;}
.field {
margin-right: 10px;}
legend {
text-decoration: underline;
text-align: center;
font-size: 21px;
font-family: 'Patua One', cursive;
}
.field input[type="submit"] {
border: 0;
background: #4C243B;
display: block;
margin: 20px auto;
text-align: center;
border: 3px solid #07FEDE;
padding: 14px 60px;
width: 200px;
outline: none;
color: white;
border-radius: 25px;
transition: 0.6s;
cursor: pointer;
color: cornflowerblue;
font-weight: bolder;
font-family: 'Raleway', sans-serif;
font-size: 15px;
}
.field input[type="submit"]:hover {
background: #DCD6F7;
color: #151E3F;
font-family: 'Raleway', sans-serif;
}
head {
display: flex;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #EDF7F6;
position: fixed;
top: 0;
width: 100%;
position: fixed;
font-weight: lighter;
}
li {
float: left;
}
li a {
display: block;
color: #352208;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-weight: lighter;
}
li a:hover:not(.active) {
background-color: #FAE8EB;
color: #1F2041;
}
.active {
background-color: #CC7E85;
transition: 1s;
}
</html>
Use execute instead of query and use prepared statement to handle SQL INJECTION.
$sql = "INSERT INTO booking (fname, email, phone, country, swim, date, num, suits, cert, guide) VALUES (?,?,?,?,?,?,?,?,?,?)";
$stmt= $pdo->prepare($sql);
$stmt->execute([$fname, $email, $phone, $country, $swimming, $date, $numbercus, $suits, $certificate, $guide]);
Reference: Insert query using PDO

Make html form text field required

I have a problem concerning how to add data from a text field into a SQL table on a database. I would like the text fields to require some sort of data so there can be no blank data in the table. However, I cannot seem to get it to work.
The code below shows my problem.
The page where the user is created:
<html>
<head>
<title>Eksamensprojekt</title>
<style>
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.login-form {
margin-left: auto;
margin-right: auto;
width: 400px;
font-family: Tahoma, Geneva, sans-serif;
}
.login-form h1 {
text-align: center;
color: #4d4d4d;
font-size: 24px;
padding: 20px 0 20px 0;
}
.login-form input[type="password"],
.login-form input[type="text"] {
width: 100%;
padding: 15px;
border: 1px solid #dddddd;
margin-bottom: 15px;
box-sizing:border-box;
}
.login-form input[type="submit"] {
width: 100%;
padding: 15px;
background-color: #535b63;
border: 0;
box-sizing: border-box;
cursor: pointer;
font-weight: bold;
color: #ffffff;
margin: 0;
}
</style>
</head>
<body>
<div class="outer">
<div class="middle">
<div class="login-form">
<h1>Associhunt</h1>
<form method="get">
<input type="text" name="firstname" placeholder="First name"><br>
<span class="error">* <?php echo $nameErr;?></span>
<input type="text" name="email" placeholder="E-mail"><br>
<input type="text" name="tlfnr" placeholder="Phone"><br>
<input type="text" name="position" placeholder="Current job position"><br>
<input type="text" name="username" placeholder="Username"><br>
<input type="text" name="password" placeholder="Password"><br>
<input type="submit" value="Opret bruger" name="opretbruger">
</form>
</div>
<div class="login-form">
<form method="get" action="../login/">
<input type="submit" value="Already have an account?">
</form>
</div>
</div>
</div>
<?php
$conn = new mysqli($servername, $username, $password,$dbnavn);
if ($conn->connect_error) die("Fejl: " . $conn->connect_error);
if (isset($_GET['opretbruger']))
{
$firstname=$_GET['firstname'];
if ($firstname===NULL) die();
$lastname=$_GET['lastname'];
if ($lastname===NULL) die();
$email=$_GET['email'];
if ($email===NULL) die();
$tlfnr=$_GET['tlfnr'];
if ($tlfnr===NULL) die();
$position=$_GET['position'];
if ($position===NULL) die();
$username=$_GET['username'];
if ($username===NULL) die();
$password=$_GET['password'];
if ($password===NULL) die();
$sql="INSERT INTO UserData
(
firstname,
lastname,
email,
tlfnr,
position,
username,
password
)
VALUES ('".$firstname."','".$lastname."','".$email."','".$tlfnr."','".$position."','".$username."','".$password."')";
$conn->query($sql);
if ($conn->affected_rows >0 )
{
echo "Bruger oprettet!";
}
else
{
echo "Bruger ikke oprettet!";
};
};
?>
</body>
</html>
The table creation:
<?php
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// sql to create table
$sql = "CREATE TABLE UserData (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50) NOT NULL,
tlfnr INT(8) NOT NULL,
position VARCHAR(50),
username VARCHAR(40) NOT NULL,
password VARCHAR(40) NOT NULL,
reg_date TIMESTAMP
)";
if ($conn->query($sql) === TRUE) {
echo "Table UserData created successfully";
} else {
echo "Error creating table: " . $conn->error;
}
$conn->close();
?>
You can use HTML input required attribute - for example, change:
<input type="text" name="email" placeholder="E-mail">
to
<input type="text" name="email" placeholder="E-mail" required>
Have you look at the required attribute ?
Below your code with the attribute added :
<html>
<head>
<title>Eksamensprojekt</title>
<style>
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.login-form {
margin-left: auto;
margin-right: auto;
width: 400px;
font-family: Tahoma, Geneva, sans-serif;
}
.login-form h1 {
text-align: center;
color: #4d4d4d;
font-size: 24px;
padding: 20px 0 20px 0;
}
.login-form input[type="password"],
.login-form input[type="text"] {
width: 100%;
padding: 15px;
border: 1px solid #dddddd;
margin-bottom: 15px;
box-sizing:border-box;
}
.login-form input[type="submit"] {
width: 100%;
padding: 15px;
background-color: #535b63;
border: 0;
box-sizing: border-box;
cursor: pointer;
font-weight: bold;
color: #ffffff;
margin: 0;
}
</style>
</head>
<body>
<div class="outer">
<div class="middle">
<div class="login-form">
<h1>Associhunt</h1>
<form method="get">
<input type="text" name="firstname" required placeholder="First name"><br>
<span class="error">* <?php echo $nameErr;?></span>
<input type="text" name="email" required placeholder="E-mail"><br>
<input type="text" name="tlfnr" required placeholder="Phone"><br>
<input type="text" name="position" required placeholder="Current job position"><br>
<input type="text" name="username" required placeholder="Username"><br>
<input type="text" name="password" required placeholder="Password"><br>
<input type="submit" value="Opret bruger" name="opretbruger">
</form>
</div>
<div class="login-form">
<form method="get" action="../login/">
<input type="submit" value="Already have an account?">
</form>
</div>
</div>
</div>
<?php
$conn = new mysqli($servername, $username, $password,$dbnavn);
if ($conn->connect_error) die("Fejl: " . $conn->connect_error);
if (isset($_GET['opretbruger']))
{
$firstname=$_GET['firstname'];
if ($firstname===NULL) die();
$lastname=$_GET['lastname'];
if ($lastname===NULL) die();
$email=$_GET['email'];
if ($email===NULL) die();
$tlfnr=$_GET['tlfnr'];
if ($tlfnr===NULL) die();
$position=$_GET['position'];
if ($position===NULL) die();
$username=$_GET['username'];
if ($username===NULL) die();
$password=$_GET['password'];
if ($password===NULL) die();
$sql="INSERT INTO UserData
(
firstname,
lastname,
email,
tlfnr,
position,
username,
password
)
VALUES ('".$firstname."','".$lastname."','".$email."','".$tlfnr."','".$position."','".$username."','".$password."')";
$conn->query($sql);
if ($conn->affected_rows >0 )
{
echo "Bruger oprettet!";
}
else
{
echo "Bruger ikke oprettet!";
};
};
?>
</body>
</html>

HTML button moving on page refresh?

So I noticed this bug the other day where the button for the log in will move to a different location when the page is refreshed. However, if page is loaded from link, then it stays in correct position. I am drawing a blank as to why this would do this, here is the link and the code to my site.
Website: http://www.clanrippgaming.net/
HTML:
<div class="login_box">
<li>
<?php
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './forums/';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
$user->session_begin();
$auth->acl($user->data);
if (!$user->data["is_registered"]) {
?>
<div class="logged_out">
<form action="./forums/ucp.php?mode=login" method="post" enctype="multipart/form-data">
<input type="text" placeholder="username" style="height:20px;" maxlength="20" size="17px" name="username" />
<input type="password" placeholder="password" style="height:20px;" maxlength="50" size="16px" name="password" />
<div class="button">
<input type="image" name="login" value="Log in" src="images/login.png" width="28px" onmouseout="this.src='images/login.png'" onmouseover="this.src='images/loginhover.png'" onmouseout="t">
</div>
<div class="logged_out_txt">
<br>
<input type="checkbox" name="autologin" id="autologin" />
<font size="2" color="#BDBDBD">
Remember Me
<div class="forgot">
<font size="2">
Forgot Password?
</font>
</div>
<div class="New">
<br>
New Member? Register Now!
</div>
</div>
<input type="hidden" name="redirect" value="./../index.php" />
</form>
</div>
<?php
}
else {
echo "<div class='logged_in'>";
echo "<div class='welcome'>" . $user->data['username'];
"</div>";
echo "<br><div class='account'>Logout</div>";
echo "<div class='account'>Messages</div>";
echo "<div class='account'>My Account</div>";
echo "</div>";
}
?>
</li>
</div>
CSS:
.login_box {
float: right;
width: 330px;
height: 75px;
margin-top: 7px;
margin-right: -5px;
list-style: none;
}
.login_box li {
}
.login_box li a {
color: #BDBDBD;
text-decoration: none;
padding-left: 60px;
padding: 0px;
}
.logged_in {
background-image: url(images/bg_login2.png);
border: 3px solid#000000;
outline: 1px solid#BDBDBD;
width: 304px;
height: 55px;
margin-left: -2px;
padding-top: 5px;
}
.logged_out {
margin-right: 38px;
}
.logged_out_txt {
margin-top: -20px;
}
Update the following changes to your CSS classes and it will be alright.
CSS
.logged_out {
margin-right: 22px;
position: relative;
}
.button {
position: absolute;
top: 0;
right:0;
}
Remove display:inline; float:right; margin-top: 0; and margin-left: 4px from .button
Looking at your website I suggest making the following changes to your CSS:
.button {
display: inline-block;
float: right;
}
.logged_out {
margin-right: 22px;
}

Div tag does not contain content

I've created a form that enters comments onto my blog posts but when the comments are displayed on the webpage the background color that I added to the div is either to big or to small. I've provided the code below. Any help is appreciated!
<h2 id="comments-title">Comments</h2>
<div id="comment-list">
<?php
}
$commenttimestamp = strtotime("now");
$sql = "SELECT * FROM php_blog_comments WHERE entry='$id' ORDER BY timestamp";
$result = mysql_query ($sql) or print ("Can't select comments from table php_blog_comments.<br />" . $sql . "<br />" . mysql_error());
while($row = mysql_fetch_array($result)) {
$timestamp = date("l F d Y", $row['timestamp']);
printf("<div class='comment-ind'><p id='comments'><a id='username' href=\"%s\">%s</a> %s</p>", stripslashes($row['url']), stripslashes($row['name']), $timestamp);
print("<p class='comments'>" . stripslashes($row['comment']) . "</p><div class='clr'><br></div></div>");
}
?>
<form id="commentform" method="post" action="process.php">
<p><input type="hidden" name="entry" id="entry" value="<?php echo $id; ?>" />
<input type="hidden" name="timestamp" id="timestamp" value="<?php echo $commenttimestamp; ?>">
<input type="text" name="name" id="name" title="Name (required)" /><br />
<input type="text" name="email" id="email" title="Mail (will not be published) (required)" /><br />
<input type="text" name="url" id="url" title="Website" value="http://" /><br />
<br />
<textarea title="Your Comment Goes Here" name="comment" id="comment"></textarea></p>
<p><input type="submit" name="submit_comment" id="submit_comment" value="Add Comment" /></p>
</form>
</div>
CSS:
#comments-title {
background-color: #282828;
width: 567px;
height: 30px;
font-size: 25px;
font-family: arial;
color: #ffffff;
padding: 5px;
padding-top: 6px;
padding-bottom: 4px;
}
#comment-list{
border:1px solid #dadada;
width: 565px;
padding: 5px;
font-family: Helvetica;
font-size: 18px;
}
#comments {
width: 480px;
font-size: 12px;
color: #444444;
}
.comments {
width: 480px;
height: 20px;
}
.comment-ind {
background-color: #eeeeee;
width: 548px;
position: relative;
min-height: 10px;
margin: 5px;
padding: 8px;
}
Image:
Your problem is with height: 20px;. You can change it to min-height: 20px; and then it will be at least that height, but the way you have it, it will always be 20px tall regardless of the content.
Are we seeing the whole css that applies to this div. Looking at the screen shot I would guess that the paragraph of text is floated left and the containing div is not wrapping. Try removing the height and adding overflow:hidden to the containing .comments div. That way the height will adjust with the size of the contain.

Categories