I have an editable input box on my form, my question is how do I make it a required field.
Here's the form and what I did:
<td contenteditable="true" class="empname" required></td>
I'm not using <form> I'm using a table and JavaScript to insert to database. Here's the whole code:
<?php
// Initialize the session
session_start();
// Check if the user is already logged in, if yes then redirect him to welcome page
if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true){
header("location: messages.php");
exit;
}
// Include config file
require_once "database_connection.php";
// Define variables and initialize with empty values
$username = $password = "";
$username_err = $password_err = "";
// Processing form data when form is submitted
if($_SERVER["REQUEST_METHOD"] == "POST"){
// Check if username is empty
if(empty(trim($_POST["username"]))){
$username_err = "Please enter username.";
} else{
$username = trim($_POST["username"]);
}
// Check if password is empty
if(empty(trim($_POST["password"]))){
$password_err = "Please enter your password.";
} else{
$password = trim($_POST["password"]);
}
// Validate credentials
if(empty($username_err) && empty($password_err)){
// Prepare a select statement
$sql = "SELECT id, username, password FROM users WHERE username = ?";
if($stmt = mysqli_prepare($link, $sql)){
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "s", $param_username);
// Set parameters
$param_username = $username;
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt)){
// Store result
mysqli_stmt_store_result($stmt);
// Check if username exists, if yes then verify password
if(mysqli_stmt_num_rows($stmt) == 1){
// Bind result variables
mysqli_stmt_bind_result($stmt, $id, $username, $hashed_password);
if(mysqli_stmt_fetch($stmt)){
if(password_verify($password, $hashed_password)){
// Password is correct, so start a new session
session_start();
// Store data in session variables
$_SESSION["loggedin"] = true;
$_SESSION["id"] = $id;
$_SESSION["username"] = $username;
// Redirect user to welcome page
header("location: messages.php");
} else{
// Display an error message if password is not valid
$password_err = "The password you entered was not valid.";
}
}
} else{
// Display an error message if username doesn't exist
$username_err = "No account found with that username.";
}
} else{
echo "Oops! Something went wrong. Please try again later.";
}
}
// Close statement
mysqli_stmt_close($stmt);
}
// Close connection
mysqli_close($link);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>PC Request Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<style type="text/css">
body {
font-family: 'Questrial', sans-serif;
background-image: url("img/hero2.jpg");
background-size: cover;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
background: #eee;
border-bottom: 1px solid #fff;
border-radius: 3px;
}
nav li {
float: left;
}
nav #login {
border-right: 1px solid #ddd;
box-shadow: 1px 0 0 #fff;
background: #FF8C00;
opacity: 0.9;
}
nav #login-trigger,
nav #signup a {
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: ;
padding: 0 20px;
text-decoration: none;
color: #444;
}
nav #signup a {
border-radius: 0 3px 3px 0;
}
nav #login-trigger {
border-radius: 3px 0 0 3px;
}
nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
background: #fff;
}
nav #login-content {
display: none;
position: absolute;
top: 24px;
right: 0;
z-index: 999;
background: #fff;
opacity: 0.9;
background-image: linear-gradient(top, #fff, #eee);
padding: 15px;
border-radius: 3px 0 3px 3px;
border-bottom: 6px solid #FF8C00;
}
nav li #login-content {
right: 0;
width: 250px;
}
/*--------------------*/
#inputs input {
background: #f1f1f1;
padding: 6px 5px;
margin: 0 0 5px 0;
width: 225px;
border: 1px solid #ccc;
border-radius: 3px;
}
#inputs input:focus {
background-color: #fff;
border-color: ;
outline: none;
box-shadow:;
}
/*--------------------*/
#login #actions {
margin: 10px 0 0 0;
}
#login #submit {
background-color: #FF8C00;
background-image: linear-gradient(top, #e97171, #d14545);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 15px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
border: 1px solid #7e1515;
float: left;
height: 30px;
padding: 0;
width: 100px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #FFF;
}
#login #submit:hover,
#login #submit:focus {
background-color: #E88300;
background-image: linear-gradient(top, #d14545, #e97171);
}
#login #submit:active {
outline: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#login #submit::-moz-focus-inner {
border: none;
}
#login label {
float: right;
line-height: 30px;
}
#login label input {
position: relative;
top: 2px;
right: 2px;
}
.ctn {
display: flex;
justify-content: center;
height: 100%;
min-height: 100%;
}
#check {
display: none;
}
.btn-label {
display: flex;
justify-content: center;
align-items: center;
background-color: #ff6347;
border: none;
font-family: 'Raleway', serif;
font-size: 30px;
color: #fffeee;
margin-top: 20%;
height: 50px;
width: 200px;
}
.btn-text {
font-family: 'Raleway', serif;
font-size: 30px;
color: #fffeee;
}
.load {
display: none;
width: 20px;
height: 20px;
border: 5px solid #fff;
border-radius: 100%;
}
.open {
border-top: 5px solid transparent;
-webkit-animation: load-animate infinite linear 1s;
animation: load-animate infinite linear 1s;
}
#check:checked ~ .btn-label > .btn-text {
display: none;
}
#check:checked ~ .btn-label > .load {
display: inline-block;
}
#-webkit-keyframes load-animate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
opacity: 0.35;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load-animate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
opacity: 0.35;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.twoToneCenter {
text-align: center;
margin: 1em 0;
}
.twoToneButton {
display: inline-block;
outline: none;
padding: 10px 20px;
line-height: 1.4;
background: #0c064e;
border-radius: 4px;
border: 1px solid #000000;
color: #dadada;
text-shadow: #000000 -1px -1px 0px;
position: relative;
transition: padding-right 0.3s ease;
font-weight: 700;
box-shadow: 0 1px 0 #6e6e6e inset, 0px 1px 0 #3b3b3b;
}
.twoToneButton:hover {
box-shadow: 0 0 10px #080808 inset, 0px 1px 0 #3b3b3b;
color: #f3f3f3;
}
.twoToneButton:active {
box-shadow: 0 0 10px #080808 inset, 0px 1px 0 #3b3b3b;
color: #ffffff;
background: #080808;
background: linear-gradient(to bottom, #3b3b3b 0%, #2e2e2e 50%, #141414 51%, #080808 100%);
}
.twoToneButton.spinning {
background-color: #0c064e;
padding-right: 40px;
}
.twoToneButton.spinning:after {
content: '';
right: 6px;
top: 50%;
width: 0;
height: 0;
box-shadow: 0px 0px 0 1px #080808;
position: absolute;
border-radius: 50%;
-webkit-animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
}
.twoToneButton.spinning:before {
content: "";
width: 0px;
height: 0px;
border-radius: 50%;
right: 6px;
top: 50%;
position: absolute;
border: 2px solid #fff;
border-right: 3px solid #27ae60;
-webkit-animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
}
#-webkit-keyframes rotate360 {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate360 {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes exist {
100% {
width: 15px;
height: 15px;
margin: -8px 5px 0 0;
}
}
#keyframes exist {
100% {
width: 15px;
height: 15px;
margin: -8px 5px 0 0;
}
}
select {
margin-bottom: 1em;
background: transparent;
padding: ;
border: 0;
border-bottom: 1px solid black;
font-weight: ;
letter-spacing:;
border-radius: 0;
&:focus, &:active {
outline: 0;
border-bottom-color: red;
}
}
</style>
</head>
<body>
<div id="login-content" style="margin-left: 40px; font-family: Questrial; position: relative;">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<nav>
<ul>
<li id="login">
<a id="login-trigger" href="#" style="color: black;">
View Requests <span>▼</span>
</a>
<div id="login-content">
<form>
<fieldset id="inputs">
<input id="username" type="hidden" name="username" placeholder="Username" value="admin" required>
<input id="password" type="password" name="password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="hidden" name="submitted" id="submitted" value="yes">
<input type="submit" id="submit" name="submit" value="Log in">
</fieldset>
</form>
</div>
</li>
</ul>
</nav>
</form>
</div>
<br /><br />
<div class="container" style="margin-left: 1%; margin-top: -5%">
<img src="img/corelogo.png" width="250px" style="margin-top: 2%;"></img>
<h4>PC Request Form <button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button></h4>
<div class="table-responsive" style="width: 114%;">
<table class="table table-bordered" style="border-radius: 10px;" id="crud_table">
<tr>
<th width="10%" style="display: none;">Tracking Code</th>
<th width="10%" style="display: none;">Date Requested</th>
<th width="30%">Requested By</th>
<th width="10%">Start Date</th>
<th width="10%">Employee Name</th>
<th width="10%">Position</th>
<th width="10%">Account</th>
<th width="10%">Platform</th>
<th width="45%">Processor</th>
<th width="10%">RAM</th>
<th width="10%">Monitor</th>
<th width="10%">Phone</th>
<th width="10%">Phone Type</th>
<th width="10%">Headset</th>
<th width="10%">Table</th>
<th width="10%">Chair</th>
<th width="10%" style="display: none;">Approval</th>
<th width="10%" style="display: none;">Status</th>
</tr>
<tr>
<td class="req_date" style="display: none;"><?php echo date('Y-m-d');?></td>
<td contenteditable="true" class="reqname"></td>
<td class="date"><input type="date"></td>
<td contenteditable="true" class="empname"></td>
<td class="trackingcode" style="display: none;"></td>
<td class="position">
<select size="1">
<option>SpecOps</option>
<option>Account Specialist</option>
<option>Operations Manager</option>
<option>Supervisor</option>
<option>Admin</option>
<option>I.T.</option>
</select>
</td>
<td class="account">
<select size="1">
<option>Cintas - Hospitality</option>
<option>Cintas - Rentals</option>
<option>Cintas - Fire</option>
<option>Cintas - GSC</option>
<option>Metro Service</option>
<option>Cintas - DeepClean</option>
<option>Rogers</option>
<option>Olibra</option>
<option>American Towns</option>
</select>
</td>
<td class="platform">
<select size="1">
<option>Desktop</option>
<option>Laptop</option>
</select>
</td>
<td class="processor">
<select size="1">
<option>i3</option>
<option>i5</option>
<option>i7</option>
</select>
</td>
<td class="ram">
<select size="1">
<option>4GB</option>
<option>8GB</option>
</select>
</td>
<td class="monitor">
<select size="1">
<option>1</option>
<option>2</option>
</select>
</td>
<td class="phone">
<select size="1">
<option>Hard Phone</option>
<option>Soft Phone</option>
</select>
</td>
<td class="phonetype">
<select size="1">
<option>Direct Number</option>
<option>Extension</option>
</select>
</td>
<td class="headset">
<select size="1">
<option>Yes</option><option>No</option>
</select>
</td>
<td class="req_table">
<select size="1">
<option>Yes</option><option>No</option>
</select>
</td>
<td class="req_chair">
<select size="1">
<option>Yes</option><option>No</option>
</select>
</td>
<td class="approval" style="display: none;">Pending</td>
<td class="status" style="display: none;">Ongoing</td>
</tr>
</table>
<div align="right">
</div>
<div align="center" class="twoToneCenter">
<button class="twoToneButton" name="save" id="save">Send</button>
</div>
<br />
<div id="inserted_item_data"></div>
</div>
</div>
</body>
</html>
<script>
$(function(){
var twoToneButton = document.querySelector('.twoToneButton');
twoToneButton.addEventListener("click", function() {
twoToneButton.innerHTML = "Processing Request";
twoToneButton.classList.add('spinning');
setTimeout(
function (){
twoToneButton.classList.remove('spinning');
twoToneButton.innerHTML = "Send";
}, 1000000000);
}, false);
});
</script>
<script>
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
</script>
<script>
$(document).ready(function(){
var count = 1;
$('#add').click(function(){
count = count + 1;
var html_code = "<tr id='row"+count+"'>";
html_code += "<td class='trackingcode' style='display: none;'></td>";
html_code += "<td class='req_date' style='display: none;''><?php echo date('Y-m-d');?></td>";
html_code += "<td contenteditable='true' class='reqname'></td>";
html_code += "<td class='date'><input type='date'></td>";
html_code += "<td contenteditable='true' class='empname'></td>";
html_code += "<td class='position'><select><option>SpecOps</option><option>Account Specialist</option><option>Operations Manager</option><option>Supervisor</option><option>Admin</option><option>I.T.</option></select></td>";
html_code += "<td class='account'><select><option>Cintas - Hospitality</option><option>Cintas - Rentals</option><option>Cintas - Fire</option><option>Cintas - GSC</option><option>Metro Service</option><option>Cintas - DeepClean</option><option>Rogers</option><option>Olibra</option><option>American Towns</option></select></td>";
html_code += "<td class='platform'><select><option>Desktop</option><option>Laptop</option></select></td>";
html_code += "<td class='processor'><select><option>i3</option><option>i5</option><option>i7</option></select></td>";
html_code += "<td class='ram'><select><option>4GB</option><option>8GB</option></select></td>";
html_code += "<td class='monitor'><select><option>1</option><option>2</option></select></td>";
html_code += "<td class='phone'><select><option>Hard Phone</option><option>Soft Phone</option></select></td>";
html_code += "<td class='phonetype'><select><option>Direct Number</option><option>Extension</option></select></td>";
html_code += "<td class='headset'><select><option>Yes</option><option>No</option></select></td>";
html_code += "<td class='req_table'><select><option>Yes</option><option>No</option></select></td>";
html_code += "<td class='req_chair'><select><option>Yes</option><option>No</option></select></td>";
html_code += "<td class='approval' style='display: none;'>Pending</td>";
html_code += "<td class='status' style='display: none;'>Ongoing</td>";
html_code += "<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>";
html_code += "</tr>";
$('#crud_table').append(html_code);
});
$(document).on('click', '.remove', function(){
var delete_row = $(this).data("row");
$('#' + delete_row).remove();
});
$('#save').click(function(){
var trackingcode = [];
var req_date = [];
var reqname = [];
var date = [];
var empname = [];
var position = [];
var account = [];
var platform = [];
var processor = [];
var ram = [];
var monitor = [];
var phone = [];
var phonetype = [];
var headset = [];
var req_table = [];
var req_chair = [];
var approval = [];
var status = [];
$('.trackingcode').each(function(){
trackingcode.push($(this).text());
});
$('.req_date').each(function(){
req_date.push($(this).text());
});
$('.reqname').each(function(){
reqname.push($(this).text());
});
$('.date').each(function(){
date.push($(this).find('input').val());
});
$('.empname').each(function(){
empname.push($(this).text());
});
$('.position').each(function(){
position.push($(this).find('select').val());
});
$('.account').each(function(){
account.push($(this).find('select').val());
});
$('.platform').each(function(){
platform.push($(this).find('select').val());
});
$('.processor').each(function(){
processor.push($(this).find('select').val());
});
$('.ram').each(function(){
ram.push($(this).find('select').val());
});
$('.monitor').each(function(){
monitor.push($(this).find('select').val());
});
$('.phone').each(function(){
phone.push($(this).find('select').val());
});
$('.phonetype').each(function(){
phonetype.push($(this).find('select').val());
});
$('.headset').each(function(){
headset.push($(this).find('select').val());
});
$('.req_table').each(function(){
req_table.push($(this).find('select').val());
});
$('.req_chair').each(function(){
req_chair.push($(this).find('select').val());
});
$('.approval').each(function(){
approval.push($(this).text());
});
$('.status').each(function(){
status.push($(this).text());
});
$.ajax({
url:"insert-message.php",
method:"POST",
data:{trackingcode:trackingcode, req_date:req_date, reqname:reqname, date:date, empname:empname, position:position, account:account, platform:platform, processor:processor, ram:ram, monitor:monitor, phone:phone, phonetype:phonetype, headset:headset, req_table:req_table, req_chair:req_chair, approval:approval, status:status},
success:function(data){
alert(data);
window.location.reload()
$("td[contentEditable='true']").text("");
for(var i=2; i<= count; i++)
{
$('tr#'+i+'').remove();
}
fetch_item_data();
}
});
});
});
</script>
tag if for a cell
You must use a into tag this way
<td><input type="text" name="input_name" class="input_class" required></td>
You would have to use javascript or jQuery.
$('#save').click(function(){
var valid = true;
// Check for validation here, then proceed
$.each($('[required]'), function(v){
if ($.trim(v.html()) == '') {
isValid = false;
return;
}
});
if (!isValid) {
// highlight fields in red or whatever to show user error(s) here
return false;
}
// continue with the rest of your code here
});
Hi this is late but hope if someone need this answer
use if statement.
if(trackingcode !='' && req_date !='' && reqname !=''){
$.ajax({
url:"insert-message.php",
method:"POST",
data:{trackingcode:trackingcode, req_date:req_date, reqname:reqname, date:date, empname:empname, position:position, account:account, platform:platform, processor:processor, ram:ram, monitor:monitor, phone:phone, phonetype:phonetype, headset:headset, req_table:req_table, req_chair:req_chair, approval:approval, status:status},
success:function(data){
alert(data);
window.location.reload()
$("td[contentEditable='true']").text("");
for(var i=2; i<= count; i++)
{
$('tr#'+i+'').remove();
}
fetch_item_data();
}
});
}else{
alert('Required');
}
Related
I have a site where a user can post an image, along with some other information about said image. I have a sidebar for users to navigate to other parts of that specific side of my site.
It looks like it is displaying outside the div that I intended and envisioned all posts would be under, and it's worth mentioning that upon each new post, it is appearing farther and farther outside it's original intended place until reaching the body.
Here's what I mean. The screenshots are zoomed out screenshots of the site.
Just below is the code to the container which contains all my code for the tabs and posts, above that is just the "Answer Key" title, and the posting modal that the button to the right of it pulls out. Below it is the php that sends all the info the user inputted into the modal to the database. Apologies for the slight messiness.
<div id="container" class="row">
<div class="tab col-sm-3 border border-end-0 border-start-0" id="sidenav">
<ul style="list-style-type:none;padding:0;margin:0;" class="text-end" id="menu">
<li>
<a class="tablinks">Home</a>
</li>
<li>
<a class="tablinks">Calculators</a>
</li>
</ul>
</div>
<div id="entirepost" class="col-sm-9">
<?php
$query = mysqli_query($conn,"SELECT *,UNIX_TIMESTAMP() - sub_date_created AS TimeSpent from submission LEFT JOIN user on user.user_id = submission.sub_user_id order by submission_id DESC")or die(mysqli_error());
while($submission_row=mysqli_fetch_array($query)){
$id = $submission_row['submission_id'];
$upid = $submission_row['sub_user_id'];
$posted_by = $submission_row['firstname']." ".$submission_row['lastname'];
?>
<div id="posts">
<?php
if((isset($_SESSION['role']) && $_SESSION['role'] == "admin")){
echo "<a style='float:right; font-size: large;' class='btn btn-outline-danger' href='deletesubmission.php?id=" . $id . "'><b>×</b></a>";
}
elseif((isset($_SESSION['role']) && $_SESSION['role'] == "developer")){
echo "<a style='float:right; font-size: large;' class='btn btn-outline-danger' href='deletesubmission.php?id=" . $id . "'><b>×</b></a>";
}
elseif((isset($_SESSION['user_id']) && $_SESSION['user_id'] == $upid)) {
echo "<a style='float:right; font-size: large;' class='btn btn-outline-danger' href='deletesubmission.php?id=" . $id . "'><b>×</b></a>";
}
else {
echo "";
}
?>
<h3><?php echo $submission_row['sub_title']; ?></h3>
<h5>
<?php echo "<span class='badge rounded-pill' id='grade" . $submission_row['grade'] . "Flare'>" . $submission_row['grade'] . " Grade</span>"; ?>
<?php echo $submission_row['teacher']; ?> · <?php echo $submission_row['subject']; ?><br>
</h5>
<img id="uploadedImage" src="<?php echo "images//" . $submission_row['image_url'] ?>"/>
<p>
<?php echo $submission_row['sub_content'];?>
<!-- </?php echo "images//" . $submission_row['image_url'] ?><br> -->
<table id="submissionInfoTable">
<thead>
<tr>
<th width="25%">Assigned</th>
<th>Due</th>
</tr>
</thead>
<tbody>
<tr>
<td><i><?php echo date('F d, Y', $submission_row['assigned']) ?></i></td>
<td><i><?php echo date('F d, Y', $submission_row['due']) ?></i></td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2">
<?php echo "<b>" . $submission_row['weight'] . "%</b> of your grade"; ?>
<i style="color:grey" class="bi bi-info-circle" data-bs-toggle="tooltip" title="Assignments may weigh differently depending on the teacher's grading system and how many other assignments are under this weight"></i>
</td>
</tr>
</tbody>
</table>
</p>
<small>
<i>
<?php echo $posted_by; ?>
</i>
<?php
if((isset($_SESSION['role']) && $_SESSION['role'] == "admin")){
echo "<span class='badge bg-primary'>Admin</span>";
}
elseif((isset($_SESSION['role']) && $_SESSION['role'] == "developer")){
echo "<span class='badge bg-primary'>Dev</span>";
}
else {
echo "";
}
?> ·
<?php
$days = floor($submission_row['TimeSpent'] / (60 * 60 * 24));
$remainder = $submission_row['TimeSpent'] % (60 * 60 * 24);
$hours = floor($remainder / (60 * 60));
$remainder = $remainder % (60 * 60);
$minutes = floor($remainder / 60);
$seconds = $remainder % 60;
if($days > 0)
echo date('F d, Y - H:i:sa', $submission_row['date_created']);
elseif($days == 0 && $hours == 0 && $minutes == 0)
echo "A few seconds ago";
elseif($days == 0 && $hours == 0)
echo $minutes.' minutes ago';
elseif($days == 0 && $hours == 1)
echo $hours.' hour ago';
elseif($days == 0 && $hours > 1)
echo $hours.' hours ago';
?>
</small>
<hr>
</div>
<br>
</div>
<?php
}
?>
</div>
#content {
margin: 20px;
}
#postcontent {
resize: none;
outline: none;
border: 1px solid rgb(192, 192, 192);
transition: all 0.5s ease;
border-radius: 16px;
padding: 10px;
width: 100%;
margin-top: 15px;
}
#postcontent:focus {
border: 1px solid #5865F2;
}
#entirepost {
border-right: 1px solid gray;
border-left: 1px solid gray;
/* border-radius: 5px; */
padding: 20px;
/* width:auto; */
}
#commentstextarea {
resize: none;
outline: none;
border: 1px solid gray;
transition: all 0.5s ease;
}
#commentstextarea:focus {
border: 1px solid #5865F2;
}
#comments {
margin-top: 10px;
}
#commentcontent {
margin-top: 1%;
padding-left:10px;
border-left: 3px solid #ccc;
width: 50%;
}
#commentstitle {
margin-left: 1%;
margin-top: 2%;
}
#title {
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
margin-bottom: 12px;
outline: none;
border-radius: 16px;
background-color: transparent;
border: 1px solid rgb(192, 192, 192);
color: black;
transition: all 0.5s ease;
}
#title:focus {
border: 1px solid #5865F2;
}
#header {
padding:5px;
}
#NewSubmission {
background-color: transparent;
color: #3d4cf3;
border: 1px solid #a3a9f5;
}
#NewSubmission:hover {
background-color:#a3a9f5;
}
#PageTitle {
width:40%;
display: inline;
}
#container {
width: 100%;
padding-right: 0;
}
#sidenav {
padding-right: 0;
}
.tab {
float: left;
background-color: #f1f1f1;
transition: all 0.3s ease;
height: 100%;
}
.tab button, .tab a {
display: block;
text-decoration: none;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
transition: all 0.3s ease;
}
.tab button:hover, .tab a:hover {
background-color: #ddd;
transition: all 0.3s ease;
}
.tab button.active, .tab a:hover {
background-color: #ccc;
transition: all 0.3s ease;
}
#search {
transition: all 0.3s ease;
width: 100%;
padding: 1%;
margin: 1%px;
outline: none;
border: none;
background-color: rgb(231, 230, 230);
}
.select2, input {
margin-top: 10px;
}
.select2 {
font-size: 16px;
outline: none;
border-radius: 16px;
}
.select2-selection {
-webkit-box-shadow: 0;
box-shadow: 0;
background-color: #fff;
border: 0;
border-radius: 16px;
color: #555555;
font-size: 14px;
outline: 0;
min-height: 48px;
text-align: left;
}
.select2-selection__rendered {
margin: 10px;
border-radius: 16px;
}
.select2-selection__arrow {
margin: 10px;
border-radius: 16px;
}
[class^='select2'] {
border-radius: 16px !important;
}
#weight, #DateAssign, #DateDue {
width: 80%;
font-size: 16px;
padding: 8px;
outline: none;
border-radius: 16px;
background-color: transparent;
border: 1px solid rgb(192, 192, 192);
color: black;
transition: all 0.5s ease;
}
#weight:focus {
border: 1px solid #5865F2;
}
.modal-dialog {
width: 50%;
}
/* #sidenav {
width: 17%;
background-color: #ccc;
}
#container {
width: 300px;
background-color: #ffcc33;
margin: auto;
}
#sidenav {
width: 17%;
background-color: #ccc;
float: left;
height: auto;
}
#entirepost {
width: 83%;
float: left;
height: auto;
}
#clear {
clear: both;
} */
input[type=file]::file-selector-button {
border: 1px solid #34495e;
padding: 6px;
border-radius: 16px;
background-color: transparent;
width: 150px;
transition: all 0.5s ease;
}
input[type=file]::file-selector-button:hover {
background-color: #34495e;
}
#uploadedImage {
border-radius: 12px;
max-width: 100%;
height: auto;
margin-bottom: 15px;
}
#submissionInfoTable {
width: 50%;
}
#submissionInfoTable th, td {
padding: 2px;
/* border: 1px solid black; */
}
#dropdownmenu i {
float:right;
}
#dropdownmenu {
width: 200px;
}
#grade9thFlare {
background-color: rgb(133, 244, 228);
color: rgb(50, 110, 121);
}
#grade10thFlare {
background-color: rgb(198, 244, 179);
color: rgb(50, 100, 54);
}
#grade11thFlare {
background-color: rgb(206, 213, 255);
color: rgb(50, 100, 145);
}
#grade12thFlare {
background-color: rgb(239, 222, 240);
color: rgb(148, 91, 206);
}
The two posts below the first are both underneath the sidebar and are not within the left and right borders of the first post. And, of course, the 2 posts at the bottom were not in there in the original code as shown above. the sidebar is using the bootstrap utility .col-sm-4 while the posts are all supposed to be using .col-sm-8.
This also seems to happen when I attempt to add a comments feature to another part of my site, the discussion board.
Maybe my googling- I mean, programming skills aren't as good as they usually are, but a good amount of research has yielded no results for my specific issue.
in #entirepost use these
If you want your posts to be displayed horizontally
`display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: row;`
and for vertical display use
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
Kindly inform me if it did not helped ...
I have a problem. I created this code that shows products from my database like products:
<?php
include("connect.php");
session_start();
$status="";
if (isset($_POST['id']) && $_POST['id']!="")
{
$Id = $_POST['id'];
$result = mysqli_query($conn,"SELECT * FROM Producten WHERE `Id`='$Id'");
$row = mysqli_fetch_assoc($result);
$naam = $row['Naam'];
$id = $row['Id'];
$prijs = $row['Prijs'];
$foto = $row['Foto'];
$winkelwagen_array = array(
$id=>array(
'id'=>$id,
'naam'=>$naam,
'prijs'=>$prijs,
'hoeveelheid'=>1,
'foto'=>$foto)
);
if(empty($_SESSION["winkelwagen"]))
{
$_SESSION["winkelwagen"] = $winkelwagen_array;
$status = "<div class='box'>Product toegevoegd aan winkelwagen!</div>";
}
else
{
$_SESSION["winkelwagen"] = array_merge($_SESSION["winkelwagen"],$winkelwagen_array);
$status = "<div class='box'>Product toegevoegd aan winkelwagen!</div>";
}
}
?>
<html>
<head>
<link rel='stylesheet' href='css/style.css' type='text/css' media='all' />
</head>
<body>
<div style="width:700px; margin:50 auto;">
<?php
if(!empty($_SESSION["winkelwagen"]))
{
$winkelwagen_hoeveelheid = count(array_keys($_SESSION["winkelwagen"]));
?>
<div class="winkelwagen_div">
<img src="media/winkelwagen_logo.png" /> Winkelwagen<span><?php echo $winkelwagen_hoeveelheid; ?></span>
</div>
<?php
}
$result = mysqli_query($conn,"SELECT * FROM Producten");
while($row = mysqli_fetch_assoc($result))
{
echo "<div class='product_vak'>
<form method='post' actie=''>
<input type='hidden' name='id' value=".$row['Id']." />
<div class='foto'><img src='".$row['Foto']."' /></div>
<div class='naam'>".$row['Naam']."</div>
<div class='prijs'>€".$row['Prijs']."</div>
<button type='submit' class='koop'>Koop nu</button>
</form>
</div>";
}
mysqli_close($conn);
?>
<div style="clear:both;"></div>
<div class="melding_box" style="margin:10px 0px;">
<?php echo $status; ?>
</div>
</div>
</body>
</html>
with this css:
.product_vak {
float:left;
padding: 10px;
text-align: center;
}
.product_vak:hover {
box-shadow: 0 0 0 2px #e5e5e5;
cursor:pointer;
}
.product_vak .naam {
font-weight:bold;
}
.product_vak .koop {
text-transform: uppercase;
background: #F68B1E;
border: 1px solid #F68B1E;
cursor: pointer;
color: #fff;
padding: 8px 40px;
margin-top: 10px;
}
.product_vak .koop:hover {
background: #f17e0a;
border-color: #f17e0a;
}
.melding_box .box{
margin: 10px 0px;
border: 1px solid #2b772e;
text-align: center;
font-weight: bold;
color: #2b772e;
}
.table td {
border-bottom: #F0F0F0 1px solid;
padding: 10px;
}
.winkelwagen_div {
float:right;
font-weight:bold;
position:relative;
}
.winkelwagen_div a {
color:#000;
}
.winkelwagen_div span {
font-size: 12px;
line-height: 14px;
background: #F68B1E;
padding: 2px;
border: 2px solid #fff;
border-radius: 50%;
position: absolute;
top: -1px;
left: 13px;
color: #fff;
width: 14px;
height: 13px;
text-align: center;
}
.winkelwagen .verwijderen {
background: none;
border: none;
color: #0067ab;
cursor: pointer;
padding: 0px;
}
.winkelwagen .verwijderen:hover {
text-decoration:underline;
}
But when I load the page I see 2 products above each other in a very very large size. Now how can I get them to load next to each other and in a smaller size, because now they are filling the whole screen per product!
I already tried giving product_vak a width, but the image doesn't size with that!
How can I fix this?
try like this
.product_vak {
float:left;
padding: 10px;
text-align: center;
width:40%;
I have the below Table with HTML when i click the button(update) in the table row , the particular row values i.e the button belongs to which row the respected row values only insert or update in a table.
<script type = "text/javascript" >
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
alert(data);
};
</script>
<script type = "text/javascript" >
history.pushState(null, null, 'new2.html');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'new2.html');
});
</script>
<style>
<script>
$(function() {
var pickers = {};
$('table tr').editable({
dropdowns: {
Aex: ['Automation', 'Manual']
},
edit: function(values) {
$(".edit i", this)
.removeClass('fa-pencil')
.addClass('fa-save')
.attr('title', 'Save');
pickers[this] = new Pikaday({
field: $("td[data-field=birthday] input", this)[0],
format: 'MMM D, YYYY'
});
},
save: function(values) {
$(".edit i", this)
.removeClass('fa-save')
.addClass('fa-pencil')
.attr('title', 'Edit');
if (this in pickers) {
pickers[this].destroy();
delete pickers[this];
}
},
cancel: function(values) {
$(".edit i", this)
.removeClass('fa-save')
.addClass('fa-pencil')
.attr('title', 'Edit');
if (this in pickers) {
pickers[this].destroy();
delete pickers[this];
}
}
});
});
</script><script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
body {
margin-bottom: 100px;
}
.row {
margin-bottom: 20px;
}
pre {
margin-top: 0;
}
.button.button-small {
height: 30px;
line-height: 30px;
padding: 0px 10px;
}
td input[type=text], td select {
width: 100%;
height: 30px;
margin: 0;
padding: 2px 8px;
}
th:last-child {
text-align: right;
}
td:last-child {
text-align: right;
}
td:last-child .button {
width: 30px;
height: 30px;
text-align: center;
padding: 0px;
margin-bottom: 0px;
margin-right: 5px;
background-color: #FFF;
}
td:last-child .button .fa {
line-height: 30px;
width: 30px;
}
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
color: #fff;
padding: 100px 55px;
font-family: Montserrat, sans-serif;
height:500px;
background-image: url(header.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center;
}
.container-fluid {
padding: 60px 50px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #0099ff;
font-size: 50px;
}
.logo-small1 {
color: #0099ff;
font-size: 20px;
}
.logo {
color: #0099ff;
font-size: 200px;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
#section {
width:350px;
padding:10px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #39ac73;
}
.carousel-indicators li {
border-color: #39ac73;
}
.carousel-indicators li.active {
background-color: #39ac73;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
.panel {
border: 1px solid #39ac73;
border-radius:0 !important;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #39ac73;
background-color: #fff !important;
color: #39ac73;
}
.panel-heading {
color: #fff !important;
background-color: #39ac73 !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: white !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #39ac73;
color: #fff;
}
.navbar {
margin-bottom: 0;
background-color: #fff;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
min-height: 70px;
}
.navbar li a, .navbar .navbar-brand {
color: #39ac73 !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #39ac73 !important;
background-color: #e5fff7 !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #39ac73;
}
.slideanim {visibility:hidden;}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
#keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
#-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
#media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
}
#media screen and (max-width: 480px) {
.logo {
font-size: 150px;
}
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Windows</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link href="http://code.jquery.com/jquery-1.11.3.min.js" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="css/pikaday.css" >
<link rel="stylesheet" href="css/pikaday-skeleton.css" >
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<div class="container-fluid text-center">
<h1>Windows Data</h1>
<table id="tab_logic" class="table">
<thead >
<tr class="info">
<th>S.No</th>
<th>Machine Name</th>
<th>IP</th>
<th>Host name</th>
<th>Tester Name</th>
<th>Installation Plan</th>
<th>OS Version</th>
<th>MI Version</th>
<th>AUT/MAT</th>
<th>Reimage</th>
<th>Edit</th>
<th>Update</th>
<th>Mail</th>
</tr>
</thead>
<tbody>
<tr id='addr0' data-id="1">
<td id="sn" data-field="S.No">1</td>
<td data-field="Machine Name">sxsxsdsd</td>
<td data-field="IP">sssss</td>
<td data-field="Host name">zxzxzx</td>
<td data-field="Tester Name">Unassigned</td>
<td data-field="Installation Plan">Null</td>
<td data-field="OS Version">Windows 8.1 Pro</td>
<td data-field="MI Version">Null</td>
<td data-field="Aex">Manual</td>
<td data-field="Reimage">21/7/2015</td>
<td><a class="button button-small edit" title="Edit"><i class="fa fa-pencil"></i></a></td>
<td><button type="submit" onclick="one()" class="btn btn-primary"><span class="glyphicon glyphicon-folder-open"></span></button></td>
<td ><button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-send"></span></button></td>
</tr>
<tr data-id="2">
<td data-field="S.No">2</td>
<td data-field="Machine Name">sdsdsdsd</td>
<td data-field="IP">dsdsdsdsd</td>
<td data-field="Host name">sdsdsdsdsd</td>
<td data-field="Tester Name">dsdsdsdsd</td>
<td data-field="Installation Plan">[ For OLS ] MI PC offline</td>
<td data-field="OS Version">Windows 8.1 Pro</td>
<td data-field="MI Version">Null</td>
<td data-field="Aex">Manual</td>
<td data-field="Reimage">21/7/2015</td>
<td>
<a class="button button-small edit" title="Edit">
<i class="fa fa-pencil"></i>
</a>
</td>
<td><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-folder-open"></span></button></td>
<td><button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-send"></span></button></td>
</tr>
<tr data-id="3">
<td data-field="S.No">3</td>
<td data-field="Machine Name">sdsdsdsd</td>
<td data-field="IP">dsdsdsd</td>
<td data-field="Host name">sdsdsdsd</td>
<td data-field="Tester Name">Unassigned</td>
<td data-field="Installation Plan">Null</td>
<td data-field="OS Version">Windows 8.1 Pro</td>
<td data-field="MI Version">Null</td>
<td data-field="Aex">Manual</td>
<td data-field="Reimage">21/7/2015</td>
<td>
<a class="button button-small edit" title="Edit">
<i class="fa fa-pencil"></i>
</a>
</td>
<td><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-folder-open"></span></button></td>
<td><button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-send"></span></button></td>
</tr>
</tbody>
</table>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="Pikaday/pikaday.js"></script>
<script src="build/table-edits.min.js"></script>
</body>
</html>
Use for loop to display html table, and use index in the button.
For example, if you want to delete a meeting from the table by clicking delete button next to it, then you can do something like this:
Example format
meeting1 DELETE(button)
meeting2 DELETE(button)
meeting3 DELETE(button)
The delete button will be same only the url will be changing.
echo "<tr>
<th>Status</th>
<th>Title</th>
<th>Scheduled By</th>
<th>Scheduled Date</th>
<th>Start Time</th>
<th>End Time</th>
<th>Actions</th>
</tr>";
for ($n = 0; $n < count($meeting_array); $n++) {
$meetingname = $meeting_array[$n]; //contains meeting names.
echo "<td style= \"color : darkgoldenrod; text : strong;\" >" . $status . "</td>";
echo "<td>" . $meetingname2 . "</td>";
echo "<td>" . $extractedname . "</td>";
echo "<td>" . $mydate . "</td>";
echo "<td>" . $mystarttime . "</td>";
echo "<td>" . $myendtime . "</td>";
echo"<td>";
// pass meeting name in url.
echo"<a href=\"View_Meeting.php?id={$meetingname}\" <img src=\"../img/read1.png\" alt=\"Read\" /> ";
echo "</td>";
}
echo "</tr>";
I am currently trying to make my php, on the same page as the form, display the values correctly and calculate the overall passer rating. My calculations follow the formatting this way:
C = ((# completions/#attempts) *100 -30)/20
Y= ((# yards/#attempts) -3)/4
T = ((#touchdowns/#attempts) *20)
I = 2.375 - (#interceptions/#attempts) * 35
Pass Rating = ((C+Y+T+I)/6) *100
The table that holds the values from the form should have a default value of 0 and below it should print the overall rating of Poor, Good and Great depending on the passer rating.
As you see I have a few issues.
My issues are:
The Passing Rating doesn't default to 0.
My Overall Rating doesn't print whether it is Poor, Good, or Great. It only prints Poor
I was hoping someone can explain this. I have been troubleshooting it for hours now. No luck sadly. ps(overall rating printed twice to see which version I want to use)
Also the snippet won't run the php unless you have php on your comp. Need a server to see it even with the snippet I guess
UPDATE: I put 20 instead of 4 to divide in Y value. That fixed my calculations but not the overall rating.
SECOND UPDATE: I added the line:
if(($_POST['First'] != '') && ($_POST['Last'] != ''))
so that I can keep my defaults for the table.
My last issues is now the Overall Rating displaying the correct label of either Poor, Good or Great
<?php
$first = "";
$last = "";
$completions = 0;
$attempts = 0;
$yards = 0;
$touchdowns = 0;
$interceptions = 0;
$TotalScores = 0;
if(isset($_POST['First'])) {
$first = $_POST['First'];
}
if(isset($_POST['Last'])){
$last = $_POST['Last'];
}
if(isset($_POST['completions'])) {
$completions = $_POST['completions'];
}
if(isset($_POST['attempts'])) {
$attempts = $_POST['attempts'];
}
if(isset($_POST['yards'])){
$yards = $_POST['yards'];
}
if(isset($_POST['touchdowns'])) {
$touchdowns = $_POST['touchdowns'];
}
if(isset($_POST['interceptions'])) {
$interceptions = $_POST['interceptions'];
}
function rating ($com, $att, $yards, $touchd, $inter){
//$C = 0;
//$Y = 0;
//$T = 0;
//$I = 0;
$passRating = 0;
$C = ((($com /$att)*100)-30) / 20;
$Y = (($yards/$att)-3)/4;
$T = ($touchd/$att)*20;
$I = 2.375 - (($inter/$att)*35);
$passRating = (($C + $Y + $T + $I)/6)*100;
return $passRating;
}
if(is_numeric($completions) && is_numeric($attempts) && is_numeric($yards)
&& is_numeric($touchdowns) && is_numeric($interceptions)) {
//if(($_POST['completions'] >0) && ($_POST['attempts'] >0) && ($_POST['yards'] >0)
// && ($_POST['touchdowns'] >0) && ($_POST['interceptions'] >0) ){
if(($_POST['First'] != '') && ($_POST['Last'] != '')){
$TotalScore = rating($completions, $attempts, $yards,
$touchdowns, $interceptions);
//echo $TotalScore;
if ($TotalScore < 85 && $TotalScore >0){
$score = "Poor";
}
elseif($TotalScore >=85 && $TotalScore <90){
$score = "Mediocre";
}
elseif ($TotalScore >=90 && $TotalScore <95){
$score = "Good";
}
elseif ($score >= 95){
$score = "Great";
}
}
//}
}
else {
$score = "Invalid Input!";
//echo $TotalScore;
}
?>
.form-container {
padding-right: 20px;
}
fieldset {
width: 200px;
height: 30px;
padding: 5px;
}
input {
padding-bottom: 5px;
}
#text-container {
margin-top: 100px;
width: 1260px;
height: 400px;
background-color: white;
text-align: left;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
#text-container p {
margin-left: 30px;
font-size: 20px;
}
#text-container h1 {
margin-left: 30px;
color: #4EA24E;
padding-top: 10px;
}
#paragraph {
position: absolute;
width: 1350px;
height: 600px;
border: 1px solid black;
margin-left: 500px;
margin-top: 60px;
}
.signup {
float: right;
height: 600px;
width: 500px;
border: 1px solid black;
background-color: blue;
}
#form-box {
margin-top: 10px;
width: 550px;
height:600px;
maring-left: 0;
float: left;
/*background-color: #B2D1F0;*/
/*border-radius: 30px;*/
/*box-shadow: 0 0 10px black;*/
}
#form-box label {
float: left;
width: 200px;
text-align: right;
margin-right: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
font-size: 20px;
margin-bottom: 30px;
margin-left: 20px;
}
#form-box input[type="text"] {
margin-bottom: 30px;
height: 20px;
width: 200px;
font-size: 15px;
margin-left: 10px;
box-shadow: 0 0 5px black;
}
.numInput input[type="text"] {
margin-bottom: 30px;
height: 20px;
width: 50px;
font-size: 15px;
margin-left: 10px;
box-shadow: 0 0 5px black;
}
#form-box button {
margin-bottom: 30px;
height: 35px;
width: 100px;
font-size: 25px;
margin-right: 100px;
float: right;
background-color: #4EA24E;
color: orange;
border-radius: 5px;
text-shadow: 0 0 10px black;
box-shadow: 0 0 10px black;
font-family: Rockwell, 'Courier Bold', serif
}
#form-box button:hover {
color: gold;
}
#form-box h1{
text-align: left;
margin-right: 65px;
color: #4EA24E;
font-size: 35px;
margin-bottom: 0;
text-shadow: 0 0 1px black;
margin-left: 30px;
}
#form-box h2{
text-align: right;
margin-right: 85px;
color: #114611;
}
#calcContainer {
clear: both;
width: 200px;
height: 500px;
float: left;
margin-top: 600px;
border: 1px solid black;
}
.table {
margin-top: 20px;
}
.table td, .table tr {
border: 1px solid black;
width: 150px;
}
.table h3 {
margin-top: 40px;
}
/*table {
margin-top: 200px;
}
td , tr{
border: 1px solid black;
width: 150px;
}
*/
span {
margin-left: 40px;
}
#screen {
}
html {
margin: 0;
padding: 0;
min-width: 960px;
max-width: 1000px;
background: url(bubbles.jpg) no-repeat;
height: 100%;
background-size: 960px 960px;
//margin-bottom: 100px;
}
#footer {
width:100%;
height:100px !important;
border-top:4px solid black;
background-color:orange;
//position: relative;
//bottom: 0;
margin-bottom: 0 auto;
//position: fixed;
z-index: 10;
clear: both;
margin-top: 500px;
margin-left: 30px;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
body {
margin-bottom: 100px;
margin-right: 30px;
padding: 0;
width: 100%;
height: 100%;
}
h1.name{
/*font-family: Lato, 'Courier Bold', sanserif;*/
font-family: 'KOMIKAX_';
src: url(KOMIKAX_.tff);
font-weight: bold;
font-variant: small-caps;
color: "red";
margin-left: 30px;
text-shadow: 0 0 1px black;
}
#header {
margin-left: 30px;
width:100%;
}
#gradient {
height: 65px;
/* IE 10 */
background-image: -ms-linear-gradient(top, black 0%, orange 100%);
/* Firefox */
background-image: -moz-linear-gradient(top, black, orange);
/* Safari & Chrome */
background-image: -webkit-gradient(linear,left bottom,left top, color-stop(0, orange),color-stop(1, black));
box-shadow: inset 0 0 15px black;
}
#nav1 {
list-style: none;
}
#nav2 {
list-style: none;
}
.nav a {
text-decoration: none; /*remove underline*/
text-transform: uppercase;
color: white;
font-family: Rockwell, 'Courier Bold', serif;
font-size: 20px;
padding-bottom: 15px;
}
.nav li {
display: inline;
float: left;
padding: 10px;
}
.nav a:visited {
text-decoration: none;
color: #fff;
}
.nav a:hover {
text-decoration: none;
color: black;
background-color:transparent;
}
.nav a:active {
text-decoration: none;
color: #19A3FF;
}
.container {
margin-left: 30px;
height: 560px;
background-color: black;
width: 1000px;
border-radius: 3px;
float: left;
}
.text-left {
float: left;
padding-left: 30px;
}
.text-right {
float: right;
padding-right: 55px;
}
.text-center {
float: center;
margin: auto 0;
}
.MainImage {
background-image: url(http://cdn2.sportngin.com/attachments/photo/2021/8243/football_large.jpg);
height: 300px;
background-repeat: no-repeat;
width:99.8%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
padding-bottom: 30px;
display: block;
border: 1px solid;
margin-left: 30px;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}
h1.title {
color: white;
padding-left: 30px;
padding-top: 10px;
font-size: 60px;
font-family: Rockwell, 'Courier Bold', serif;
font-variant: small-caps;
font-weight: bold;
text-shadow: 0 0 3px black;
margin-bottom: 0;
}
#sub {
color: white;
padding-left: 80px;
font-size: 30px;
font-family: Rockwell, 'Courier Bold', serif;
font-variant: small-caps;
text-shadow: 0 0 8px black;
}
/*.highlight {
/*text-shadow: 0 0 10px #E6FFFF;*/
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;
filter: glow(color=#E6FFFF, strength=3);
color: red;
}*/
#sidebar {
height: 1200px;
width: 400px;
float: left;
background-color: #99CC99;
margin-top: 50px;
font-size: 25px;
margin-right: 0;
}
#main-container {
width: 1260px;
height: 230px;
margin-top: 30px;
postion: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
#main-container2 {
width: 1260px;
height: 230px;
postion: relative;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}
#columns {
float: left;
width: 370px;
height: 230px;
background-color: #ECF2F8;
text-align: center;
display: inline-block;
vertical-align: top;
margin-left: 20px;
border-radius: 10px;
box-shadow: 0 0 10px black;
padding-left: 10px;
padding-right: 10px;
border: 1px solid black;
}
#columns-image {
foat: left;
width: 390px;
border: 1px solid black;
height: 230px;
display: inline-block;
margin-left: 18px;
border-radius: 5px;
border: 1px solid black;
}
#bar-left {
height: 230px;
width: 30px;
background-color: blue;
float: left;
margin-right: 20px;
margin-top: 30px;
margin-left: 0;
}
#bar-right {
height: 230px;
width: 30px;
background-color: blue;
float: left;
}
#bullet {
list-style-Type: none;
padding: 0 0 4px 23px;
background: ur(http://www.computerhope.com/arrow.gif) no-repeat left top;
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "stylesheet.css" type = "text/css">
<link rel = "stylesheet" href = "formstylesheet.css" type = "text/css">
<meta http-equiv="X-UA-Compatible" content="IE=80" />
</head>
<div id = "screen">
<body>
<h1 class = "name"><font color = "orange" font size = "20px"> Passer Ratings | </font><font size = "12" font color = "#4EA24E"> Monitor Your Results to Improve!</font></h1>
<div id = "header">
<div id = "gradient">
<div class = "nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class = "container-fluid">
<ul id = "nav1" class= "text-left">
<li><strong>Home</li>
<li>About Us</li>
<li>Teach</li>
<li>Score Board</strong></li>
</ul>
<ul id = "nav2" class = "text-right">
<li><strong>Contact</strong></li>
</ul>
</div><!-- end container-fluid-->
</div><!--end nav-->
</div>
</div> <!-- end header -->
<div id = "Main">
<div class = "MainImage">
<h1 class = "title"> Knowing your Strengths and Weaknesses..<br></h1>
<p id = "sub"><font color= "#4DFFFF"><strong> Makes</strong>
</font> a great player... </p>
</div><!-- end MainImage-->
<form id ="form-box" action = 'passrating.php' method = 'post'>
<h1>Calculate Passer Rating<br><br>
<h2>Submit to Review the information </h2>
<label>First Name </label>
<input type="text" name = 'First' placeholder='First'/><br/>
<label>Last Name:</label>
<input type="text" name = 'Last' placeholder='Last'/><br/>
<label>Pass Completions</label>
<input type="text" name = 'completions' value = 0 class = 'numInput'><br/>
<label>Pass Attempts:</label>
<input type="text" name = 'attempts' value = 0><br/>
<label>Total Passing Yards:</label>
<input type="text" name = 'yards' value = 0><br/>
<label>Touchdowns:</label>
<input type="text" name = 'touchdowns' value = 0><br/>
<label>Interceptions:</label>
<input type="text" name = 'interceptions' value = 0><br/>
<button type="reset" value="Reset">Reset</button>
<button type="submit" value="Submit">Submit</button>
</form>
<div class='calcContainer'>
<table class='table' action = 'passrating.php' method = 'post'>
<h3>Totals for Calculations</h3>
<tr> Test Case:<?php echo "\t" .$first. "\t" .$last; ?></tr>
<tr>
<td>Pass Completions </td>
<td width = "20px"><span value = 0><?php echo $completions; ?></td>
</tr>
<tr>
<td>Pass Attempts </td>
<td><span value = 0><?php echo $attempts; ?></td>
</tr>
<tr>
<td>Total Passing Yards </td>
<td><span value = 0><?php echo $yards; ?></td>
</tr>
<tr>
<td>Touchdowns </td>
<td><span value =0><?php echo $touchdowns; ?></td>
</tr>
<tr>
<td>Interceptions: </td>
<td><span value = 0 ><?php echo $interceptions; ?></td>
</tr>
<tr>
<td>Passing Rating: </td>
<td><span value = 0 ><?php echo $TotalScore; ?></td>
</table>
<p value = " ">The Overall Rating is: <?php echo $score; ?></p>
<p value = ""><?php echo "The Overall Rating is: " .$score. "</br>"; ?></p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "stylesheet.css" type = "text/css">
<link rel = "stylesheet" href = "formstylesheet.css" type = "text/css">
<meta http-equiv="X-UA-Compatible" content="IE=80" />
</head>
<div id = "screen">
<body>
<h1 class = "name"><font color = "orange" font size = "20px"> Passer Ratings | </font><font size = "12" font color = "#4EA24E"> Monitor Your Results to Improve!</font></h1>
<div id = "header">
<div id = "gradient">
<div class = "nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class = "container-fluid">
<ul id = "nav1" class= "text-left">
<li><strong>Home</li>
<li>About Us</li>
<li>Teach</li>
<li>Score Board</strong></li>
</ul>
<ul id = "nav2" class = "text-right">
<li><strong>Contact</strong></li>
</ul>
</div><!-- end container-fluid-->
</div><!--end nav-->
</div>
</div> <!-- end header -->
<div id = "Main">
<div class = "MainImage">
<h1 class = "title"> Knowing your Strengths and Weaknesses..<br></h1>
<p id = "sub"><font color= "#4DFFFF"><strong> Makes</strong>
</font> a great player... </p>
</div><!-- end MainImage-->
<form id ="form-box" action = 'passrating.php' method = 'post'>
<h1>Calculate Passer Rating<br><br>
<h2>Submit to Review the information </h2>
<label>First Name </label>
<input type="text" name = 'First' placeholder='First'/><br/>
<label>Last Name:</label>
<input type="text" name = 'Last' placeholder='Last'/><br/>
<label>Pass Completions</label>
<input type="text" name = 'completions' value = 0 class = 'numInput'><br/>
<label>Pass Attempts:</label>
<input type="text" name = 'attempts' value = 0><br/>
<label>Total Passing Yards:</label>
<input type="text" name = 'yards' value = 0><br/>
<label>Touchdowns:</label>
<input type="text" name = 'touchdowns' value = 0><br/>
<label>Interceptions:</label>
<input type="text" name = 'interceptions' value = 0><br/>
<button type="reset" value="Reset">Reset</button>
<button type="submit" value="Submit">Submit</button>
</form>
<div class='calcContainer'>
<table class='table' action = 'passrating.php' method = 'post'>
<h3>Totals for Calculations</h3>
<tr> Test Case:<?php echo "\t" .$first. "\t" .$last; ?></tr>
<tr>
<td>Pass Completions </td>
<td width = "20px"><span value = 0><?php echo $completions; ?></td>
</tr>
<tr>
<td>Pass Attempts </td>
<td><span value = 0><?php echo $attempts; ?></td>
</tr>
<tr>
<td>Total Passing Yards </td>
<td><span value = 0><?php echo $yards; ?></td>
</tr>
<tr>
<td>Touchdowns </td>
<td><span value =0><?php echo $touchdowns; ?></td>
</tr>
<tr>
<td>Interceptions: </td>
<td><span value = 0 ><?php echo $interceptions; ?></td>
</tr>
<tr>
<td>Passing Rating: </td>
<td><span value = 0 ><?php echo $TotalScore; ?></td>
</table>
<p value = " ">The Overall Rating is: <?php echo $score; ?></p>
<p value = ""><?php echo "The Overall Rating is: " .$score. "</br>"; ?></p>
</div>
</div>
</body>
</html>
What I did to fix my issues:
if(is_numeric($completions) && is_numeric($attempts) && is_numeric($yards)
&& is_numeric($touchdowns) && is_numeric($interceptions)) {
//if(($_POST['completions'] >0) && ($_POST['attempts'] >0) && ($_POST['yards'] >0)
// && ($_POST['touchdowns'] >0) && ($_POST['interceptions'] >0) ){
if(($_POST['First'] != '') && ($_POST['Last'] != '')){
// $TotalScore = rating($completions, $attempts, $yards,
// $touchdowns, $interceptions);
if(($_POST['completions'] <0) || ($_POST['attempts'] <0) || ($_POST['yards'] <0)
|| ($_POST['touchdowns'] <0) || ($_POST['interceptions'] <0) ){
$score = "</br></br><strong>Invalid Input!</strong></br>Please Provide non-Negative Numbers.";
}
//echo $TotalScore;
else {
$TotalScore = rating($completions, $attempts, $yards,
$touchdowns, $interceptions);
if($TotalScore < 0) {
$score = "</br></br><strong>Invalid Results</strong></br>Please review over your scores. The Passing Rating shouldn't be negative.";
}
if($TotalScore > 0 && $TotalScore <85){
$score = "Poor";
}
elseif($TotalScore >=85 && $TotalScore <90){
$score = "Mediocre";
}
elseif ($TotalScore >=90 && $TotalScore <95){
$score = "Good";
}
elseif ($TotalScore >= 95){
$score = "Great";
}
}
//}
}
}
You could use my tiny library ValueResolver in this case, for example:
$value = ValueResolver::resolve('', 'default value'); // returns 'default value' because first argument is empty
and don't forget to use namespace use LapaLabs\ValueResolver\Resolver\ValueResolver;
There are also ability to typecasting, for example if your variable's value should be integer, so use this:
$id = ValueResolver::toInteger('6 apples', 1); // returns 6
$id = ValueResolver::toInteger('There are no apples', 1); // returns 1 (used default value)
Check the docs for more examples
i can not get my Login script to login... i have an index.php with a register form and a login form, the register form works perfectly, but it seems like the login form does not get the information from the database when you enter the "login" button, when logging in you is redirectet to "home.php" which wil show your username with help of sessions. but i get this error "Notice: Undefined variable: username in home.php on line 12"... I think its because its not logging in and the session gets an undefined variabel. I just cant find where the problem is
i have a database named "thesozializer"
and the sql for the table is:
CREATE TABLE IF NOT EXISTS users (
id int(11) NOT NULL,
username varchar(255) NOT NULL,
first_name varchar(255) NOT NULL,
last_name varchar(255) NOT NULL,
email varchar(255) NOT NULL,
password varchar(32) NOT NULL,
sign_up_date date NOT NULL,
activated enum('0','1') NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=latin1;
index.php looks like this:
<?php
mysql_connect("localhost","root","") or die("couldn't connect to database.");
mysql_select_db("thesocializer") or die("couldn't select database");
$reg = #$_POST['reg'];
//declaring variables to prevent errors
$fn = ""; //First Name
$ln = ""; //Last Name
$un = ""; //Username
$em = ""; //Email
$em2 = ""; //Email 2
$pswd = ""; //Password
$pswd2 = ""; // Password 2
$d = ""; // Sign up Date
$u_check = ""; // Check if username exists
//registration form
$fn = strip_tags(#$_POST['fname']);
$ln = strip_tags(#$_POST['lname']);
$un = strip_tags(#$_POST['username']);
$em = strip_tags(#$_POST['email']);
$em2 = strip_tags(#$_POST['email2']);
$pswd = strip_tags(#$_POST['password']);
$pswd2 = strip_tags(#$_POST['password2']);
$d = date("Y-m-d"); // Year - month - day
if ($reg) {
if ($em==$em2) {
// Check if user already exists
$u_check = mysql_query("SELECT username FROM users WHERE username='$un'");
// Count the amount of rows where username = $un
$check = mysql_num_rows($u_check);
//Check whether Email already exists in the database
$e_check = mysql_query("SELECT email FROM users WHERE email='$em'");
//Count the number of rows returned
$email_check = mysql_num_rows($e_check);
if ($check == 0) {
if ($email_check == 0) {
//check all of the fields have been filed in
if ($fn&&$ln&&$un&&$em&&$em2&&$pswd&&$pswd2) {
// check that passwords match
if ($pswd==$pswd2) {
// check the maximum length of username/first name/last name does not exceed 25 characters
if (strlen($un)>25||strlen($fn)>25||strlen($ln)>25) {
echo "maximum length of username/first name/last name is 25 characters!";
}
else
{
// check the maximum length of password does not exceed 25 characters and is not less than 5 characters
if (strlen($pswd)>30||strlen($pswd)<5) {
echo "Password must be between 5 and 25 characters!";
}
else
{
//encrypt password and password 2 using md5 before sending to database
$pswd = md5($pswd);
$pswd2 = md5($pswd2);
$query = mysql_query("INSERT INTO users VALUES ('','$un','$fn','$ln','$em','$pswd','$d','0')");
die("<h2>welcome to The Socializer!</h2>Login to get started");
}
}
}
else {
echo "your passwords is incorrect";
}
}
else
{
echo "fill in all fields";
}
}
else
{
echo "email already in use";
}
}
else
{
echo "username already in use";
}
}
else {
echo "The emails is not alike!";
}
}
//User Login Code
if (isset($_POST["user_login"]) && isset($_POST["password_login"])) {
$user_login = preg_replace('#[^A-Za-z0-9]#i', '', $_POST["user_login"]);
$password_login = preg_replace('#[^A-Za-z0-9]#i', '', $_POST["password_login"]);
$password_login_md5 = md5($password_login);
$sql = mysql_query("SELECT id FROM users WHERE username='$user_login' AND password='$password_login_md5' LIMIT 1");
//Check for their existance
$userCount = mysql_num_rows($sql); //Count the number of rows returned
if ($userCount == 1) {
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
}
$_SESSION["user_login"] = $user_login;
header("location: home.php");
exit();
}
else {
echo 'username or password is incorrect';
exit();
}
}
session_start();
if (!isset($_SESSION["user_login"])) {
}
else
{
$username = $_SESSION["user_login"];
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#registrer-deg").click(function(){
$("#registrerdeg").show();
});
$("#registrer-deg").click(function(){
$("#logginn").hide();
});
$("#logg-inn").click(function(){
$("#logginn").show();
});
$("#logg-inn").click(function(){
$("#registrerdeg").hide();
});
});
</script>
<link rel="stylesheet" type="text/css" href="main.css"/>
<title>The Socializer</title>
</head>
<body>
<div id="sidebarLeft">
<div id="logo"></div>
<ul>
<li>Login</li>
<li>Register</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="timeline">
<div id="registrering">
<form id="registrerdeg" action="index.php" method="POST" style="display: none;">
<input type="text" name="fname" size="10" placeholder="First name"><br/>
<input type="text" name="lname" size="10" placeholder="Last name"><br/>
<input type="text" name="username" size="10" placeholder="Username"><br/>
<input type="text" name="email" size="10" placeholder="Email"><br/>
<input type="text" name="email2" size="10" placeholder="Confirm email"><br/>
<input type="text" name="password" size="10" placeholder="Password"><br/>
<input type="text" name="password2" size="10" placeholder="Confirm Password"><br/>
<input type="submit" name="reg" value="Registrer!">
</form>
</div>
<div id="logg_inn">
<form id="logginn" action="index.php" method="POST" style="display: none;">
<input type="text" name="user_login" size="10" placeholder="Username"><br/>
<input type="text" name="password_login" size="10" placeholder="Password"><br/>
<input type="submit" name="login" value="Logg inn!">
</form>
</div>
</div>
</body>
</html>
* {
background-color: #2C3E50;
font-family: Arial, Helvetica, Sans-serif;
font-size: 16px;
color: #AFEEEE;
}
#sidebarLeft {
width: 220px;
height: 550px;
top: 0;
left: 0;
margin-top: 50px;
margin-left: 0px;
margin-bottom: 50px;
position: fixed;
}
#sidebarRight {
width: 220px;
height: 550px;
right: 0;
top: 0;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 50px;
position: fixed;
}
ul {
width: 220px;
list-style-type: none;
margin: 0px;
padding: 0;
margin-top: 30px;
}
li {
height: 35px;
width: 220px;
list-style-type: none;
margin: 5px;
}
#logo {
width: 150px;
height: 150px;
background-image: url("../img/logo.png");
-moz-border-radius: 75px;
-webkit-border-radius: 750px;
border-radius: 75px;
margin-left: 35px;
margin-top: 25px;
}
#sidebarLeft ul li a {
display: block;
width: 60px;
width: 220px;
height: 16px;
text-align: center;
margin-top: 9px;
text-decoration: none;
color: #AFEEEE;
}
#timeline {
width: 780px;
height: 550px;
margin-top: 50px;
margin-left: 240px;
top: 0;
}
input[type="text"] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
color: #000000;
font-size: 15px;
font-weight: bold;
padding: 5px;
width: 200px;
height: 12px;
margin-bottom: 3px;
margin-top: 3px;
outline: none;
}
::-webkit-input-placeholder {
font-weight: normal;
}
:-moz-input-placeholder {
font-weight: normal;
}
::-moz-input-placeholder {
font-weight: normal;
}
:-ms-input-placeholder {
font-weight: normal;
}
input[type="submit"] {
border-top: 1px solid #96d1f8;
background: #61a6d4;
background: -webkit-gradient(linear, left top, left bottom, from(#316c94), to(#61a6d4));
background: -webkit-linear-gradient(top, #316c94, #61a6d4);
background: -moz-linear-gradient(top, #316c94, #61a6d4);
background: -ms-linear-gradient(top, #316c94, #61a6d4);
background: -o-linear-gradient(top, #316c94, #61a6d4);
padding: 5px 10px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 12px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
input[type="submit"]:hover {
border-top-color: #49718c;
background: #49718c;
color: #ccc;
}
input[type="submit"]:active {
border-top-color: #1b435e;
background: #1b435e;
}
and home.php looks like this:
<?php
mysql_connect("localhost","root","") or die("couldn't connect to database.");
mysql_select_db("thesocializer") or die("couldn't select database");
session_start();
if (!isset($_SESSION["user_login"])) {
}
else
{
$username = $_SESSION["user_login"];
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<title>The Socializer</title>
</head>
<body>
<div id="sidebarLeft">
<div id="logo">
</div>
<ul>
<li>Logg inn</li>
<li>Registrer deg</li>
<li>Om</li>
<li>Kontakt</li>
</ul>
</div>
<div id="timeline">
<?php echo "Hello, ".$username; ?>
</div>
</body>
</html>
* {
background-color: #2C3E50;
font-family: Arial, Helvetica, Sans-serif;
font-size: 16px;
color: #AFEEEE;
}
#sidebarLeft {
width: 220px;
height: 550px;
top: 0;
left: 0;
margin-top: 50px;
margin-left: 0px;
margin-bottom: 50px;
position: fixed;
}
#sidebarRight {
width: 220px;
height: 550px;
right: 0;
top: 0;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 50px;
position: fixed;
}
ul {
width: 220px;
list-style-type: none;
margin: 0px;
padding: 0;
margin-top: 30px;
}
li {
height: 35px;
width: 220px;
list-style-type: none;
margin: 5px;
}
#logo {
width: 150px;
height: 150px;
background-image: url("../img/logo.png");
-moz-border-radius: 75px;
-webkit-border-radius: 750px;
border-radius: 75px;
margin-left: 35px;
margin-top: 25px;
}
#sidebarLeft ul li a {
display: block;
width: 60px;
width: 220px;
height: 16px;
text-align: center;
margin-top: 9px;
text-decoration: none;
color: #AFEEEE;
}
#timeline {
width: 780px;
height: 550px;
margin-top: 50px;
margin-left: 240px;
top: 0;
}
input[type="text"] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
color: #000000;
font-size: 15px;
font-weight: bold;
padding: 5px;
width: 200px;
height: 12px;
margin-bottom: 3px;
margin-top: 3px;
outline: none;
}
::-webkit-input-placeholder {
font-weight: normal;
}
:-moz-input-placeholder {
font-weight: normal;
}
::-moz-input-placeholder {
font-weight: normal;
}
:-ms-input-placeholder {
font-weight: normal;
}
input[type="submit"] {
border-top: 1px solid #96d1f8;
background: #61a6d4;
background: -webkit-gradient(linear, left top, left bottom, from(#316c94), to(#61a6d4));
background: -webkit-linear-gradient(top, #316c94, #61a6d4);
background: -moz-linear-gradient(top, #316c94, #61a6d4);
background: -ms-linear-gradient(top, #316c94, #61a6d4);
background: -o-linear-gradient(top, #316c94, #61a6d4);
padding: 5px 10px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 12px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
input[type="submit"]:hover {
border-top-color: #49718c;
background: #49718c;
color: #ccc;
}
input[type="submit"]:active {
border-top-color: #1b435e;
background: #1b435e;
}
you have to move the session_start();
in both pages at the begin of your script.
index.php:
<?php
session_start();
mysql_connect("localhost","root","") or die("couldn't connect to database.");
...
home.php:
<?php
session_start();
mysql_connect("localhost","root","") or die("couldn't connect to database.");
...