We Keep Coding

Color change of a button on condition based on value from my database

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>

Problems with php validations not working

I was tasked on making simple i-Prepaid Reload programming.So far, I have problem with validations not working on reload.php page. As if there were no validations set at all and it went to result.php after pressing Buy button. I couldn't figure it out what's the cause of this error.
There should be some errors appear is I put alphabets or less than 10 numbers or ignore all of those options in reload.php.
login.php
form action="" method="post" name="Login_Form">
<table width="400" border="0" align="center" cellpadding="5" cellspacing="1" class="Table">
<?php if(isset($msg)){?>
<tr>
<td colspan ="2" align="center" valign="top"><?php echo $msg;?></td>
</tr>
<?php } ?>
<tr>
<td colspan="2" align="left" valign="top"><h3>Login</h3></td>
</tr>
<tr>
<td align="right" valign="top">Username</td>
<td><input name="Username" type="text" class="Input"><td>
</tr>
<tr>
<td align="right">Password</td>
<td><input name="Password" type="password" class="Input"></td>
</tr>
<tr>
<td> </td>
<td><input name="Submit" type="submit" value="Login" class="Button3"></td>
</tr>
</table>
</form>
<?php session_start();
if(isset($_POST['Submit']))
{
$logins = array(
['username' =>'Fadzli', 'password' => '11111'],
['username' =>'user2', 'password' => '22222'],
['username' =>'user3', 'password' => '33333'],
['username' =>'user4', 'password' => '44444'],
);
$log_username = isset($_POST['Username']) ? $_POST['Username'] :'';
$log_password = isset($_POST['Password']) ? $_POST['Password'] :'';
$key = FALSE;
$key = array_search($log_username, array_column($logins, 'username'));
$password = '';
echo $key;
var_dump($key);
if(!is_bool($key)){
$password = $logins[$key]['password'];
}
if($log_password == $password){
$_SESSION['Userdata'] = ['username' => $log_username];
header("location:reload.php");
exit;
}else{
$msg="<span style='color:red'>Invalid Login Information</span>";
}
}
?>
reload.php
<?php session_start();
$phonenumber = $Telco = $Reload ='';
$numberError = $telcoError = $ReloadError = '';
if(isset($_POST['Submit']))
{
$phonenumber=$_POST['phonenumber'];
if(array_key_exists('phonenumber',$_POST) && trim($_POST['phonenumber']) === '')
{
$numberError = "Error, insert phone number";
}
else
{
if(!preg_match('/^([0-9]*)$/', $phonenumber))
{
$numberError = "Numbers only";
}
elseif(strlen($phonenumber)<10)
{
$numberError = "Numbers have to be 10 or longer";
}
}
$Telco=$_POST['Telco'];
if(array_key_exists('Telco',$_POST) && trim($_POST['Telco']) == "")
{
$telcoError = "Error! Select your telco!";
}
$Reload=$_POST['ReloadCredit'];
if(array_key_exists('ReloadCredit',$_POST) && trim($_POST['ReloadCredit']) == "")
{
$ReloadError = "Error! Select the amount you wish to reload!";
}
}
function test_input($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
if($numberError=="" && $telcoError=="" && $ReloadError=="")
{
$_SESSION['data'] = ['phonenumber' => $_POST['phonenumber'] ,
'Telco' => $_POST['Telco'] ,
'ReloadCredit' => $_POST['ReloadCredit'] ];
}
}
?>
<?php
$title = "i-PREPAID RELOAD";
?>
<html>
<style>
.topup_form{
max-width: 700px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin-right:auto;
margin-left:auto;
}
.topup_form label{
display:block;
margin-bottom: 10px;
text-align:left;
}
.note1{
margin-top:5px;
font-size: 17px;
}
.topup_form label > span{
float: left;
width: 170px;
color: #F072A9;
font-weight: bold;
font-size: 17px;
text-shadow: 1px 1px 1px #fff;
}
.topup_form fieldset{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
margin: 0px 0px 10px 0px;
border: 1px solid #FFD2D2;
padding: 20px;
background: #FFF4F4;
box-shadow: inset 0px 0px 15px #FFE5E5;
-moz-box-shadow: inset 0px 0px 15px #FFE5E5;
-webkit-box-shadow: inset 0px 0px 15px #FFE5E5;
}
.topup_form fieldset legend{
color: #FFA0C9;
border-top: 1px solid #FFD2D2;
border-left: 1px solid #FFD2D2;
border-right: 1px solid #FFD2D2;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
background: #FFF4F4;
padding: 0px 8px 3px 8px;
box-shadow: -0px -1px 2px #F1F1F1;
-moz-box-shadow:-0px -1px 2px #F1F1F1;
-webkit-box-shadow:-0px -1px 2px #F1F1F1;
font-weight: normal;
font-size: 25px;
}
.topup_form button,
.topup_form input[type=reset],
.topup_form input[type=button]{
background: #EB3B88;
border: 1px solid #C94A81;
padding: 5px 15px 5px 15px;
color: #FFCBE2;
box-shadow: inset -1px -1px 3px #FF62A7;
-moz-box-shadow: inset -1px -1px 3px #FF62A7;
-webkit-box-shadow: inset -1px -1px 3px #FF62A7;
border-radius: 3px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
font-weight: bold;
}
.Button
{
width: 170px;
margin-right:auto;
margin-left:auto;
}
#warning{text-align:left;}
</style>
<div class="topup_form">
<form name="Topup" action="result.php" method="post" onsubmit="return confirm('Are you sure?')" >
<fieldset><legend><?php echo $title ?></legend>
Welcome <?php echo $_SESSION['Userdata']['username'];?>
<label for="phonenumber"><span>Phone Number <span>*</span></span><input type="text" name="phonenumber"/></label>
<div id = "warning" style="color: red;"><?php echo $numberError ?? '';?></div><br>
<label for="Telco"><span>Telco</span><select name="Telco">
<option value=""></option>
<option value="Maxis">Maxis</option>
<option value="Celcom">Celcom</option>
<option value="Digi">Digi</option>
<option value="TuneTalk">TuneTalk</option>
<option value="Unifi">Unifi</option>
</select></label>
<span class="note1">(Example:Maxis, Celcom, Digi)</span>
<div id = "warning" style="color: red;"><?php echo $telcoError ?? '';?></div><br>
<label for="Reload"><span>Reload Credit </span><select name="ReloadCredit">
<option value=""></option>
<option value="5">RM5</option>
<option value="10">RM10</option>
<option value="20">RM20</option>
<option value="30">RM30</option>
<option value="50">RM50</option>
</select></label>
<span class="note1">(Example:RM5,RM10,RM20)</span>
<div id = "warning" style="color: red;"><?php echo $ReloadError ?? '';?></div><br>
</fieldset>
<fieldset class="Button">
<button type="submit" value="Submit" name='Submit' >Buy</button>
<input type="reset" value="Reset" />
</fieldset>
</form>
</html>
'result.php'
<html>
<?php session_start()?>
<form name="result" action="">
Hi <?php echo $_SESSION['Userdata']['username'];?>
<br>
<p>Successfully reloaded</p>
<label for="phonenumber"><span>Phone Number : </span><?php echo $_POST['phonenumber']?></label><br>
<label for="telco"><span>Telco : </span><?php echo $_POST['Telco'] ?><br>
<label for="reloadcredit"><span>Reload Credit : RM </span><?php echo $_POST['ReloadCredit']?>
<p>Thank you for using i-Prepaid Reload</p>
</form>
</html>

Please note that array_search, if fails to find any record, will return false in normal circumstances.
However, array_search may return Boolean false, but may also return a non-Boolean value which evaluates to false
(See official documentation: https://www.php.net/manual/en/function.array-search.php)
On the other hand, if the match is on the 1st record, the return result will be 0 (1st record matches).
Hence, to cover all the cases, you may change your login.php to :
login.php
<?php session_start();
if(isset($_POST['Submit']))
{
$logins = array(
['username' =>'Fadzli', 'password' => '11111'],
['username' =>'user2', 'password' => '22222'],
['username' =>'user3', 'password' => '33333'],
['username' =>'user4', 'password' => '44444'],
);
$log_username = isset($_POST['Username']) ? $_POST['Username'] :'';
$log_password = isset($_POST['Password']) ? $_POST['Password'] :'';
$key= "";
$key = array_search($log_username, array_column($logins, 'username'));
if(trim($key) !=""){
$password = $logins[$key]['password'];
}
if (trim($key)!=""){
if($log_password == $password){
$_SESSION['Userdata'] = ['username' => $log_username];
header("location:reload.php");
exit;
}else{
$msg="<span style='color:red'>Invalid Login Information</span>";
}
}else
{
$msg="<span style='color:red'>Please input login username and password</span>";
}
}
?>
<form action="#" method="post" name="Login_Form">
<table width="400" border="0" align="center" cellpadding="5" cellspacing="1" class="Table">
<?php if(isset($msg)){?>
<tr>
<td colspan ="2" align="center" valign="top"><?php echo $msg;?></td>
</tr>
<?php } ?>
<tr>
<td colspan="2" align="left" valign="top"><h3>Login</h3></td>
</tr>
<tr>
<td align="right" valign="top">Username</td>
<td><input name="Username" type="text" class="Input"><td>
</tr>
<tr>
<td align="right">Password</td>
<td><input name="Password" type="password" class="Input"></td>
</tr>
<tr>
<td> </td>
<td><input name="Submit" type="submit" value="Login" class="Button3"></td>
</tr>
</table>
</form>
For reload.php, please
amend your original code so that the submit it to itself (otherwise the validation will never happen)
If all data are validated to be correct, store the submitted data as session variable (namely $_SESSION['phonenumber'], $_SESSION['Telco'] and
$_SESSION['ReloadCredit']), then redirect to result.php
reload.php
<?php session_start();
$phonenumber = $Telco = $Reload ='';
$numberError = $telcoError = $ReloadError = '';
$_SESSION['phonenumber']="";
$_SESSION['Telco']="";
$_SESSION['ReloadCredit']="";
if(isset($_POST['Submit']))
{
$phonenumber=$_POST['phonenumber'];
if(array_key_exists('phonenumber',$_POST) && trim($_POST['phonenumber']) === '')
{
$numberError = "Error, insert phone number";
}
else
{
if(!preg_match('/^([0-9]*)$/', $phonenumber))
{
$numberError = "Numbers only";
}
elseif(strlen($phonenumber)<10)
{
$numberError = "Numbers have to be 10 or longer";
}
}
$Telco=$_POST['Telco'];
if(array_key_exists('Telco',$_POST) && trim($_POST['Telco']) == "")
{
$telcoError = "Error! Select your telco!";
}
$Reload=$_POST['ReloadCredit'];
if(array_key_exists('ReloadCredit',$_POST) && trim($_POST['ReloadCredit']) == "")
{
$ReloadError = "Error! Select the amount you wish to reload!";
}
if ($ReloadError=="" && $telcoError=="" && $numberError=="")
{
$_SESSION['phonenumber']=$_POST['phonenumber'];
$_SESSION['Telco']=$_POST['Telco'];
$_SESSION['ReloadCredit']=$_POST['ReloadCredit'];
header("location:result.php");
exit;
}
}
function test_input($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
if($numberError=="" && $telcoError=="" && $ReloadError=="")
{
$_SESSION['data'] = ['phonenumber' => $_POST['phonenumber'] ,
'Telco' => $_POST['Telco'] ,
'ReloadCredit' => $_POST['ReloadCredit'] ];
}
}
?>
<?php
$title = "i-PREPAID RELOAD";
?>
<html>
<style>
.topup_form{
max-width: 700px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin-right:auto;
margin-left:auto;
}
.topup_form label{
display:block;
margin-bottom: 10px;
text-align:left;
}
.note1{
margin-top:5px;
font-size: 17px;
}
.topup_form label > span{
float: left;
width: 170px;
color: #F072A9;
font-weight: bold;
font-size: 17px;
text-shadow: 1px 1px 1px #fff;
}
.topup_form fieldset{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
margin: 0px 0px 10px 0px;
border: 1px solid #FFD2D2;
padding: 20px;
background: #FFF4F4;
box-shadow: inset 0px 0px 15px #FFE5E5;
-moz-box-shadow: inset 0px 0px 15px #FFE5E5;
-webkit-box-shadow: inset 0px 0px 15px #FFE5E5;
}
.topup_form fieldset legend{
color: #FFA0C9;
border-top: 1px solid #FFD2D2;
border-left: 1px solid #FFD2D2;
border-right: 1px solid #FFD2D2;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
background: #FFF4F4;
padding: 0px 8px 3px 8px;
box-shadow: -0px -1px 2px #F1F1F1;
-moz-box-shadow:-0px -1px 2px #F1F1F1;
-webkit-box-shadow:-0px -1px 2px #F1F1F1;
font-weight: normal;
font-size: 25px;
}
.topup_form button,
.topup_form input[type=reset],
.topup_form input[type=button]{
background: #EB3B88;
border: 1px solid #C94A81;
padding: 5px 15px 5px 15px;
color: #FFCBE2;
box-shadow: inset -1px -1px 3px #FF62A7;
-moz-box-shadow: inset -1px -1px 3px #FF62A7;
-webkit-box-shadow: inset -1px -1px 3px #FF62A7;
border-radius: 3px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
font-weight: bold;
}
.Button
{
width: 170px;
margin-right:auto;
margin-left:auto;
}
#warning{text-align:left;}
</style>
<div class="topup_form">
<form name="Topup" action="#" method="post" onsubmit="return confirm('Are you sure?')" >
<fieldset><legend><?php echo $title ?></legend>
Welcome <?php echo $_SESSION['Userdata']['username'];?>
<label for="phonenumber"><span>Phone Number <span>*</span></span><input type="text" name="phonenumber"/></label>
<div id = "warning" style="color: red;"><?php echo $numberError ?? '';?></div><br>
<label for="Telco"><span>Telco</span><select name="Telco">
<option value=""></option>
<option value="Maxis">Maxis</option>
<option value="Celcom">Celcom</option>
<option value="Digi">Digi</option>
<option value="TuneTalk">TuneTalk</option>
<option value="Unifi">Unifi</option>
</select></label>
<span class="note1">(Example:Maxis, Celcom, Digi)</span>
<div id = "warning" style="color: red;"><?php echo $telcoError ?? '';?></div><br>
<label for="Reload"><span>Reload Credit </span><select name="ReloadCredit">
<option value=""></option>
<option value="5">RM5</option>
<option value="10">RM10</option>
<option value="20">RM20</option>
<option value="30">RM30</option>
<option value="50">RM50</option>
</select></label>
<span class="note1">(Example:RM5,RM10,RM20)</span>
<div id = "warning" style="color: red;"><?php echo $ReloadError ?? '';?></div><br>
</fieldset>
<fieldset class="Button">
<button type="submit" value="Submit" name='Submit' >Buy</button>
<input type="reset" value="Reset" />
</fieldset>
</form>
</html>
For result.php, just display the submitted data thru the session variables:
result.php
<html>
<?php session_start()?>
<form name="result" action="">
Hi <?php echo $_SESSION['Userdata']['username'];?>
<br>
<p>Successfully reloaded</p>
<label for="phonenumber"><span>Phone Number : </span><?php echo $_SESSION['phonenumber']?></label><br>
<label for="telco"><span>Telco : </span><?php echo $_SESSION['Telco'] ?><br>
<label for="reloadcredit"><span>Reload Credit : RM </span><?php echo $_SESSION['ReloadCredit']?>
<p>Thank you for using i-Prepaid Reload</p>
</form>
</html>
However, in future, please consider using a database approach to manage the users' credentials. Otherwise you need to update the PHP array list everytime you have new / changed username and/or passwords.

future search of mySQL query using PHP and JavaScript

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.

My submit buttons are not working

After submitting the buttons, it doesn't redirect to another page. Can someone please help to find the error in this code and why my buttons typ1 and cod does not redirect to the location which I already given.
<?php
include("connect.php");
include("common.php");?>
<html>
<head>
<script>
function cd()
{
document.getElementById('credit').style.display='block';
document.getElementById('debit').style.display='none';
document.getElementById('net').style.display='none';
document.getElementById('cash').style.display='none';
}
function db()
{
document.getElementById('debit').style.display='block';
document.getElementById('credit').style.display='none';
document.getElementById('net').style.display='none';
document.getElementById('cash').style.display='none';
}
function ns()
{
document.getElementById('net').style.display='block';
document.getElementById('debit').style.display='none';
document.getElementById('credit').style.display='none';
document.getElementById('cash').style.display='none';
}
function cs()
{
document.getElementById('cash').style.display='block';
document.getElementById('debit').style.display='none';
document.getElementById('credit').style.display='none';
document.getElementById('net').style.display='none';
}
function validate(inputtxt)
{
var card1 = /^(?:3[47][0-9]{13})$/;
if(inputtxt.value.match(card1))
{
return true;
}
else
{
alert("Not a credit card number!");
return false;
}
if(card1.length!=16)
{
alert("Only 16 digits are allowed");
return false;
}
}
</script>
<style>
.d2
{
border: 1px solid black;
font-size: 30px;
color: white;
background-color: #242222;
padding: 15px 15px 15px 50px;
font-family: Arial;
font-style:;
}
.tab{
width:100%;
height: 400px;
padding:25px 10px 10px 25px;
font-size: 25px;
padding:15px;
border:1px solid black;
border-collapse:collapse;
}
#credit
{
width: 80%;
height: 100%;
padding :25px 15px 15px 15px;
font-size: 20px;
}
#debit{
width: 80%;
height: 100%;
padding :25px 15px 15px 15px;
font-size: 20px;
}
#net{
width: 80%;
height: 100%;
padding :25px 15px 15px 15px;
font-size: 20px;
}
#cash{
width:600px;
height:100%;
padding :25px 15px 15px 15px;
font-size: 20px;
float: left;
}
.card{
border: 1px solid black;
}
</style>
</head><body>
<form method="post">
<?php
if(isset($_SESSION['sum']))
{
$s1=$_SESSION['sum'];
echo "
<div class='d2'> Make Payment</div>
<div>
<table class='tab'><tr><td><button name='cr' style='padding: 14px 20px 14px 20px;font-size:15px;color:white;width:300px;background-color:#373535;cursor:pointer;border-radius:5px;border-color:#363434;border-collapse:collapse;font-weight:inherit;' class= 'c1' onclick='cd()'>Credit Card</button>
<br/>
<button name='dr' class='d1' style='padding: 14px 20px 14px 20px;font-size:15px;color:white;width:300px;background-color:#373535;cursor:pointer;border-radius:5px;border-color:#363434;border-collapse:collapse;font-weight:inherit;' onclick='db()'>Debit Card</button>
<br/>
<button name='nb' class='n1' style='padding: 14px 20px 14px 20px;font-size:15px;color:white; width:300px; background-color:#373535;cursor:pointer;border-radius:5px;border-color:#363434;border-collapse:collapse;font-weight:inherit;' onclick='ns()'>Net Banking</button>
<br/>
<button name='cash' style='padding: 14px 20px 14px 20px;font-size:15px;color:white;background-color:#373535;width:300px; cursor:pointer;border-radius:5px;border-color:#363434;border-collapse:collapse;font-weight:inherit;'onclick='cs()'>Cash On Delivery</button>
</td>
<td ><div id='credit' > <h2>Pay using Credit</h2>
<hr>
<label>Card number :</label> <span class='card'><input type='text' name='cardno' placeholder='Card number' required='true'/></span>
<br/>
<br/>
<label>Expiry Date:</label> <input type'text' name='month' placeholder='MM' required='true'/>
<input type'text' name='year' placeholder='YY' required='true'> <input type'text' name='cvv' placeholder='CVV' required='true'/>
<br/>
<br/>
<button type='submit' name='typ1' style='padding: 14px 35px 14px 35px;font-size:15px;color:white;background-color:#ED0C5B;cursor:pointer;
border-radius:5px;border-color:#ED0C5B;border-collapse:collapse;font-weight:inherit;'>
<center>Pay Rs. $s1</center></button>
<br/>
<br/>
<label>This card will be save for faster payment.</label>
</div>
<div id='debit' style='display:none' > <h2>Pay using Debit Card</h2>
<hr>
<label>Card number :</label> <input type='text' name='cardno' placeholder='Card number' required='true'/>
<br/>
<br/>
<label>Expiry Date:</label> <input type'text' name='mm' placeholder='MM' required='true'>
<input type'text' name='yy' placeholder='YY' required='true'> <input type'text' name='cvv' placeholder='CVV' required='true'>
<br/>
<br/>
<button type='submit' style='padding: 14px 35px 14px 35px;font-size:15px;color:white;background-color:#ED0C5B;cursor:pointer;border-radius:5px;border-color:#ED0C5B;border-collapse:collapse;font-weight:inherit;'><center>Pay Rs. $s1</center></button>
<br/>
<br/>
<label>This card will be save for faster payment.</label>
</div>
<div id='net' style='display:none'> <h2>Pay using Net Banking</h2>
<hr/>
<label>Select Bank:</label><input type='radio' value='ICICI'>ICICI <input type='radio' value='HDFC'>
HDFC <input type='radio' value='Axis'>Axis
<br/>
<br/>
<label>Account number :</label> <span class='card'>
<input type='text' name='cardno' placeholder='Enter your Account number' required='true'/>
</span>
<br/>
<br/>
<button type='submit' style='padding: 14px 35px 14px 35px;font-size:15px;color:white;background-color:#ED0C5B;cursor:pointer;
border-radius:5px;border-color:#ED0C5B;border-collapse:collapse;font-weight:inherit;'><center>Pay Rs. $s1</center></button>
<br/>
<br/>
<label>This card will be save for faster payment.</label>
</div>
<div id='cash' style='display:none'> <h2>Pay using Cash On Delivery</h2>
<hr width=100%/>
<button name='cod' type='submit' style='padding: 14px 35px 14px 35px;font-size:15px;color:white;background-color:#ED0C5B;cursor:pointer;
border-radius:5px;border-color:#ED0C5B;border-collapse:collapse;font-weight:inherit;'>
Place COD Order</button>
<br/>
<br/>
<br/>
<label>This card will be save for faster payment.</label>
</div>
</td>
</tr>
</table>
</div>
";
}
?>
</form></body></html>
<?php
if(isset($_POST['typ1']))
{
$_SESSION['s2']=$_SESSION['sum'];
$card=$_POST['cardno'];
$mon=$_POST['month'];
$yr=$_POST['year'];
$cv=$_POST['cvv'];
$_SESSION['card']=$card;
$q7="select * from bank where card_no=$card";
$qry6= mysql_query($q7);
while($r7=mysql_fetch_array($qry6))
{
$m=$r7[3];
$y=$r7[4];
$c=$r7[5];
$money=$r7[6];
if($mon==$m && $yr==$y && $cv==$c)
{
header("location:redirect.php");
}
else{
echo "<script>alert('Your details doesnot match');</script>";
}
}
}
if(isset($_POST['cod']))
{
header("location:cod.php");
}
?>

you didn't write which page form submit.
<form method="post"><!-- action="isWhere" -->
Also you can write your code like this. I think this way is better than your wrote.
<?php
if(isset($_SESSION['sum']))
{
$s1=$_SESSION['sum'];
?>
<form method="post" action="isWhere">...</form>
<?php
}
?>

Button and POST method - Not allowing execution of javascript method

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