Current Situation:
I'm in the process of building a future search box for customer information that is stored in a mysql database. I have the search box working, and pulling correct data. I need the results to be clickable and access links to different pages. I.E. when John Doe is searched, that name will come up below the search box half way between typing. The results (that match whatever is typed) show below the search box and changed based on characters in the box. The results are what I need to be clickable.
Working (but not completed) code for future search:
<?php
$key=$_GET['key'];
$array = array();
$con = mysql_connect ("localhost","username","password");
$db = mysql_select_db ("database",$con);
$query = mysql_query ("SELECT * from customer_table WHERE customerAddress LIKE '%{$key}%'");
while($row=mysql_fetch_assoc($query))
{
$array[] = $row['customerAddress'];
$array[] = $row['customerName'];
}
echo json_encode($array);
?>
I understand this code should be mysqli however I could not get the search to work that way.
Next, is the html file for the search:
<html>
<head>
<title>Customer Search Box</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'presearch.php?key=%QUERY',
limit : 10
});
});
</script>
<style type="text/css">
.bs-example{
font-family: sans-serif;
position: relative;
margin: 50px;
}
.typeahead, .tt-query, .tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px;
font-size: 24px;
height: 30px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 2px solid #0097CF;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 24px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #0097CF;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
</style>
</head>
<body>
<div class="row">
<div class=".col-md-6">
<div class="jumbotron">
<h1>Customer Future Search Box <small>Company Name</small></h1>
<button type="button" class="btn btn-primary btn-lg">Home</button>
</div>
</div>
<div class=".col-md-6">
<div class="panel panel-default">
<div class="bs-example">
<input type="text" name="typeahead" class="typeahead tt-query" autocomplete="on" spellcheck="false" placeholder="Type your Query">
</div></div></div></div>
</body>
</html>
What I've tried so far:
In an attempt to make the search results clickable (linked to different pages).
<?php
$key=$_GET['key'];
$array = array();
$con = mysql_connect ("192.169.197.209","azzip_admin","sXf(Z1AKZtT0");
$db = mysql_select_db ("azzip_default",$con);
$query = mysql_query ("SELECT * from customer_table WHERE customerAddress LIKE '%{$key}%'");
while($row=mysql_fetch_assoc($query))
}
?>
<a href= <?php $array[] = $row['customerAddress'];?>
<a href= <?php $array[] = $row['customerName'];?>
<?php
}
echo json_encode($array);
?>
That not only broke my future search, it didn't create any links.
Any help or even pointing in the right direction would be greatly appreciated. Thanks in advance.
Related
I made a web page for my project, where I need to change a button background color based on value from database.Like if the value below 10 then it will be green, 10~20 then yellow, 20++ then turns into red. Is it possible to do?
already the button works to fetch data from data base.enter image description here
You don't give enough information. Maybe, you can create a color column in your sql table, then with jinja or other you can do somethings like this:
Jinja:
<div style="background-color:{{ data['color_ref'] }};">Hello World</div>
PHP:
<div style="background-color:<?=$color_ref?>;">Hello World</div>
Javascript:
if (qtt <= 10) {
result = document.getElementById("happyday")
result.style.backgroundColor = red;
}
<table class="center">
<?php
if(array_key_exists('test', $_POST))
{button();}
function button()
{
$conn = mysqli_connect('localhost','root','','asimdb');
$sql= "SELECT * FROM atmdata WHERE atm_id = 'ATM_01'";
$result = mysqli_query($conn,$sql);
While ($row =mysqli_fetch_assoc($result))
{
echo "
<tr><th>ATM ID</th> <td>".$row["atm_id"]."</td></tr>
<tr><th>ATM Name</th><td>".$row["ATM_Name"]."</td></tr>
<tr><th>ATM Location</th><td>".$row["ATM_Location"]."</td></tr>
<tr><th>Contact No.</th><td>".$row["Contact_No"]."</td></tr>
<tr><th>View CCTV</th><td>".$row["CCTV"]."</td></tr>
<tr><th>Current Temerature</th><td>N/A</td></tr>";
}
echo"</table>";
}
?>
<style>
.button {
border: none;
color: #2F4F4F;
padding: 12px 30px;
border-radius: 20px;
text-align: center;
display: inline-block;
font-size: 16px;
font-weight: bold;
margin: 5px 5px;
cursor: pointer;
transition: transform .2s;
box-shadow:
0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07),
0 16px 32px rgba(0,0,0,0.07),
0 32px 64px rgba(0,0,0,0.07);}
.button:hover {
transform: scale(1.1);
border: 1px solid black}
</style>
<form method="post">
<input type="submit"class= "button" name="test" value="ATM 01">
</form>
Little background: The site is for a university assignment, we are not allowed to use 3rd party libraries such as bootstrap etc. I thought I had a solution but i can only get it to work for 2 buttons (showing or hiding the opposite one) but not multiple. I will have at least 10 buttons.
I have tried to research on stack overflow but could not find a solution. Here is my HTML+CSS. Home is the default page and the rest should become visible in the white space below when their button is clicked. This is a products page.
JSFIDDLE: https://jsfiddle.net/33n7yb5h/
Any help would be greatly appreciated, it does not need to be a written solution but simply pointing me in the right direction will do... I have little to no javascript knowledge so I'm not entirely sure what I should be googling in the first place...
<html>
<head>
<title>Design</title>
<link rel="stylesheet" type="text/css" href="css/store.css">
<script type="text/javascript" src="javascript/js.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li id="left">Company</li>
<li id="left">Sales</li>
<li id="left">About</li>
<li id="left">Contact</li>
<li id="right1">Cart</li>
<li id="right2" onclick="myFunction()">Geolocate</li>
</ul>
<dialog id="myDialog">Your IP address: <?php echo $_SERVER['REMOTE_ADDR']; ?></dialog>
<div id="items">
<ul>
<li id="left">Home</li>
<li id="Cars">Super Cars</li>
<li id="Cars">Topic 2</li>
</ul>
<div id="homepage">
<span><p> Welcome to the store</p></span>
</div>
<div id="showCars">
<div class="productBox">
<div class="productPicture">
</div>
</div>
</div>
</div>
</body>
</html>
ul{list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #363377; border-bottom: 1px solid white;}
li a{display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}
#left, #Cars{float: left; border-right:solid 1px #fff;}
#right1, #right2{float: right;}
#left:hover, #right:hover, #Cars:hover{background-color: #555;}
body{
margin: 0px;
padding: 0px;
font-family: tahoma;
background-image: "/img/bg.jpg";
}
p{
text-align: center;
}
#items{
display: inline-block;
border: 1px solid black;
padding: 10px;
margin-top: 25px;
margin-left: 225px;
margin-right: 225px;
position: absolute;
width: 80%;
height: 80%;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
background: white;
overflow: hidden;
}
.productBox{
border: 2px solid black;
width: 200px;
height: 300px;
margin-top: 5px;
text-align: center;
}
.productPicture{
border: 1px solid black;
width: 90%;
height: 150px;
margin: 0 auto;
margin-top: 5px;
padding: 5px;
display: inline-block;
}
#showCars{
display: none;
}
Here is some pseudo code if I understand correctly what you are needing: There are tons of ways to do this, and I don't have much to go on, so here is just 1 example.
<div>
<button onclick="cars()" value="show cars"></button> <!-- if they click this button call the function cars() -->
<button onclick="boats()" value="show boats"></button>
<ul>
<li id=IDname0></li>
<li id=IDname1></li>
<li id=IDname2></li>
</ul>
</div>
<script>
var cars = ["Saab", "Volvo", "BMW"]; //create an array of values you want to load into your tags
var boats = ["Fishing", "Raft", "Other"];
var x = 0;
Function cars()
{
// for each element in cars,
for ( x=0; x<cars.length; x++ )
{
//acquire the elemt by the ID name, and REPLACE the inner HTML with the value at array cars element x. if you want to add to the inner HTML, use += instead of just =
Document.getElementById('IDname'+x).innerHtml = cars[x]; // will acquire 'IDname0' , 'IDname1', etc.. each tag with an ID of that name ( from your <li> above
}
}
Function boats()
{
for ( x=0; x<cars.length; x++ )
{
Document.getElementById('IDname'+x).innerHtml = boats[x];
}
}
</script>
You can use a query string, and then make the buttons link to the query string parameter which checks the string and defines what each page/button will do. This will allow you to have the page html css etc mostly the same except for the parts that change on button click.
Many sites do this.
example: https://www.etsy.com/ca/search?q=wallet
I found a solution here: http://www.w3schools.com/howto/howto_js_tabs.asp for anyone else who is looking for the same thing!
I don't know why but JavaScript can't catch my input:
Mensaje: <input id="mensaje" type="text" name="mensaje" value="" style="width:30%;" placeholder="Escribe un mensaje a enviar...."/>
Is built to when I submit the PHP detect it and call the JS function:
function ClearFields() {
var e = document.getElementById("mensaje");
e.value='';
}
My form never reload the page and I can submit a text without reloading. The problem is that the value of textbox is always kept. That's why I'm trying to use JavaScript, to clear this textbox when it is submitted.
I get this error in JS console:
(index):24 Uncaught TypeError: Cannot set property 'value' of null(…)
Full code:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<title>Chat de SL</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script type="text/javascript">
$(document).ready(function() {
rsdfsdfsd();
asd();
});
function rsdfsdfsd() {
$('#nax').load('./funcionmensaje.php');
setTimeout(rsdfsdfsd, 200);
}
function ClearFields() {
var e = document.getElementById("mensaje");
e.value = '';
}
</script>
<script>
var contador = 0;
function asd() {
if (contador < 2) {
contador++;
var elem = document.getElementById('nax');
elem.scrollTop = elem.scrollHeight;
setTimeout(asd, 100);
}
}
</script>
<script>
</script>
</head>
<body>
<?php
if(isset($_POST['subname'])) {
echo '<script>',
'ClearFields();',
'</script>'
;
if ($_POST['mensaje'] == "") {
}
else {
file_put_contents('mensajeaenviar', $_POST['mensaje']);
file_put_contents('var', '0');
$fp = fopen('mensaje.php', 'a');
$mensaje = $_POST['mensaje'].PHP_EOL;
fwrite($fp, 'Tú: '.$mensaje .'<br>');
}
}
?>
<fieldset>
<font color="#c50000">Lugar:</font> Attached |
<font color="#c50000">Avatares cercanos:</font>
</fieldset>
<fieldset>
<legend>Chat</legend>
<td>
<div id="nax" style="height:70%; overflow:auto">
</div>
</td>
</fieldset>
<style>
nax {
font-family: 'Open Sans', serif;
font-size: 18px;
}
fieldset {
font-family: sans-serif;
border-radius: 10px;
background: #eee;
margin: 20px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
position: relative;
border: 2px groove threedface;
}
legend {
position: absolute;
top: -2px;
background: #fff;
padding: 10px 20px;
border: 2px groove threedface;
border-top: none;
box-shadow: inset 0 -5px 5px rgba(0, 0, 0, .2);
text-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
font-weight: bold;
}
legend span {
display: block;
margin: -20px;
background: #fff;
padding: 0px 20px;
}
footer {
font-family: sans-serif;
margin-top: 2%;
background: #ddd;
border-radius: 5px;
padding: 15px;
}
iframe {
display: none;
}
</style>
<fieldset style="margin-top:10px;height:3%;">
<form id="formulario" method="post" target="tar">
Mensaje: <input id="mensaje" type="text" name="mensaje" value="" style="width:30%;" placeholder="Escribe un mensaje a enviar...." />
<input type='submit' value='Enviar' name='subname' />
</form>
</fieldset>
<iframe name="tar" src="localhost/a.php">
</iframe>
</body>
<footer>EnriqueGF Utilities</footer>
</html>
You post to the iframe so, as you said yourself, the page is not reloaded and therefore the ClearFields function isn't executed on submit. Add an onsubmit handler to your form and call ClearFields from that.
This is a page code that shows attendance report of student.I want checkbox in colored if checked green else red.please help me to do this.I tried it but didn't work.Now i can click only on one checkbox that change color.check this image: http://i.stack.imgur.com/JgICk.png
<style>
.checkbox {
margin: 0 0 2em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input {
display: none;
}
.input + label {
-webkit-appearance: none;
background-color: red;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 9px;
display: inline-block;
position: relative;
}
.input:checked + label:after {
background-color: green;
color: #595959;
content: '\2714';
font-size: 10px;
left: 0px;
padding: 2px 8px 2px 2px;
position: absolute;
top: 0px;
}
</style>
<?php
if(isset($_POST["submit"]))
{
//Here goes array
for($i=0;$i<count($_POST['student']);$i++)
{
$name=$_POST['student'][$i];
echo $name;
}
}
?>
</head>
<body >
Report Attendance
<form name="myform" action="" method="post">
<div class="checkbox">
<table border="1" cellspacing="2" cellpadding="5" summary="">
<?php while ($row = mysql_fetch_assoc($res)){?>
<tr><td> <input type="checkbox" class="input" id="input" name="student[]" value="<?php echo $row['stu_id']; ?>" checked="checked" > <?php echo $row['stu_name'] ; ?> <label for="input"></label>
<br/></td></tr>
<?php }?>
</table>
<input type="submit" name="submit" value="submit"/>
</div>
</form>
</body>
</html>
You just need to make id as unique and labels should point to unique id. Here is the jsfiddle with static HTML https://jsfiddle.net/sua2wsm1/
below changes required in your HTML page
<table border="1" cellspacing="2" cellpadding="5" summary="">
<?php while ($row = mysql_fetch_assoc($res)){?>
<tr><td> <input type="checkbox" class="input" id="input<?php echo $row['stu_id']; ?>" name="student[]" value="<?php echo $row['stu_id']; ?>" checked="checked" > <?php echo $row['stu_name'] ; ?> <label for="input<?php echo $row['stu_id']; ?>"></label>
<br/></td></tr>
<?php }?>
Actually, duplicates ID can be the problem. A label is link to an input with the for attribute. So, if you click on the label, it'll be the same as clicking on the input. Your css is hiding the inputs, and using label:after as a box. So, if all inputs have the same id, clicking on a label will not work as expected
I'm having a some trouble with a button, I'm using a DIV that has a POST method inside of it, however, this button in question doesn't need the POST method, so:
<div id="lightA" class="white_content" height="300">
<h1>Adivinar...</h1>
<h2>Que personaje escoges?:</h2>
<form type="post">
<input type="text" list="personajes">
<datalist id="personajes" style="display:block">
<?php
session_start();
include "config.php";
if(isset($_SESSION["user_name"]))
{
$select = "SELECT nombre_personaje FROM partida WHERE user_name =".$_SESSION["user_name"]."AND personaje_activo = 'T'";
$query = mysqli_query($con, $select);
$rows = mysqli_num_rows($query);
$cont = 0;
$tableval;
if($rows > 0)
{
while($row = mysqli_fetch_array($query))
{
if($row['personaje_activo'] = "T")
{
=$tableval."<option value=\"".$row['']."\">";
}
}
}
else
{
?>
<?
}
}
echo $tableval;
?>
</datalist>
<button type="submit" action="submit_character.php" name="select" style="display:inline">Elegir!</button>
</form>
<button onclick:"javascript:cerrarPop('lightA')">Cancelar</button>
</div>
Now this is the funny part, <button onclick:"javascript:cerrarPop('lightA')">Cancelar</button> isn't executing anything at all, I was thinking, well just put the button inside the post, however the page refresh itself and executes <body background="imagen.jpg" onload="javascript:mostrarPop('lightP')"> which I don't need, then I was looking how to set a cookie for that pop DIV, but I have a limited knowledge in AJAX.
Here's also my JS script:
<script type="text/javascript">
function mostrarPop(name) {
document.getElementById(name).style.display='block';
document.getElementById('fade').style.display='block';
}
function cerrarPop(name) {
document.getElementById(name).style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
Any help is appreciated, AJAX would be awesome, I'm reading some code right however is a bit confusing.
Thanks in advance.
Update
Here's the entire code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guess who? - Lobby</title>
<style type="text/css">
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.6;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
text-align: center;
display: none;
margin-top: 50px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
width: 35%;
height: 500px;
padding: 16px;
border: 16px solid orange;
background: rgba(0,0,0,.8);
z-index:1002;
overflow: auto;
}
input[type="text"]{
width:173px;
display:inline;
margin-left:5px;
}
body { width:960px; margin:0 auto;}
div.chatbox{
position:fixed;
display:table;
border-collapse: collapse;
width: 250px;
height: 350px;
border-radius: 9px;
padding: 0.5em;
background: rgba(0,0,0,.5);
margin-top:25px;
margin-bottom:100px;
margin-right:50px;
margin-left:705px;
}
div.gamebox{
position:fixed;
background: rgba(0,0,0,.5);
width: 630px;
height: 560px;
border-radius: 9px;
padding: 0.5em;
margin-top:25px;
margin-bottom:100px;
margin-right:50px;
margin-left:25px;
}
div.optionbox{
position:fixed;
border-collapse: collapse;
width: 235px;
height: 190px;
border-radius: 9px;
padding: 0.5em;
background: rgba(0,0,0,.5);
margin-top:395px;
margin-bottom:100px;
margin-right:50px;
margin-left:705px;
}
h1 {
margin-top: 10px;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
text-align: center;
font-size: 30px;
color: #F00;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
h2 {
display: inline;
margin-top: 10px;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
text-align: left;
font-size: 25px;
color: #FFF;
}
iframe {
background-color: #FFF;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
input[type="submit"]{
background-color: #FFF;
margin-top: 1px;
margin-left: 5px;
margin-right: 5px;
}
</style>
<script type="text/javascript">
mostrarPop = function(name) {
document.getElementById(name).style.display='block';
document.getElementById('fade').style.display='block';
}
cerrarPop = function(name) {
document.getElementById(name).style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
</head>
<body background="imagen.jpg" onload="mostrarPop('lightP')">
<div id="lightP" class="white_content">
<h1>Tu personaje secreto es:</h1>
<?php
session_start();
include "config.php";
if(isset($_SESSION["user_name"]))
{
$selectcategoria = "SELECT DISTINCT id_partida, id_categoria FROM partida WHERE user_name =".$_SESSION["user_name"];
$querycategoria = mysqli_query($con, $selectcategoria);
$rowcategoria = mysqli_fetch_array($querycategoria);
$personajenum = rand(0,23);
$selectpersonaje = "SELECT nombre_personaje, foto_personaje FROM Categoria WHERE id_personaje =".$personajenum;
$querypersonaje = mysqli_query($selectpersonaje);
$rowpersonaje = mysqli_fetch_array($querypersonaje);
$selectturno = "SELECT user_name_retador, user_name_oponente FROM WHERE user_name =".$_SESSION["user_name"];
$queryturno = mysqli_query($con, $selectcategoria);
$rowturno = mysqli_fetch_array($query);
if($_SESSION["user_name"]=$rowturno["user_name_oponente"]){
$insertestado = "INSERT INTO estadojugador(id_partida, user_name, turno_activo, personaje_secreto) VALUES(".$row['id_partida'].", ".$_SESSION["user_name"].", "."false".", ".$rowpersonaje["nombre_personaje"].")";
$queryestado = mysqli_query($insertestado);
}
else
{
$insertestado = "INSERT INTO estadojugador(id_partida, user_name, turno_activo, personaje_secreto) VALUES(".$row['id_partida'].", ".$_SESSION["user_name"].", "."true".", ".$rowpersonaje["nombre_personaje"].")";
$queryestado = mysqli_query($insertestado);
}
echo "<img src=\"categorias/".$rowpersonaje["foto_personaje"]."\" width=\"240\" height=\"360\" style=\"display:block; margin: 0 auto;></img>";
}
?>
<button onclick="cerrarPop('lightP')" style="margin-top:10px; margin: 0 auto;">Continuar!</button>
</div>
<div id="lightA" class="white_content" height="300">
<h1>Adivinar...</h1>
<h2>Que personaje escoges?:</h2>
<form type="post">
<input type="text" list="personajes">
<datalist id="personajes" style="display:block">
<?php
session_start();
include "config.php";
if(isset($_SESSION["user_name"]))
{
$select = "SELECT nombre_personaje FROM partida WHERE user_name =".$_SESSION["user_name"]."AND personaje_activo = 'T'";
$query = mysqli_query($con, $select);
$rows = mysqli_num_rows($query);
$cont = 0;
$tableval;
if($rows > 0)
{
while($row = mysqli_fetch_array($query))
{
if($row['personaje_activo'] = "T")
{
=$tableval."<option value=\"".$row['']."\">";
}
}
}
else
{
?>
<?
}
}
echo $tableval;
?>
</datalist>
<button type="submit" action="submit_character.php" name="select" style="display:inline">Elegir!</button>
</form>
<button onclick:"cerrarPop('lightA')">Cancelar</button>
</div>
<div id="fade" class="black_overlay"></div>
<div class="chatbox">
<table width="240" height="250">
<form method="post" action="handler_partidas.php">
<tr>
<td><iframe src="messages_partidas.php" name="iframe" width="230" height="305"></iframe></td>
</tr>
<tr>
<td><input type="text" name="message"> <button type="submit" name="send">Enviar</button>
</tr>
</form>
</table>
</div>
<div class="gamebox">
<table width="240" height="250">
<form method="post" action="fill_table.php">
</form>
</table>
</div>
<div class="optionbox">
<h1>Opciones</h1>
<button onclick="">Rendirse</button>
<button onclick="javascript:mostrarPop('lightA')">Adivinar...</button></br>
<button type="submit" name="yes">Si</button>
<button type="submit" name="no">No</button>
</div>
</body>
</html>
There is 2 problem on your code first one is button onclick event. It should be like;
<button onclick="cerrarPop('lightA')">Cancelar</button>
Second problem is function defination. It is also be like;
cerrarPop = function (name) {
document.getElementById(name).style.display='none';
document.getElementById('fade').style.display='none';
}
jsfiddle link