How to insert dynamically created textboxes with the same name into database? - php

This is my html code. It dynamically creates these textboxes but they all have the same name.
<?php
include 'db.php';
$office = $_GET['office'];
$application_name = $_GET['application_name'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Add Requirements for New Application</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/sidebar.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap css library -->
</head>
<style>
.header--banner {
background-image: url(cb.jpg);
background-size:100% 100%;
background-repeat: no-repeat;
}
.header--banner {
height: 45.5rem;
}
.jumbotron{
padding: 0.5em 0.6em;
}
.header--banner {
background-image: url(magic.jpg);
background-size:100% 100%;
background-repeat: no-repeat;
}
.header--banner {
height: 45.5rem;
}
.jumbotron{
padding: 0.5em 0.6em;
position: relative;
text-align: center;
color: black;
}
.green{
text-decoration: none;
font-family: Modern;
font-size: 18px;
border-radius: 5px;
padding: 5px 8px;
background-color: #27ae60;
color: #ffffff;
}
a.green:hover{
text-decoration: none;
background-color: #145a32;
color: #ffffff;
transition: 0.7s;
}
.bs-example2{
border: 3px solid black;
background: #f5f5f5;
text-align: center;
padding:20px;
margin:5px;
height:200px;
}
</style>
<body>
<header class="header--banner">
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="kiosk-HOMEPAGE.php">
HOME
</a>
</li>
<li>
Offices
</li>
<li>
Employees
</li>
<li>
Change Username & Password
</li>
<li>
Reports
</li>
<li>
Log Out
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="jumbotron">
<div class="container-fluid">
<img src="urdBanner.jpg" id="urdBanner" alt="Banner" style="width:100%; height:250px;">
<center><h2 style="position:relative;">Requirements</h2></center>
<p></p>
<img src="menu.jpg" class="rounded-circle" style="width:30px; height:30px;">
<br>
<br>
Previous
<br>
<br>
<form method="get" action="kiosk-NEW_CHARTER_REQUIREMENTS_insert.php">
<input type="hidden" name="office" value="<?php echo $office ?>">
<input type="hidden" name="application_name" value="<?php echo $application_name ?>">
<br>
<div class="row form-group">
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Step By Step Procedure</b></label>
</div>
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Personnel in charge</b></label>
</div>
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Time needed to complete procedure</b></label>
</div>
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Amount of fees if any</b></label>
</div>
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Required Documents</b></label>
</div>
<div class="col-md-2"><label for="textBox" class="col-form-label"><b>Procedure for the filing of complaints</b></label>
</div>
</div>
</div>
<div class="form-group fieldGroup">
<div class="input-group">
<div class="col-md-2">
<textarea name="steps[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Steps"></textarea>
</div>
<div class="col-md-2">
<textarea name="personnel[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Personnel"></textarea>
</div>
<div class="col-md-2">
<textarea name="time[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Time"></textarea>
</div>
<div class="col-md-2">
<textarea name="fees[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Fees"></textarea>
</div>
<div class="col-md-2">
<textarea name="documents[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Documents"></textarea>
</div>
<div class="col-md-2">
<textarea name="complaints[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Complaints"></textarea>
</div>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
</div>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<div class="col-md-2">
<textarea name="steps[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Steps"></textarea>
</div>
<div class="col-md-2">
<textarea name="personnel[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Personnel"></textarea>
</div>
<div class="col-md-2">
<textarea name="time[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Time"></textarea>
</div>
<div class="col-md-2">
<textarea name="fees[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Fees"></textarea>
</div>
<div class="col-md-2">
<textarea name="documents[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Documents"></textarea>
</div>
<div class="col-md-2">
<textarea name="complaints[]" class="form-control" onkeyup="AutoGrowTextArea(this)" placeholder="Complaints"></textarea>
</div>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
</form>
</div>
</div>
</div>
</div>
</header>
<script type="text/javascript">
$(document).ready(function(){
//group add limit
var maxGroup = 10;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
</script>
<script type="text/javascript">
// Auto-Grow-TextArea script.
// Script copyright (C) 2011 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
function AutoGrowTextArea(textField)
{
if (textField.clientHeight < textField.scrollHeight)
{
textField.style.height = textField.scrollHeight + "px";
if (textField.clientHeight < textField.scrollHeight)
{
textField.style.height =
(textField.scrollHeight * 2 - textField.clientHeight) + "px";
}
}
}
</script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
this is my insert.php
<?php
if(isset($_GET['submit'])){
$con = mysqli_connect('localhost','root','','information_kiosk');
$office = $_GET['office'];
$application_name = $_GET['application_name'];
$steps = $_GET['steps'];
$personnel = $_GET['personnel'];
$time = $_GET['time'];
$fees = $_GET['fees'];
$documents = $_GET['documents'];
$complaints = $_GET['complaints'];
$totalSize = sizeof($steps);
for($i=0;$i <=$totalSize;$i++) {
$InsertSteps = (!empty($steps[$i])) ? $steps[$i] : '';
$InsertPersonnel = (!empty($personnel[$i])) ? $personnel[$i] : '';
$InsertTime = (!empty($time[$i])) ? $time[$i] : '';
$InsertFees = (!empty($fees[$i])) ? $fees[$i] : '';
$InsertDocuments = (!empty($documents[$i])) ? $documents[$i] : '';
$InsertComplaints = (!empty($complaints[$i])) ? $complaints[$i] : '';;
echo $InsertSteps;
echo "<br>";
echo $InsertPersonnel;
echo $InsertSteps;
echo "<br>";
}
}
?>
*update. with my insert code now it only shows the first row of data but not the 2nd or 3rd
only the first row gets inserted into database but the following dynamically created rows dont. My question is how could i change my syntax so that each row would insert into the database for example.
stepsColumn PersonnelColumn timeColumn feesColumn documentsColumn
array[0] array[0] array [0] array[0] array[0]
array[1] array[1] array [1] array[1] array[1]

Related

How to prevent the main Laravel form to submit?

I have 1 main form. I also have a sub form inside that main form.
I can't seem to prevent the main form to stop submitting since the button type submit will submit the main form automatically.
Form UI
When I click on delete the modal slide up with 2 options
When I click on DELETE, I only one to submit to delete image that's it.
edit.blade.php
#extends('layouts.be.master')
#section('content')
<script type="text/javascript" src="/js/ckeditor.js"></script>
<link rel="stylesheet" type="text/css" href="http://d.biossusa.com/css/root/hover-master/hover.css">
<style type="text/css">
.portfolio-images {
border: solid 1px silver;
}
._hover{
padding: 0px;
position: relative;
overflow: hidden;
border: 1px solid #D8D8D8;
/*border-radius: 10px;*/
}
._hover:hover .caption{
opacity: 1;
transform: translateY(-150px);
-webkit-transform:translateY(-150px);
-moz-transform:translateY(-150px);
-ms-transform:translateY(-150px);
-o-transform:translateY(-150px);
}
._hover img{
z-index: 4;
}
._hover .caption{
position: absolute;
top:150px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
width: 100%;
}
._hover .blur{
background-color: rgba(0,0,0,0.8);
height: 300px;
z-index: 5;
position: absolute;
width: 100%;
}
._hover .caption-text{
z-index: 10;
color: #fff;
position: absolute;
height: 300px;
text-align: center;
top:-20px;
width: 100%;
}
</style>
<?php $tags = explode(",", $portfolio->tag ); ?>
<div class="card-body card-padding">
<div class="row">
{!! Form::open(array('class' => 'form-horizontal', 'role' =>'form', 'url'=>'portfolio/'. $portfolio->id .'/update','files' => true)) !!}
<div class="col-sm-12">
{{-- Name --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" value="{{ $portfolio->name }}" name="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
{{-- Type --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Type</label>
<div class="col-sm-10">
<select name="type" class="form-control">
#foreach($portfolioTypes as $item)
<option value="{{ $item }}">{{ $item }}</option>
#endforeach
</select>
</div>
</div>
{{-- Tags --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Tags</label>
<div class="col-sm-10">
</div>
<input id="tags" name="tag">
</div>
{{-- URL --}}
<div class="form-group">
<label for="url" class="col-sm-2 control-label">URL</label>
<div class="col-sm-10">
<input name="url" type="text" value="{{ $portfolio->url }}" class="form-control" placeholder="URL">
</div>
</div>
{{-- Images --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Images</label>
#foreach($images as $image)
<?php
$crop_img = str_replace('full.jpg','crop.jpg',$image->img_path);
?>
<div class="col-sm-2">
<div class="_hover " style="background: transparent;">
<p style="text-align:center;">
<img class="img-responsive" src="{{ $image->image_path }}" alt="">
</p>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h6 class="title lighter" style="padding:5px;border-radius: 10px;">
{{ $image->id }}
</h6>
<p>
<span>
<a data-toggle="modal" data-target="#delete_image_{{ $image->id or '' }}">
delete
</a>
</span>
</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="delete_image_{{ $image->id }}">
<div class="model-content" style="margin-top: 200px;">
<div class="col-sm-offset-4 col-sm-4 ">
{!! Form::model($image, array( 'url' => '/portfolio/image/'.$image->id.'/destroy','method' => 'DELETE')) !!}
<button type="submit" class="btn btn-danger btn-lg btn-block">Delete ({{ $image->id }})</button>
<a class="btn btn-primary btn-lg btn-block" data-dismiss="modal" > Cancel </a>
{!! Form::hidden('$id', $image->id)!!}
{!! Form::close()!!}
</div>
</div>
</div>
#endforeach
<br><br>
<input id="images" name="images[]" type="file" multiple>
</div>
{{-- Description --}}
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea name="description" rows="20" cols="80" id="description">
{{ base64_decode($portfolio->description) }}
</textarea>
<script>
CKEDITOR.replace( 'description' );
</script>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<a class="btn btn-default" href="/portfolio"> Cancel </a>
<button type="submit" class="btn btn-info">Done</button>
</div>
</div>
</div>
{!!Form::close()!!}
</div>
</div>
#stop
#section('custom-scripts')
<link rel="stylesheet" type="text/css" href="/css/jquery.tag-editor.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.caret.min.js"></script>
<script type="text/javascript" src="/js/jquery.tag-editor.js"></script>
<script type="text/javascript">
$( "select[name*='type']" ).val("{{ $portfolio->type }}");
function readLogo(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#portfolio-icon').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$( "input[name*='logo_path']" ).change(function(){
readLogo(this);
});
$('#tags').tagEditor({
autocomplete: {
delay: 0,
position: { collision: 'flip' },
source: [<?php echo '"'.implode('","', $skillList).'"' ?>]
},
forceLowercase: false,
delimiter: ',', /* space and comma */
placeholder: 'Enter tags ...',
initialTags: [<?php echo '"'.implode('","', $tags).'"' ?>]
});
</script>
#stop
How would one go about debugging this further?
My goal is to stay with HTML, blade and Laravel as much as possible to solve this problem.

May be Use to someone
$('#formId').submit(function (event) {
event.preventDefault();
});

It is invalid html to have a form inside a form.
I'd try to place the modal outside the main form.

I would make hidden form outside of the original form and then send it with button that has form attribute. That "form" is valid html5 attribute.
<button type="submit" form="id_of_form_to_submit" value="Submit">Submit</button>
Here you can find more information:
https://www.w3schools.com/Tags/att_button_form.asp

CSS wont load after refresh on my register(signup) form in PHP

I'm learning PHP and I found useful tutorials online, so I'm trying to build my very first site in PHP. I have a problem with CSS implementation. I keep my tab with localhost always on so I dont have to run it every single time when I change something. Problem is, when I code some CSS it loads on my registration form, but when i refresh the page, it's like I never coded CSS for that page. (sorry for bad english I hope You guys understand what I wanted to say..)
Here's the signup.php code :
<div class="container">
<div class="row" style="text-align:center;">
<h3>EPO - Sistem - Registracija </h3>
</div>
<div class="row sub_msg">
<p> Veb aplikacija za evidenciju predispitnih obaveza. </p>
</div>
<div class="row signup">
<div class="row">
<h3> Dobrodosli, molimo Vas, unesite podatke za registraciju. </h3>
</div>
<form action="" method="post" class="form-horizontal">
<div class="row form-group input_group">
<label for="" class="col-sm-2" >E-mail:</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control">
</div>
</div>
<div class="row form-group input_group">
<label for="" class="col-sm-2" >Firstname:</label>
<div class="col-sm-10">
<input type="text" name="firstname" id="firstname" class="form-control">
</div>
</div>
<div class="row form-group input_group">
<label for="" class="col-sm-2" >Lastname:</label>
<div class="col-sm-10">
<input type="text" name="lastname" id="lastname" class="form-control">
</div>
</div>
<div class="row form-group input_group">
<label for="" class="col-sm-2" >Password:</label>
<div class="col-sm-10">
<input type="password" name="password" id="password" class="form-control">
</div>
</div>
<div class="row form-group" style="margin:0px 10px 20px 10px">
<div class="col-xs-12">
<input type="submit" name="submit" id="Registruj se" class="form-control">
</div>
</div>
</form>
</div>
</div>
And here's the Index page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EPO - Pocetna stranica</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href=" ./css/custom.css">
</head>
<body>
<nav class="navbar" style="background-color: #c40707">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand crud" style="color: darkgray !important" href="#">EPO Aplikacija</a>
</div>
</div>
</nav>
<div class="container">
<ul class="nav nav-tabs">
<li><a data-toggle='tab' href="#index">Pocetna stranica</a></li>
<li><a data-toggle='tab' href="#login">Ulogujte se</a></li>
<li><a data-toggle='tab' href="#signup">Prijavite se</a></li>
</ul>
<div class="tab-content">
<div id="index" class="tab-pane fade in">
<p>Index</p>
</div>
<div id="login" class="tab-pane fade in">
<p>Login</p>
</div>
<div id="signup" class="tab-pane fade in">
<?php include("./user/signup.php"); ?>
</div>
</div>
</div>
</body>
</html>
And here's the css code:
body{
background-color: darkgray;
font-size: 22px;
margin: 0;
padding: 0;
}
.crud{
width:auto;
color: #605d5d !important;
font-size: 25px;
font-weight: 800;
}
.sub_msg{
text-align: center;
padding: 10px 0px 20px 0px;
}
.signup{
border: 1px solid #c40707;
text-align: center;
width: 60%;
height: auto;
margin: auto;
}
.input_group{
margin: 0px 20px 20px 20px;
}
.input_group input{
height: 40px;
font-size: 20px;
}
input[type="submit"]{
height: 40px;
font-size: 20px;
font-weight: bold;
background-color: #c40707;
color: #605d5d !important;
}
I'm stuck her for over two hours, and I'm pretty sure it's some beginners silly mistake but I can't find it..

Correct the path of from <link rel="stylesheet" href=" ./css/custom.css"> to <link rel="stylesheet" href="./css/custom.css">
If still not work then force your browser to refresh the stylesheet.

Check by adding version number like
<link rel="stylesheet" type="text/css" href="./css/custom.css?version=51">

In the code below href attribute has unneeded space in it.
<link rel="stylesheet" href=" ./css/custom.css">
Should be:
<link rel="stylesheet" href="./css/custom.css">
Also sometimes you may need to clear cache for the changes in your css to appear.
In this case, cause it can become tiresome pressing the refresh button, rather than do a refresh, I add a random value at the end of the css url to make it appear like a new url so no caching will happen.
Like
<link rel="stylesheet" href="./css/custom.css?<?php echo rand(1,300);?>">

Try to change this line (assuming that your css folder in in the same level as you index.php)
<link rel="stylesheet" href=" ./css/custom.css">
To this this
<link rel="stylesheet" href="css/custom.css?t=<?php echo time(); ?>">
Remove the <?php echo time(); ?> once you go on production as it meant on for development so you don't need to clear the cache or the hard reload if the changes in your css are not reflected in the browser.

how to fetch and display the data one by one by clicking next button

I have a quiz management system and need to fetch the data from the database and displaying the data one by one on clicking next button.
I have used ajax to insert data into database after clicking next button by using file read and write function.
I am hoping for a better and efficient solution for my problem.
<?php
$host="localhost";
$user="root";
$pass="";
$con=mysqli_connect($host,$user,$pass);//connect to database;
mysqli_select_db($con,'*****');
// Create connection
//$conn = new mysqli($host, $user, $pass);
?>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
nav {
background-color: #2196F3 !important;
}
.second {
background-color: #61BAE4 !important;
height:45px;
}
.logo {
display: inline-block;
height: 100%;
}
.logo>img {
vertical-align: middle
padding-bottom: 10px;
}
#media only screen and (max-device-width: 480px) {
#media only screen and (max-device-width: 480px) {
.card-panel{
width:280px !important;
}
nav{
width:300px !important;
}
</style>
</head>
<body style="background-color: #969696;">
<div class="row">
<nav>
<div class="nav-wrapper">
<img width="60" height="60" src="https://www.timefortest.com/images/logo1.png" alt=""><span>IBPS Portal</span>
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Dashboard</li>
<li>Candidates</li>
<li>Add Question</li>
<li><a id="logout" href="logout">Logout</a></li>
<li><a id="logout" href="logout"><i class="material-icons">lock_outline</i></a></li>
</ul>
<!--<ul class="side-nav" id="mobile-demo">
<li>Dashboard</li>
<li>Candidates</li>
<li>Add Question</li>
<li><a id="logout" href="logout">Logout</a></li>
<li><i class="material-icons">lock_outline</i></li>
</ul>-->
</div>
</nav>
</div>
<!--<nav class="second">
<div class="nav-wrapper">
<div class="col s12">
Dashboard
Add Questions
Multiple Choice
</div>
</div>
</nav>-->
<?php $var=0;?><?php
//<div id="response">
?><form method="POST" action="submitanswer.php" id="answerdata">
<?php
$myfile = fopen("hitcount.txt", "r") or die("Unable to open file!");
$fh=fread($myfile,filesize("hitcount.txt"));
fclose($myfile);
$sql="SELECT description,question,choiceA,choiceB,choiceC,choiceD,choiceE,msqid FROM master_question where msqid=$fh";
if($r=mysqli_query($con,$sql))
{
while($result= $r->fetch_row())
{
?>
<div class="col s12 m12"style="background-color:Orange;">
<div class="row">
<div class="col s6 m6">
<h4 style="color:white;">DESCRIPTION</h4>
<div class="card horizontal" style="height:500px;background-color:white;">
<div class="card-stacked">
<div class="card-content">
<h5> <?php echo $result[0]?> </h4>
</div>
</div>
</div>
</div>
<div class="col s6 m6">
<h4 style="color:white;">QUESTION</h4>
<div class="card horizontal"style="height:500px;background-color:white;">
<div class="card-stacked">
<div class="card-content">
<h5><?php echo $result[1]?></h4>
</br />
<div class="card-stacked"style="padding-top:40px;">
<div class="card-content">
<input type="hidden" name="msqid" value="<?php echo $result[7]?>"/>
<p>
<input type="radio" name="group" id="test1" name="test1" value="<?php echo $result[1]?>" />
<label for="test1"><Strong> <?php echo $result[2]?></strong></label>
</p>
<br />
<p>
<input type="radio" name="group" id="test2" name="test2" value="<?php echo $result[2]?>" />
<label for="test2"><Strong><?php echo $result[3]?></strong></label>
</p>
<br />
<p>
<input type="radio" name="group" id="test3" name="test3" value="<?php echo $result[3]?>" />
<label for="test3"><Strong><?php echo $result[4]?></strong></label>
</p>
<br />
<p>
<input type="radio" name="group" id="test4" name="test4" value="<?php echo $result[4]?>" />
<label for="test4"><Strong><?php echo $result[5]?></strong></label>
</p>
<br />
<p>
<input type="radio" name="group" id="test5" name="test5" value="<?php echo $result[5]?>" />
<label for="test5"><Strong><?php echo $result[6]?></strong></label>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php } } ?>
<div class="col s12 m12">
<div class="row">
<div class="col s6 m6">
<center>
<input type='button'value='back' class="btn" onclick="document.location.href='decrement.php';"/>
</center>
</div>
<div class="col s6 m6 offset-s3">
<center>
<button type="submit" id="submcq" value="Submit" name="Snext" class="btn btn-success">Next</button></center>
</center>
</div>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(".button-collapse").sideNav();<!--nav jquery starts-->
$(document).ready(function() {
Materialize.updateTextFields();
$(".button-collapse").sideNav();
$('select').material_select();
});
</script>
<script>
function copy() {
document.getElementById("label").innerHTML = document.getElementById("mySelect").value
}<!--to label the selected value-->
$(document).ready(function() {
$('select').material_select();
}); </script>
<script><!--ajax function to insert answer in answer table-->
$(document).ready(function(){
$("answerdata").on('submit',(function (e){
e.preventDefault();
$.ajax({
type:'POST',
url:'submitanswer.php',
data:$('#answerdata').serialize(),
contentType:true,
cache:true,
processData:true,
success:function(){
alert("worked");
}
});
}));
return false;
});
</script>
</body>
</html>
Insert page:
<?php
$host="localhost";
$user="root";
$pass="";
$con=mysqli_connect($host,$user,$pass);//connect to database;
mysqli_select_db($con,'******');
?>
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
$msqid=$_POST['msqid'];
$answer=$_POST['group'];
$sql="INSERT INTO review(question_attend,Question_id,answerA,answerB,answerC,answerD,answerE)VALUES('','$msqid','$answer','','','','')";
$query= mysqli_query($con,$sql);
if($query)
{
echo "success";
$fp = fopen('hitcount.txt', 'c+');
flock($fp, LOCK_EX);
$count = (int)fread($fp, filesize('hitcount.txt'));
ftruncate($fp, 0);
fseek($fp, 0);
fwrite($fp, $count + 1);
flock($fp, LOCK_UN);
fclose($fp);
header("Location: newfetch.php");
}
else
{
echo mysqli_error;
}
}
?>

Why my 2 account is log in at the same time?

I have 2 log in, one for admin table and the other one is for cashier table. So what is happening right now is whenever I log in either one of them then the other one is also log when I refresh it. Same goes when I log out when I click log out in admin then refresh the cashier the cashier is also log out. I dont
know whats wrong in my codes.
P.S. The two table is in one database only. But I dont think its need 2 database for 2 log in.
This is the code index.php for admin_tbl
<?php
/** *index.php **/
session_unset();
session_start();
require_once 'includes/database.php';
$error = '';
if (isset($_POST['login']))
{
$uname = $_POST['username'];
$pword = $_POST['password'];
$sql = "SELECT * FROM admin_tbl WHERE uname='$uname' AND pword='$pword' LIMIT 1";
$result = mysqli_query(connection(), $sql);
$user = mysqli_fetch_array($result, MYSQLI_BOTH);
if ($user)
{
$_SESSION['user_id'] = $user['id']; $_SESSION['name'] = $user['lastname'] . ', ' . $user['firstname'];
header("Location: user_maintenance.php");
}
else
echo '<script language="javascript">';
echo 'alert("Account does not exist!")';
echo '</script>';
}
if (isset($_SESSION['user_id']))
{
header("Location: user_maintenance.php");
}
?>
<html>
<head>
<title>Log In</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
body {
background:url(images/jerica.jpg)fixed no-repeat center;
background-size:cover;
font-family: 'helvetica','Source Sans Pro', sans-serif;
color: ;
font-weight: 300;
padding-top: 110px;
}
.navbar {
background-color: #0A3D73;
}
.navbar-brand {
height: 100px;
line-height: 70px;
color: #fff !important;
}
.footer {
width: 100%;
position: absolute;
bottom: 20px;
}
.newtext{
color: grey;
}
#media (max-width: 367px){
.login-form {
margin-top: 5px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-4 well login-form" style="margin-top:40px; background:rgba(0,0,0,0.65);"> <form action="" method="post" class="form-horizontal" role="form">
<h1 class = "newtext"><center>Login</center></h1>
<?php if ($error != ''): ?>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span></button>
<?= $error ?>
</div>
<?php endif; ?>
<div class="form-group col-sm-12"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" name="username" class="form-control" placeholder="Username" required>
</div>
</div>
<div class="form-group col-sm-12">
<div class="input-group" style="padding-bottom: 10px"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i></span>
<input type="password" name="password" class="form-control" placeholder="Password" required>
</div>
</div>
<input type="hidden" name="student" value="student">
<div class="form-inline">
<center><button class="btn btn-primary" type="submit" name="login"> Log In</button>
</form>
</div>
</div>
</div>
</body>
</html>
And this is the code of index.php for cashier_tbl
<?php
/** *index.php **/
session_unset();
session_start();
require_once 'includes/database.php';
$error = '';
if (isset($_POST['login']))
{
$uname = $_POST['username'];
$pword = $_POST['password'];
$sql = "SELECT * FROM cashier_tbl WHERE uname='$uname' AND pword='$pword' LIMIT 1";
$result = mysqli_query(connection2(), $sql);
$user = mysqli_fetch_array($result, MYSQLI_BOTH);
if ($user)
{
$_SESSION['user_id'] = $user['id']; $_SESSION['name'] = $user['lastname'] . ', ' . $user['firstname'] . ' ' . $user['middlename'];
header("Location: order.php");
}
else
echo '<script language="javascript">';
echo 'alert("Account does not exist!")';
echo '</script>';
}
if (isset($_SESSION['user_id']))
{
header("Location: order.php");
}
?>
<html>
<head>
<title>Log In</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
body {
background:url(images/jerica.jpg)fixed no-repeat center;
background-size:cover;
font-family: 'helvetica','Source Sans Pro', sans-serif;
color: ;
font-weight: 300;
padding-top: 110px;
}
.navbar {
background-color: #0A3D73;
}
.navbar-brand {
height: 100px;
line-height: 70px;
color: #fff !important;
}
.footer {
width: 100%;
position: absolute;
bottom: 20px;
}
.newtext{
color: grey;
}
#media (max-width: 367px){
.login-form {
margin-top: 5px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-4 well login-form" style="margin-top:40px; background:rgba(0,0,0,0.65);"> <form action="" method="post" class="form-horizontal" role="form">
<h1 class = "newtext"><center>Login</center></h1>
<?php if ($error != ''): ?>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span></button>
<?= $error ?>
</div>
<?php endif; ?>
<div class="form-group col-sm-12"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" name="username" class="form-control" placeholder="Username" required>
</div>
</div>
<div class="form-group col-sm-12">
<div class="input-group" style="padding-bottom: 10px"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i></span>
<input type="password" name="password" class="form-control" placeholder="Password" required>
</div>
</div>
<input type="hidden" name="student" value="student">
<div class="form-inline">
<center><button class="btn btn-primary" type="submit" name="login"> Log In</button>
</form>
</div>
</div>
</div>
</body>
</html>
UPDATE: Thanks guys! It helps me.

Use a session variable for users and one for cashier. So
$_SESSION['admin_logged_in']
and
$_SESSION['cashier_logged_in']
or something...
(Also, read this http://php.net/manual/en/security.database.sql-injection.php)

Because you're using the same session variable.
Use different session variables for different logins.

Issue with part of CSS not loading HTML

******UPDATE********
Thank you for your help. This has been very frustrating.
In order to try and show you where I am having issues, I just created 2 pages to show what is going on.
http://www.kolosse.org/stack/border
http://www.kolosse.org/stack/fail
border is partially what I am going for. Not complete, but a start. And oddly enough, using CSS. but just inline on the table tag.
Fail is what I am seeing. Most of the code below is taken (in part) from the files that have made up "fail".
I hope this helps show what the issue is and you are able to see live something I am not.
******END UPDATE********
I am working on a website, and I am having an issue with my CSS not loading in certain sections. Most of the site works great. I am using bootstrap for responsiveness. But there is one spot that is giving me trouble. I have about 10 different pages that all work, that all pull from the CSS, and the page that this is from pulls from the CSS, except just this part. Here is the HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="description" content="The Krewe of Kolosse based in Dothan, AL" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Mardi gras, mardi, gras, dothan, alabama, parade, gra" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="js/jquery.min.js"></script>
<title>******* | Member Directory</title>
</head>
<body id="directoryP">
<!-- header -->
<div class="header">
<div class="container">
<div class="logo">
<img src="../images/logo.png" class="img-responsive" alt="" />
</div>
<div class="header-right">
<div class="header-top">
<ul>
<li><i class="fb"> </i></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="head-nav">
<span class="menu"> </span>
<ul class="cl-effect-15">
<li id="home">HOME</li>
<li id="calendar">CALENDAR
</li>
<li id="ball">BALL</li>
<li id="directory">MEMBER DIRECTORY</li>
<li id="members">LOGOUT</li>
<div class="clearfix"> </div>
</ul>
</div>
</div>
<div class="clearfix"> </div>
<!-- script-for-nav -->
<script>
$( "span.menu" ).click(function() {
$( ".head-nav ul" ).slideToggle(300, function() {
// Animation complete.
});
});
</script>
<!-- script-for-nav -->
</div>
</div>
<!-- header -->
<!-- content -->
<div class="content-top">
<div class="contact">
<div class="container">
<div class="contact-main">
<h3>MEMBER DIRECTORY</h3>
<div class="member-top">
<table class="member-top">
<tbody>
<tr>
<td class="member-top" width="75px"><h5>Member Number</h5></td>
<td class="member-top" width="110px"><h5>First Name</h5></td>
<td class="member-top" width="110px"><h5>Last Name</h5></td>
<td class="member-top" width="250px"><h5>Business</h5></td>
<td class="member-top" width="110px"><h5>Phone</h5></td>
<td class="member-top" width="220px"><h5>Email</h5></td>
<td class="member-top" width="75px"><h5>Year<br>Joined</h5></td>
<td class="member-top"><h5>Notes</h5></td>
<td class="member-top" width="75px"><h5>Status</h5></td>
</tr>
<tr class="member-data">
<td class="member-data">1</td>
<td class="member-data">******</td>
<td class="member-data">******</td>
<td class="member-data">******</td>
<td class="member-data">(***) ***-****</td>
<td class="member-data">****#*****.com</td>
<td class="member-data">****</td>
<td class="member-data">*******</td>
<td class="member-data">*****</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- content -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="soc">
<div class="social">
<ul>
<li><i class="facbk"> </i></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<div class="foot-bottom">
<div class="col-md-4 flick">
<h4>SNAPSHOTS</h4>
<ul>
<li><img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img4.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img6.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img9.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img10.jpg" class="img-responsive" alt=""></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="col-md-4 flick1">
<h4>POPULAR POSTS</h4>
<div class="flick2">
<div class="flick-left">
<div class="portfolio-wrapper ">
<img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt="">
<ul class="social-ic">
</ul>
</div>
</div>
<div class="flick-right">
<p>Smile King!</p>
</div>
<div class="clearfix"></div>
</div>
<div class="flick2">
<div class="flick-left">
<div class="portfolio-wrapper ">
<img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt="">
<ul class="social-ic">
</ul>
</div>
</div>
<div class="flick-right">
<p>The Lovely Ladies!</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-4 flick">
<h4>EMAIL US</h4>
<div class="flick-form_grid">
<form method="post" action="{domain}/html_float_send">
<input type="text" name="name" maxlength="50" class="textbox" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
<input type="text" name="email" maxlength="80" class="textbox" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
<input type="text" name="phone" maxlength="80" class="textbox" value="Phone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}">
<input type="text" name="comments" maxlength="1000" class="textbox" value="Comments" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">
<div class="smt">
<input type="submit" value="email">
</div>
</form>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="foot-left">
<div class="foot-nav">
<ul>
<li>HOME</li>
<li>CALENDAR</li>
<li>LEAVE</li>
</ul>
</div>
</div>
<div class="foot-right">
<p>Copyrights © 2017 ******** All rights reserved | Website by ***** | Privacy Policy | Terms & Conditions </p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- footer -->
</body></html>
The code functions to create the table. The data from mysql displays. The issue is the table formatting. The CSS formatting is not coming over. I have the various classes created in my CSS (see below), but when I view the site, none of the formatting takes effect. In Chrome, I use more tools -> developer tools and look to see what code is there, and the site is pulling from bootstrap css, but is not pulling from my css.
.member-top table {
color: #f0f0f0;
align: left;
border-spacing: .8em;
border-collapse: collapse;
padding: 10em;
width: 100%;
border: 1em;
}
.member-top tr {
text-align: center;
padding: 10em;
}
.member-top td {
text-align: center;
padding: 10em;
}
.member-data tr {
text-align: center;
padding: 10em;
}
.member-data td {
text-align: left;
padding: 10em;
}
I am aware that a value of 10em is rather large. But at this point I was using a value of that size to see if any changes were being made.
Above is the code for the rendered page. It does not create my borders or space as I want.
Below is the code that works.
.member-top table {
color: #f0f0f0;
align: left;
border-spacing: .8em;
border-collapse: collapse;
padding: 10em;
width: 100%;
border: 1em;
}
.member-top tr {
text-align: center;
padding: 10em;
}
.member-top td {
text-align: center;
padding: 10em;
}
.member-data tr {
text-align: center;
padding: 10em;
}
.member-data td {
text-align: left;
padding: 10em;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="description" content="The Krewe of Kolosse based in Dothan, AL" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Mardi gras, mardi, gras, dothan, alabama, parade, gra" />
<script type="application/x-javascript">
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>******* | Member Directory</title>
</head>
<body id="directoryP">
<!-- header -->
<div class="header">
<div class="container">
<div class="logo">
<img src="../images/logo.png" class="img-responsive" alt="" />
</div>
<div class="header-right">
<div class="header-top">
<ul>
<li><i class="fb"> </i></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="head-nav">
<span class="menu"> </span>
<ul class="cl-effect-15">
<li id="home">HOME</li>
<li id="calendar">CALENDAR</li>
<li id="ball">BALL</li>
<li id="directory">MEMBER DIRECTORY</li>
<li id="members">LOGOUT</li>
<div class="clearfix"> </div>
</ul>
</div>
</div>
<div class="clearfix"> </div>
<!-- script-for-nav -->
<script>
$("span.menu").click(function() {
$(".head-nav ul").slideToggle(300, function() {
// Animation complete.
});
});
</script>
<!-- script-for-nav -->
</div>
</div>
<!-- header -->
<!-- content -->
<div class="content-top">
<div class="contact">
<div class="container">
<div class="contact-main">
<h3>MEMBER DIRECTORY</h3>
<div class="member-top">
<table align="left" cellspacing="5" cellpadding="8" width="100%" border="2" bordercolor="#777777">
<tbody>
<tr>
<td width="75px">
<h5>Member Number</h5>
</td>
<td width="110px">
<h5>First Name</h5>
</td>
<td width="110px">
<h5>Last Name</h5>
</td>
<td width="250px">
<h5>Business</h5>
</td>
<td width="110px">
<h5>Phone</h5>
</td>
<td width="220px">
<h5>Email</h5>
</td>
<td width="75px">
<h5>Year<br>Joined</h5>
</td>
<td class="member-top">
<h5>Notes</h5>
</td>
<td width="75px">
<h5>Status</h5>
</td>
</tr>
<tr>
<td>1</td>
<td>******</td>
<td>******</td>
<td>******</td>
<td>(***) ***-****</td>
<td>****#*****.com</td>
<td>****</td>
<td>*******</td>
<td>*****</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- content -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="soc">
<div class="social">
<ul>
<li><i class="facbk"> </i></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<div class="foot-bottom">
<div class="col-md-4 flick">
<h4>SNAPSHOTS</h4>
<ul>
<li><img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img4.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img6.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img9.jpg" class="img-responsive" alt=""></li>
<li><img src="./Directory-failed_files/img10.jpg" class="img-responsive" alt=""></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="col-md-4 flick1">
<h4>POPULAR POSTS</h4>
<div class="flick2">
<div class="flick-left">
<div class="portfolio-wrapper ">
<img src="./Directory-failed_files/img1.jpg" class="img-responsive" alt="">
<ul class="social-ic">
</ul>
</div>
</div>
<div class="flick-right">
<p>Smile King!</p>
</div>
<div class="clearfix"></div>
</div>
<div class="flick2">
<div class="flick-left">
<div class="portfolio-wrapper ">
<img src="./Directory-failed_files/img3.jpg" class="img-responsive" alt="">
<ul class="social-ic">
</ul>
</div>
</div>
<div class="flick-right">
<p>The Lovely Ladies!</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-4 flick">
<h4>EMAIL US</h4>
<div class="flick-form_grid">
<form method="post" action="{domain}/html_float_send">
<input type="text" name="name" maxlength="50" class="textbox" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
<input type="text" name="email" maxlength="80" class="textbox" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
<input type="text" name="phone" maxlength="80" class="textbox" value="Phone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}">
<input type="text" name="comments" maxlength="1000" class="textbox" value="Comments" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">
<div class="smt">
<input type="submit" value="email">
</div>
</form>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="foot-left">
<div class="foot-nav">
<ul>
<li>HOME</li>
<li>CALENDAR</li>
<li>LEAVE</li>
</ul>
</div>
</div>
<div class="foot-right">
<p>Copyrights © 2017 ******** All rights reserved | Website by ***** | Privacy Policy | Terms & Conditions </p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- footer -->
</body>
</html>
When I hard code the table settings, it works.

After the update in your question, it became clear to me what is wrong.
There is an error in your stylesheet, causing the browser to parse only part of it.
Please review the errors listed by the W3C validator, fix them and all should be fine.

Categories