when ever i am insert the value it says check data base connection. All the things are correct but it always giving the same error.
I am amking the quiz this page is for adding the question adding. whenever i am inserting the value it says please check DB connection. All the things are correct. User name password database name are also correct.
But same error is occuring
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>!deal Banker</title>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 230px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
/* ####### responsive layout CSS ####### */
#media (max-width: 840px){ /* 1st level responsive layout break point- drop right column down*/
#leftcolumn{
margin-left: -100%;
}
#rightcolumn{
float: none;
width: 100%;
margin-left: 0;
clear: both;
}
#contentcolumn{
margin-right: 0; /*Set margin to LeftColumnWidth*/
}
}
#media (max-width: 600px){ /* 2nd level responsive layout break point- drop left column down */
#leftcolumn{
float: none;
width: 100%;
clear: both;
margin-left: 0;
}
#contentcolumn{
margin-left: 0;
}
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="topsection"><div class="innertube">
<?php
include'menu.php';
?></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<?php
$conn = mysql_connect("localhost","banker","gaurav#441");
$db = "idealbanker";
$table = "pp";
mysql_select_db($db,$conn);
if(isset($_REQUEST['submit']))
{
if($_POST['question'] == '')
{
echo 'cannot submit field empty';
}
elseif($_POST['answer1'] == '')
{
echo 'cannot submit field empty';
}
elseif($_POST['answer2'] == '')
{
echo 'cannot submit field empty';
}
elseif($_POST['answer3'] == '')
{
echo 'cannot submit field empty';
}
elseif($_POST['answer4'] == '')
{
echo 'cannot submit field empty';
}
elseif($_POST['answer5'] == '')
{
echo 'cannot submit field empty';
}
else
{
function clean($str) {
$str = #trim($str);
if(get_magic_quotes_gpc()) {
$str = stripslashes($str);
}
return mysql_real_escape_string($str);
}
$question = clean($_POST['question']);
$answer1 = clean($_POST['answer1']);
$answer2 = clean($_POST['answer2']);
$answer3 = clean($_POST['answer3']);
$answer4 = clean($_POST['answer4']);
$correctanswer = clean($_POST['answer5']);
$qry = "INSERT INTO $table( question, answer1, answer2, answer3, answer4, correctanswer )VALUES('$question','$answer1','$answer2','$answer3','$answer4','$correctanswer')";
$result = #mysql_query($qry);
if(!$result)
{
echo 'Question Cannot Submit Check DB Connection';
echo "<br>Add Again";
}
else
{
echo 'Question Submitted Successfully';
}
echo "<br>Add More";
}
}
else
{
echo '<form name="form1" method="post" action="'.$_SERVER['PHP_SELF'].'">
<table width="500" border="0">
<tr>
<td width="100">Question</td>
<td width="242">
<input name="question" type="text" size="60">
</td>
</tr>
<tr>
<td>Answer 1 </td>
<td><input name="answer1" type="text" size="30"></td>
</tr>
<tr>
<td>Answer 2 </td>
<td><input name="answer2" type="text" size="30"></td>
</tr>
<tr>
<td>Answer 3 </td>
<td><input name="answer3" type="text" size="30"></td>
</tr>
<tr>
<td>Answer 4 </td>
<td><input name="answer4" type="text" size="30"></td>
</tr>
<tr>
<td>Correct Answer </td>
<td><input name="answer5" type="text" size="30"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="submit" name="submit" value="Submit">
</label></td>
</tr>
</table>
</form>
';
}
?>
</div>
</div>
<div id="leftcolumn">
<?php
include 'left.php';
?>
</div>
<div id="rightcolumn">
<?php
include 'right.php';
?>
</div>
<div id="footer"><?php
include'footer.php';
?></div>
</div>
</body>
</html>
Your "check db connection" error message is UTTERLY useless. Never output a fixed unchanging message. Have the DB TELL you why the query failed:
if (!$result) {
die(mysql_error());
}
And note that you're simply ASSUMING the connection is working. You never bother checking the return values of your connection and select_db calls.
Related
Sorry for asking this since I am fairly new to PHP, but I am trying to create a login system wherein a user logs in to enter a homepage. The login page sets cookies for the username and password if the user checks the Remember me checkbox regardless if login is successful or not. If login is successful, it starts a session. While there is an active session, the user cannot access the login page unless they log out. If login is not successful, it will redirect back to the login page. My problem here is that the cookies are not set regardless if the login is successful or not. But if I remove the if isset($_SESSION) statement, it successfully sets the cookies. Below is my code:
login.php:
<?php
session_start();
if(isset($_POST["login"]))
{
$remember = $_POST["remember"];
if($remember == 1)
{
setcookie("username", $_POST["uname"], time()+86400);
setcookie("password", $_POST["pwd"], time()+86400);
}
if(isset($_SESSION['uname']))
{
echo"<script>alert('Already logged in.')</script>";
echo"<script>location.href = 'home.php'</script>";
}
}
?>
<html>
<head>
<title>Login</title>
<style>
body
{
background-color: DimGray;
}
table
{
font-family: Calibri;
color:white;
font-size: 14pt;
font-style: normal;
font-weight: bold;
text-align: left;
background-color: DimGray;
border-collapse: collapse;
border: 2px solid white
}
table.inner
{
border: 0px
}
.my_text
{
text-align: center;
font-family: Helvetica;
color:white;
font-size: 40px;
font-weight: bold;
margin: 50px;
}
</style>
</head>
<body>
<div class = my_text> Login Page</div>
<table align="center" cellpadding = "10">
<!----- Userame ---------------------------------------------------------->
<form method="post" action="home.php">
<tr>
<td>Username: </td>
<td><input type="text" name="uname" value = "<?php if(isset($_COOKIE["username"])) echo $_COOKIE["username"]?>"/>
</td>
</tr>
<!----- Password ---------------------------------------------------------->
<tr>
<td>Password: </td>
<td><input type="text" name="pwd" value = "<?php if(isset($_COOKIE["password"])) echo $_COOKIE["password"]?>"/>
</td>
</tr>
<!----- Remember me ------------------------------------------------->
<tr>
<td>Remember Me </td>
<td><input type="checkbox" name="remember" value = "1"/>
</td>
</tr>
<!----- Submit ------------------------------------------------->
<tr>
<td colspan="2" align="center">
<input type="submit" value="Login" name="login">
</td>
</tr>
</table>
</form>
<br>
<br>
</body>
</html>
home.php:
<?php
$uname = "admin";
$pwd = "12345";
session_start();
if(isset($_SESSION['uname']))
{
echo"<table align='center' cellpadding = '10'>";
echo"<tr><td>Welcome " . $_SESSION['uname'] . "</td></tr>";
echo"<tr align = 'center'><td><a href = 'logout.php'><input type = button value = logout name logout></a></td></tr>";
}
else
{
if($_POST["uname"] == $uname && $_POST["pwd"] == $pwd)
{
$_SESSION["uname"] = $uname;
echo"<script>location.href = 'home.php'</script>";
}
else
{
echo"<script>alert('Username or Password is incorrect.')</script>";
echo"<script>location.href = 'login.php'</script>";
}
}
?>
<html>
<head>
<title>Home</title>
<style>
body
{
background-color: DimGray;
}
table
{
font-family: Calibri;
color:white;
font-size: 30pt;
font-style: normal;
font-weight: bold;
text-align: left;
background-color: DimGray;
border-collapse: collapse;
border: 2px solid white
}
table.inner
{
border: 0px
}
.my_text
{
text-align: center;
font-family: Helvetica;
color:white;
font-size: 40px;
font-weight: bold;
margin: 50px;
}
</style>
</head>
<body>
<div class = my_text> Home Page</div>
</body>
</html>
logout.php:
<?php
session_start();
if(isset($_SESSION['uname']))
{
session_destroy();
echo"<script>location.href = 'login.php'</script>";
}
else
{
echo"<script>location.href = 'login.php'</script>";
}
?>
Sorry for a duplicate question, but its not working for me;
access page only if logged in with php
i have to access display.php page if someone loggedin, if they enter the url directly it need to redirect to login.php page,
i tried sessions but its not working for me, please help me to debug it.
display.php
<?php
session_start();
if(!isset($_SESSION['loggedin']))
{
header("location: login.php");
}
$conn=mysqli_connect("localhost","root","zaq12345","testdb");
if(!$conn)
{
die("Connection failed: " . mysqli_connect_error());
}
$disp = "select * from formdata order by user_id desc";
$result = mysqli_query($conn,$disp);
?>
<button onclick="location.href='formnew1.html';">Add</button>
<table border="2" cellpadding="0" cellspacing="0">
<tr>
<th> ID </th>
<th> Name </th>
<th> Email </th>
<th> Age </th>
<th> Gender </th>
<th> Address </th>
<th> City </th>
<th> Skills </th>
<th>Action</th>
</tr>
<?php
//$rows = mysqli_fetch_assoc($result);
while ($row = $result->fetch_assoc())
{
$id = $row['user_id']; ?>
<tr>
<td><?php echo $row['user_id']?> </td>
<td><?php echo $row['name'] ?></td>
<td><?php echo $row['email']?></td>
<td><?php echo $row['age']?></td>
<td><?php echo $row['gender']?></td>
<td><?php echo $row['address']?></td>
<td><?php echo $row['city']?></td>
<td><?php echo $row['skill']?></td>
<td>
<a id="edit" href="edit1.php?id=<?php echo $row['user_id']; ?>">Edit</a>
Delete
</td>
</tr>
<?php } ?>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
function deleteRow(obj){
conf=confirm('Are you sure to delete the Data');
if(conf){
var tr = $(obj).closest('tr');
$.post("delete1.php", {id: obj.id}, function(result){
tr.fadeOut('slow', function(){
$(obj).remove();
});
});
}
}
</script>
<?php
if (isset($_SESSION['success']))
{
echo '<script> alert("Data Added Successfully");</script>';
}
else if (isset($_SESSION['fail'])){
echo '<script> alert("Failed to Store");</script>';
//header("Location: /training/formnew.html");
}
mysqli_close($conn);
?>
login.php
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: rgb(255,0,0);
}
form {
max-width: 425px;
margin: 10px auto;
padding: 10px 20px;
background: #ff994580;
border-radius: 10px;
}
fieldset {
margin-top: 100px ;
margin-bottom: 500px;
border: none;
}
h2 {
margin: 0 0 30px 0;
text-align: center;
font-family: 'Calibri';
font-size: 40px;
font-weight: 300;
}
label {
font-family: 'Calibri';
font-size: 16px;
font-weight: 50;
}
.submit {
background-color: #4CAF50;
border-radius: 10px;
color: white;
padding: 10px 40px 10px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.reset {
background-color: #ff3333;
border-radius: 10px;
color: white;
padding: 10px 40px 10px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<fieldset>
<form id="myform" name="myform" method="POST" action="validate.php">
<H2> LOGIN </H2>
<table width="60%" cellpadding="10">
<tr>
<td>
<label>User ID</label>
</td>
<td>
<input type="text" id="user_id" name="user_id"placeholder="Enter your User ID" required="required"/>
</td>
</tr>
<tr>
<td>
<label>User Name</label>
</td>
<td>
<input type="text" id="user_name" name="user_name" placeholder="Enter your Username" required="required"/>
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" id="password" name="password" placeholder="Enter your Password" required="required"/>
</td>
</tr>
<tr>
<td>
<input type="submit" class="submit" name="submitbtn" value="Login">
</td>
<td>
<input type="reset" class="reset"/>
</td>
</tr>
</table>
</form>
</fieldset>
</script>
</body>
</html>
validate.php
<?php
session_start();
$conn=mysqli_connect("localhost","root","zaq12345","testdb");
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
$userid=$_POST['user_id'];
$username=$_POST['user_name'];
$password=$_POST['password'];
$qz = "SELECT * FROM userdata WHERE user_id = '$userid' AND user_name = '$username' AND password = '$password'";
$result=mysqli_query($conn,$qz);
if(mysqli_num_rows($result) == 1 )
{
$_SESSION['loggedin'] = true;
$_SESSION['user_id'] = $userid;
header('location: display1.php');
}
else{
$_SESSION['loggedin'] = false;
echo '<script> alert("ERROR: Please Check Credentials OR SignUp!!!"); window.location.href="login.php"; </script>';
}
}
mysqli_close($conn);
?>
Either remove the line $_SESSION['loggedin'] = false; in your validate.php file.
Or change the if statement in your display.php file to be
if (!isset($_SESSION['loggedin'] || !$_SESSION['loggedin'])
You are setting the loggedin to be false, so when you call isset it returns true, because it is set even though it is set to false.
I am loading a PHP page with a table using DataTables fixed header functionality. I can not seem to get the table to be at 100% of page load while page renders. It starts off as compressed (while loading) then expanded (once page renders).
I tried to resolve this by output buffering in php but can not get the effect of compression then expansion to go away.
Initialization Code (At Bottom of Script)
$(document).ready(function() {
$('#summary_table').DataTable( {
"scrollY": 400,
"scrollX": true,
"bSort": false,
"bPaginate": false,
"autoWidth": false
} );
$(".dataTables_wrapper").css("width","100%");
});
EDIT:
(Table is compressed during load but then goes to 100%.)
PHP
<html>
<head>
<title>Action Item Summary</title>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<style>
thead th {
background-color:#0038a8;
font-weight: bold;
font-style: italic;
color: white;
text-align: left;
}
table:not(#header):not(#menu):not(#find) {
background-color: white;
width: 100%;
}
td {
width: auto;
min-width: auto;
white-space: nowrap;
}
input[type='text'] {
width: 50%;
min-width: 100%;
}
span {
white-space: nowrap;
}
span.late{
color: red;
}
thead tr td a{
color: white;
}
th a:hover
{
cursor: pointer;
text-decoration: underline;
}
div.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}
div.dataTables_scrollBody table#summary_table {
width: 100% !important;
}
table.dataTable tr.odd { background-color: #dae1e9; }
table.dataTable tr.even { background-color: white; }
</style>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../js/table.js"></script>
</head>
<body>
<? $pageTitle="All Action Items (".count($resAll).")"; include_once('../shared/pageheader.php'); ?>
<?if (isset($_SESSION['filteron']) && $_SESSION['filteron'] == true):?><div style="position:relative; float:right; display: inline; font-weight: bold; color:red; font-size: 12pt; background-color: lightgray; margin-right: 10"> Filter On </div><br /><?endif;?>
<form method="POST" action="/actionitems/viewactionitem.php">
<table id="find" border="1">
<tr>
<td class="label">Find Action Item</td>
<td style="width:100 !important"><input type="text" id="id" name="id" value=""></input></td>
<td><input type="submit" value="View" /></td>
<td><input type="button" value="Find" onclick="jumpTo($('#id').val())"+/></td>
</tr>
</table>
</form>
<table style="background-color: transparent">
<tr>
<td id="left" align="left">
<? if($_SESSION['userrole'] == 'Admin'): ?>[<a style="text-decoration: underline; color: black" href="newactionitem.php"><b>Add New Action Item</b></a>] <? endif;?>
</td>
<td id="middle" align="middle">
[<a style="text-decoration: underline; color: black" href="allactionitems.php"><b>All Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="openactionitems.php"><b>Open Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="completedactionitems.php"><b>Completed Action Items</b></a>]
[<a style="text-decoration: underline; color: black" href="closedactionitems.php"><b>Closed Action Items</b></a>]
</td>
<td id="right">
</td>
</tr>
</table>
<form style="display:inline" id="summaryform" method="POST" action="allactionitems.php">
<div class="summary_table" style="<? if(count($resAll)> 23): ?>height:500;<?endif;?> overflow-y:auto">
<table id="summary_table" class="display nowrap" style="width: 1000" border=1>
<thead class="header">
<tr>
<? foreach ($cols as $cidx=>$col): ?>
<? if (!in_array($col, $hideCols)): ?>
<th>
<?if (in_array($col, $categoryNames)):?>
<a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=<?=$manageActionItems->getCategoryName($col)?>&dir=<?=($dir=="DESC")?"ASC":"DESC"?>'); $('#summaryform').submit();"><?=$manageActionItems->getCategoryName($col)?></a><? if ($orderBy == $manageActionItems->getCategoryName($col) && $dir == "DESC") echo "<white>▼</white>"; else if ($orderBy == $manageActionItems->getCategoryName($col) && $dir == "ASC") echo "<white>▲</white>"; else echo "<span style='display: inline-block; width: 13'></span>";?></td>
<? else:?>
<a onclick="$('#summaryform').attr('action', 'allactionitems.php?orderby=<?=$col?>&dir=<?=($dir=="DESC")?"ASC":"DESC"?>'); $('#summaryform').submit();"><?=($col=="ActionItemID")?"ID": $col?></a><? if ($orderBy == $col && $dir == "DESC") echo "<white>▼</white>"; else if ($orderBy == $col && $dir == "ASC") echo "<white>▲</white>"; else echo "<span style='display: inline-block; width: 13'></span>"; ?>
<?endif;?>
</th>
<? endif; ?>
<? endforeach; ?>
<th>
View
</th>
<th>
Edit
</th>
</tr>
</thead>
<tbody>
<? foreach($resAll as $idx=>$row): ?>
<? //echo"<pre>"; var_dump($row); echo"</pre>"; ?>
<tr id="row<?=$row['ActionItemID']?>">
<? foreach ($cols as $cidx=>$col): ?>
<? if (!in_array($col, $hideCols)): ?>
<td <? if($orderBy == $col) echo "class='sort'"; ?>>
</td>
<? endif; ?>
<? endforeach; ?>
<td>
View
<!--input type="submit" value="View" style="width:60;height:20;border:none; font-weight: bold"/-->
</form>
</td>
<td>
<? if(($_SESSION['userrole'] == 'Admin' && $_SESSION['userrole'] == 'Admin') || isset($_SESSION['userid']) &&($row['OwnerID'] == $_SESSION['userid'] || $row['AltOwnerID'] == $_SESSION['userid'])):?>
Edit
<? endif; ?>
<!--input type="submit" value="Edit" style="width:60;height:20; border:none;font-weight: bold" /-->
</form>
</td>
</tr>
<? endforeach; ?>
</tbody>
</table>
</div>
</form>
<script>
$(document).ready(function() {
$('#summary_table').DataTable( {
"scrollY": 400,
"scrollX": true,
"bSort": false,
"bPaginate": false,
"autoWidth": false
} );
$(".dataTables_wrapper").css("width","100%");
});
</script>
</body>
</html>
CSS
div#splash
{
background-color:#d8d8d8;
}
body
{
font-family: arial;
}
textarea
{
width: 100%;
max-width: auto;
height: 100px;
max-height: 85px;
overflow-y:scroll;
resize: none;
font-family: inherit;
}
html * :not(h1):not(h2)
{
font-size: 10pt;
}
body
{
margin: 0px;
background-image: url('/img/custom_back.gif');
}
h1, h2
{
font-family: arial;
text-align: center;
}
h3
{
font-size: 75%;
}
table.data tr td:not(.label)
{
background-color:white;
}
td#left
{
width: 25%;
}
td#right
{
width: 25%;
}
td#middle
{
width: 50%;
}
td.label
{
font-weight: bold;
font-style: italic;
}
table#find tr td.label,
table.data tr td.label
{
background-color:#0038a8;
color: white;
}
table.data tr td.label,
table.data:not(#details) tr td
{
width: 25%;
}
table.data
{
margin: 0 auto;
}
table#header
{
width: 100% !important;
}
table#header tr td
{
vertical-align: middle;
background-color: transparent;
}
input[type=submit]
{
margin: 0 auto;
}
td
{
vertical-align: middle;
}
div#header div
{
display:inline-block;
}
div#title
{
font-style: italic;
}
img#logo
{
width: 95px;
height: 95px;
}
table#toolname td
{
font-weight: bold;
font-size: 15px;
}
table#menu
{
background-color: #0038a8;
}
.required
{
border-style:solid;
border-width:2px;
border-color:red;
}
td > div:not(.filterinput):not(.cell)
{
height: 85px;
max-height: 85px;
overflow-y:scroll;
overflow-x:hidden;
}
td.sort
{
background-color: lightgray;
}
How do I resolve this issue?
for Bootstrap 4 Users
If you are using Bootstrap classes to the table, you might ran into this width issue. To fix this, use the datatable default option "autoWidth": false
Enable or disable automatic column width calculation. This can be
disabled as an optimisation (it takes a finite amount of time to
calculate the widths) if the tables widths are passed in using
$('#example').dataTable( {
"autoWidth": false
});
https://datatables.net/reference/option/autoWidth
I believe I have resolved the issue. I was using an older build.
After upgrading to 10.1 and following the table width instruction below, I resolved my issue.
I added (width="100%") to my table tag and it now stays at 100%
So instead of
<table id="summary_table" class="display nowrap" style="width: 1000" border=1>
I replaced the style width: 1000 which just sets the absolute width to 1000 pixels (I forgot to add the px unit suffix), to a percentage value of 100% `width='100%' and the resolving table tag would read.
<table id="summary_table" class="display nowrap" width="100%" border=1>
I used the answer from this question to form my response
https://stackoverflow.com/a/23842795/1691103
Example
http://www.datatables.net/examples/basic_init/flexible_width.html
I was facing the same problem and tried all the above solutions but no luck.
After hours of search, I found that the bootstrap class "table-responsive" has a problem with the DataTable.
So the solution is -
Just remove the "table-responsive" class from the table.
So the HTML of the table should look like this -
<table class="table table-striped table-hover table-sm" id="followup-table">
<thead>
<tr class="text-white">
<th>#</th>
<th>Follow Up On</th>
<th>Name</th>
<th>Phone No</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>4 Jun 2021</td>
<td>Mrityunjay Mishra</td>
<td>87838734</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#followup-table').DataTable();
} );
</script>
I read all the answers. none of them mentioned this simple way:
just add style="width:100%" to the table tag
<table style="width:100%" class="table table-striped- table-bordered table-hover table-checkable" id="firstmile-tbl" >
For me in Bootstrap 4.4.1 unfortunately Dexters solution didn't work. The solution is to add a class of w-100 to the table.
If you're using Bootstrap don't forget to add the table class to your table.
<table id="my_table" class="table">
...
</table>
For me adding css selector to the parent div of the table worked like a charm!
div.dataTables_wrapper {
width:100% !important;
}
How can I close the suggestion box when the user click the Clear button?
When the suggestion box is closed, how can the Search & Clear button move up to its original place?
What code should I insert to do this?
You can see the buttons when you run this code.
This is my current code:
<html>
<head>
<title>
Brandon's Search Engine
</title>
<style type="text/css">
#suggestion {
border: 1px solid black;
visibility: hidden;
position: relative;
background-color: white;
z-index: 10;
}
#suggestion a {
font-size: 12pt;
color: black;
text-decoration: none;
display: block;
width: 648px;
height: auto;
text-align: left;
padding: 2px;
}
#suggestion a:hover {
background-color: #dddddd;
width: 644px;
padding: 2px;
}
</style>
<script type="text/javascript">
//document.getElementById("suggestion")
function getSuggestion(q) {
var ajax;
if(window.XMLHttpRequest)//for ie7+, FF, Chrome
ajax = new XMLHttpRequest();//ajax object
else
ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
ajax.onreadystatechange = function() {
if(ajax.status === 200 && ajax.readyState === 4) {
//if result are not there then don't display them
if(ajax.responseText === "")
document.getElementById("suggestion").style.visibility = "hidden";
else {
document.getElementById("suggestion").style.visibility = "visible";
document.getElementById("suggestion").innerHTML = ajax.responseText;
}
}
};
ajax.open("GET", "suggestion.php?q=" + q, false);
ajax.send();
}
</script>
<script>
function validateForm()
{
var x=document.forms["q"]["q"].value;
if (x==null || x=="")
{
return false;
}
}
</script>
</head>
<body>
<form method="GET" action="search.php" name="q" onsubmit="return validateForm()">
<table align="center">
<tr>
<td>
<h1><center>Brandon's Search Engine</center></h1>
</td>
</tr>
<tr>
<td align="center">
<input type="text" name="q" style="height: 27px; width: 650px; padding: 2px"
onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="blur() document.getElementById('suggestion').style.visibility = 'hidden'"/>
<div id="suggestion" style="width: 648px">
</div>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" name="submit" value="Search" style="height: auto; width: 60px; padding: 2px" />
<input type="reset" value="Clear" style="height: auto; width: 50px; padding: 2px" />
</td>
</tr>
<tr>
<td align="center">
To insert your site in result fill in the form at here.
</td>
</tr>
</table>
<input type="hidden" name="page" value="0" />
</form>
</body>
</html>
Hope that someone can help me out with this
Thanks
<html>
<head>
<title>
Brandon's Search Engine
</title>
<style type="text/css">
#suggestion {
border: 1px solid black;
visibility: hidden;
position: relative;
background-color: white;
z-index: 10;
}
#suggestion a {
font-size: 12pt;
color: black;
text-decoration: none;
display: block;
width: 648px;
height: auto;
text-align: left;
padding: 2px;
}
#suggestion a:hover {
background-color: #dddddd;
width: 644px;
padding: 2px;
}
</style>
<script type="text/javascript">
//document.getElementById("suggestion")
function getSuggestion(q) {
var ajax;
if(window.XMLHttpRequest)//for ie7+, FF, Chrome
ajax = new XMLHttpRequest();//ajax object
else
ajax = new ActiveXObject("Microsoft.XMLHTTP");//for ie6 and previous
ajax.onreadystatechange = function() {
if(ajax.status === 200 && ajax.readyState === 4) {
//if result are not there then don't display them
if(ajax.responseText === "")
document.getElementById("suggestion").style.visibility = "hidden";
else {
document.getElementById("suggestion").style.visibility = "visible";
document.getElementById("suggestion").innerHTML = ajax.responseText;
}
}
};
ajax.open("GET", "suggestion.php?q=" + q, false);
ajax.send();
}
</script>
<script>
function closeBox(){
document.getElementById("suggestion").style.visibility = "hidden";
}
function validateForm()
{
var x=document.forms["q"]["q"].value;
if (x==null || x=="")
{
return false;
}
}
</script>
</head>
<body>
<form method="GET" action="search.php" name="q" onsubmit="return validateForm()">
<table align="center">
<tr>
<td>
<h1><center>Brandon's Search Engine</center></h1>
</td>
</tr>
<tr>
<td align="center">
<input type="text" name="q" style="height: 27px; width: 650px; padding: 2px"
onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="blur() document.getElementById('suggestion').style.visibility = 'hidden'"/>
<div id="suggestion" style="width: 648px">
</div>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" name="submit" value="Search" style="height: auto; width: 60px; padding: 2px" />
<input type="reset" onclick="closeBox()" value="Clear" style="height: auto; width: 50px; padding: 2px" />
</td>
</tr>
<tr>
<td align="center">
To insert your site in result fill in the form at here.
</td>
</tr>
</table>
<input type="hidden" name="page" value="0" />
</form>
</body>
It's my first day here, I thought you guys could help me. So, I'm working on this kind of chatting service for a friend. I want it to auto update anything inside the div tags that has an id of messages. I tried adding some javascript and stuff from other posts, but they just made it worse. So, if anyone could fix it and comment, or give me suggestions. I want it as soon as someone posted something, it updates the posts in the div tags with the id of messages.
<?php
session_start();
if(!isset($_SESSION['username']))
{
header("Location: /index.php");
}
?>
<html>
<head>
<title>
House Email System
</title>
<style>
body
{
background: #383838;
font-family: Arial;
color: #444444;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -150px;
}
form
{
background: #ffffff;
width: 270px;
border-radius: 15px;
box-shadow: 3px 3px 6px 1px #303030;
}
input
{
margin-left: 15px;
}
p
{
margin-left: 15px;
}
error
{
padding:2px 4px;
margin:0px;
border:solid 1px #FBD3C6;
background:#FDE4E1;
color:#CB4721;
font-size:14px;
font-weight:bold;
}
div
{
background: #f0f0f0;
}
hr
{
color: #d0d0d0;
background-color: #d0d0d0;
height: 3px;
border: 0px;
}
username
{
margin-left: 5px;
}
message
{
margin-left: 10px;
}
</style>
</head>
<body>
<?php
$connect = mysql_connect("localhost", "root", "*******");
mysql_select_db("*******");
$username = $_SESSION['username'];
$message = $_POST['message'];
$submit = $_POST['submit'];
if($submit)
{
if($message)
{
mysql_query("INSERT INTO messages VALUES('', '$username', '$message')");
}
else
{
?>
<center>
<error>Please enter a message to send.</error> <br />
</center>
<br />
<?php
}
}
?>
<form action="active.php" method="POST">
<br />
<p>Message</p>
<input type="text" name="message" /> <br />
<br />
<input type="submit" name="submit" value="Submit" /> <br />
<br />
<?php
$query = mysql_query("SELECT * FROM messages ORDER BY id DESC");
$num_rows = mysql_num_rows($query);
if($num_rows > 0)
{
while($row = mysql_fetch_assoc($query))
{
$username = $row['username'];
$message = $row['message'];
?>
<div id="messages">
<br /> <username><b><?php echo $username; ?></b></username>
<hr />
<message><?php echo $message; ?></message> <br />
<br /> </div> <br />
<?php
}
}
else
{
?>
<center>
<error>There are no messages to display.</error> <br />
</center>
<br />
<?php
}
?>
</form>
</body>
</html>
I hope you guys can help me, thank you.
First create a page message.php as:
<?php
session_start();
?>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#submit').click(function()
{
//alert("hello");
// ss=document.getElementById("message").value;
$.ajax({
type : 'POST',
url : 'active.php',
data: {
messages :$('#message').val()
},
success : function(data){
$('#messages').html(data);
}
});
});
});
</script>
<title>
House Email System
</title>
<style>
body
{
background: #383838;
font-family: Arial;
color: #444444;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -150px;
}
form
{
background: #ffffff;
width: 270px;
border-radius: 15px;
box-shadow: 3px 3px 6px 1px #303030;
}
input
{
margin-left: 15px;
}
p
{
margin-left: 15px;
}
error
{
padding:2px 4px;
margin:0px;
border:solid 1px #FBD3C6;
background:#FDE4E1;
color:#CB4721;
font-size:14px;
font-weight:bold;
}
div
{
background: #f0f0f0;
}
hr
{
color: #d0d0d0;
background-color: #d0d0d0;
height: 3px;
border: 0px;
}
username
{
margin-left: 5px;
}
message
{
margin-left: 10px;
}
</style>
</head>
<body>
<center>
<error>Please enter a message to send.</error> <br />
</center>
<br />
<form action="active.php" method="POST">
<br />
<p>Message</p>
<input type="text" name="message" id="message" /> <br />
<br />
<input type="button" id="submit" name="submit" value="Submit" /> <br />
</form>
<br />
<div id="messages">
</div>
</body>
</html>
<script language="JavaScript"><!--
// v3 compatible:
function doSomething() {
// do something here...
$.ajax({
type : 'POST',
url : 'active.php',
data: {
messages :$('#message').val()
},
success : function(data){
$('#messages').html(data);
}
});
setTimeout('doSomething()',3000);
}
setInterval('doSomething()',3000);
//--></script>
Then Create a page active.php as
<?php
session_start();
$connect = mysql_connect("localhost", "root", "");
mysql_select_db("test");
$username=$_SESSION['username'];
$message=$_POST['messages'];
if($message!="")
{
mysql_query("INSERT INTO messages VALUES('', '$username', '$message')");
}
$query = mysql_query("SELECT * FROM messages ORDER BY id DESC limit 1,0");
$num_rows = mysql_num_rows($query);
if($num_rows > 0)
{
while($row = mysql_fetch_assoc($query))
{
$username = $row['username'];
$message = $row['message'];
?>
<div>
<br /> <username><b><?php echo $username; ?></b></username>
<hr />
<message><?php echo $message; ?></message> <br />
<br /> </div>
<br />
<?php
}
}
else
{
echo"No message to show";
}
?>
This is very general chat.Now you need to change it according to your requirements.
I want it as soon as someone posted something, it updates the posts in the div tags with the id of messages.
You will have to use javacript for that part. Everything else can be done with PHP and MySQL.
I watched great youtube tutorial the other day on how to do this. Its is a "quick and dirty" solution but should give you something to build on. http://www.youtube.com/watch?v=FyXeOX-uYMc