I'm confuse in this topic what should I do and How.?
I would like to have popup box which ask for the password before delete the user from the list. If Password(as some value eg. ex12345) is correct then delete the user If no then say Password is incorrect.
I have my PHP page with simple popup. I would like to have popup with the inputbox
Any help will be appreciate.
here is my code. as view.php
<html>
<head>
<meta charset="utf-8">
<title>LogIn Information System</title>
<link rel="stylesheet" media="screen" href="stylesS.css" >
<script>
function confirmDelete(delUrl)
{
if (confirm("Are you sure you want to delete"))
{
document.location = delUrl;
}
}
</script>
</head>
<body>
<div class="header-top">
<a href="//home" class="utopia-logo">
<img src="//images/logo.png" alt="asd" />
</a>
</div><!-- End header -->
<table class = "button_table">
<tr>
<td><button class="submit" type="submit">Home</button></td>
<td><button class="submit" type="submit">Search</button></td>
<td><button class="submit" type="submit">Customer List</button></td>
<?php
if($_SESSION['valid']=='admin'){
echo "<td><button class='submit' type='submit'><a href='add.php'>Add User</a></button></td>";
echo "<td><button class='submit' type='submit'><a href='users.php'>View User</a></button></td>";
}
?>
<td><button class="submit" type="submit">Logout</button></td>
</tr>
</table>
<form class="contact_form" action="search.php" method="post" name="contact_form">
<ul>
<li>
<h2>Search Results</h2>
<span class="required_notification">Following search matches our database</span>
</li>
</li>
<?php
echo "<table border='0' width='100%'>";
echo "<tr class='head'>";
echo "<th>Name</th>";
echo "<th>Last Name</th>";
echo "<th>Phone</th>";
echo "<th>Action</th>";
echo "</tr>";
while($row = mysql_fetch_array($find)){
echo "<tr class='t1'>";
echo "<td>".$row['fname']."</td>";
echo "<td>".$row['lname']."</td>";
echo "<td>".$row['phone']."</td>";
?>
<td>
<a href="edit.php?id=<?php echo $row['id'];?>" class='action'>Edit</a> |
Serve
</td>
<?php
echo "</tr>";
}
echo "</table>";
?>
</li>
</ul>
</form>
</body>
</html>
Delete.php
if (isset($_GET['id']) && is_numeric($_GET['id']))
{
// get id value
$id = $_GET['id'];;
}
$rec = "delete from data where id='$id'";
if(mysql_query($rec)){
echo "<center></h1>Selected Customer serve by DC</h1></center>"."<br />";
echo "<center></h6>Please wait while you are redirected Home in 3 seconds..</h6> </center>"."<br />";
header('Refresh: 3; url=home.php');
}
else{
die("Data failed to delete in the database");
}
?>
Okay here is an example of what I think you are asking for:
I separated the js in the header so you could better understand. first one does the pop up box and second script does the ajax call. Remember this is a very basic example
Test.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.9);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/3-$(id).height()/3);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
$(window).resize(function () {
var box = $('#boxes .window');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
box.css('top', winH/2 - box.height()/2);
box.css('left', winW/2 - box.width()/2);
});
});
</script>
<script type="text/javascript">
function ConfirmDelete()
{
var confirm = document.getElementById('confirm').value;
var dataString = 'password='+ confirm;
if(confirm.length>0)
{
$.ajax({
type: "GET",
url: "delete.php",
data: dataString,
success: function(server_response)
{
document.getElementById("results").style.display = "block";
$('#results').html(server_response).show();
$('#mask').hide();
$('.window').hide();
}
});
}
return false;
}
</script>
<style type="text/css">
#mask{position:absolute;left:0;top:0;z-index:9000;background-color:#222;display:none}
.window{position:fixed;left:0;top:0;width:450px;height:200px;display:none;z-index:9999;padding:20px}
#dialog1{padding:10px 10px 8px 25px;border:2px solid #a1a1a1;width:450px;height:200px; background-image:url('imgs/bg.jpg');
</style>
</head>
<body>
Delete this Entry
<!-- Start of MODAL BOX -->
<div id="dialog1" class="window" align="center">
<font color="#FFFFFF">If you are sure you wish to delete this please enter your admin password</font><br>
<font color="#FFFFFF"><b>test password ( Admin )</b></font>
<input type="password" id="confirm"/><br><br>
<input type="submit" name="confirm_delete" onclick="ConfirmDelete()" value="Confirm Delete">
</div><!-- End of MODAL BOX -->
<div id="mask"></div><!-- Mask to cover the whole screen -->
<div id="results" class="results" style="display:none;"> </div>
</body>
</html>
the call page this is where you will have your php
delete.php
<?PHP
if($_GET['password'] === "Admin")
{
//sucess do your delete here
echo " this was the correct password ";
}
else
{
//failure
echo " Password incorrect!! ";
}
?>
do JS check on client side and use CRSF on server side - http://en.wikipedia.org/wiki/Cross-site_request_forgery
Here is a good example: CSRF (Cross-site request forgery) attack example and prevention in PHP
Related
I am trying to pass the ID of the clicked image to next page. When I developed my code, it didn't redirect me to the next page. When I click F12 and check the POST in network, it shows that the variable is passed correctly to the next page as shown in the attached image but it didn't redirect me to the next page. So now I know that the variable is passed and received correctly in the next page but I need what needed in my code to direct me to the next page,
Note: when I tried to put window.location.href = 'userevent.php'; it redirect me but without the variable and gives me error (Notice: Undefined index: clicked in)
Also when I use url: '#userevent.php.Action("delivery", "service")',, it gives me network status 403
this is my code:
<?php
session_start();
require "init.php";
login();
?>
<html>
<!--...-->
<head>
<meta charset="utf-8">
<title> Ghost </title>
<!-- <link rel="Stylesheet" href="css/style1.css">-->
<link rel="stylesheet" href="css/style2.css" media="screen" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script >
function myFunction(clicked) {
document.getElementById('test').innerHTML = clicked;
$.ajax({
type: "POST",
//url: '#userevent.php.Action("delivery", "service")',
url: 'userevent.php',
dataType:'json',
data: {"clicked": clicked},
success: function(data){
}
});
window.location.href = 'userevent.php';
}
</script>
</head>
<body>
<div class="sidenav">
Main Page
About Us
</div>
<div class="login-box">
<h1>Add Event</h1>
<div>
<p id="test"> </p>
<?php
// LOGIN USER
function login(){
global $con;
global $counter;
echo "<table align='center' >";
//$email = $mysqli->escape_string('');
$query="SELECT * FROM events ORDER BY ID ASC";
$result=mysqli_query($con,$query);
if ( $result->num_rows == 0 ) // User doesn't exist
echo "User with that ID doesn't exist!";
else { // User exists
$counter = 0;
$emptyArray = [];
while($row = $result->fetch_assoc())
{
$emptyArray[$counter]= $row["ID"];
if($counter == 0)
{
echo '<tr>';
}
echo '<td><img id=' . $row["ID"]. ' onClick="myFunction(this.id)" src="images/' . $row["photo"]. '" width="250px" height= "250px" alt="Avatar" >
<h1 id = "GFG_DOWN" style =
"color:white;text-align:center; font-size: 20px; font-weight: bold;"> '.$emptyArray[$counter].'
</h1> </td>';
$counter++;
if($counter == 3)
{
echo "</tr>";
$counter = 0;
}
}
}
}
mysqli_close($con);
?>
and this is the code in the second page:
<div class='textbox'>
<label> ID: ".$_POST['clicked']."</label>
</div>
The entire point of Ajax is that that request is made with JavaScript and the response is handled by JavaScript without navigating to a new page.
If you want to make a POST request and navigate to the resulting page, then use a <form>
window.location.href = 'userevent.php';
it redirect me but without the variable
Assigning a URL to location.href triggers browser navigation (with a GET request) to that URL.
It is a completely different request to the Ajax request so it doesn't have the data from that request.
Again: Use a form for this.
I read the data from database and I get the clicked id of the images.
Put the data you want to send in a submit button instead.
<form method="POST" action="userevent.php">
<?php while($row = $result->fetch_assoc()) ?>
<button name="clicked" value="<?php echo htmlspecialchars($row["ID"]); ?>">
<img src="images/<?php echo htmlspecialchars($row["photo"]); ?> alt="Put useful and unique alt text so people know what they are selecting if they can't see the image">
</button>
<?php } ?>
</form>
I think you are better off making a small form, since you want to send the user to a new page when clicking.
<?php while($row = $result->fetch_assoc()) ?>
<form action="userevent.php" method="POST">
<input type="hidden" name="clicked" value="$row["ID"]">
<img src="images/{{ $row['photo'] }}" class="img">
</form>
<?php } ?>
$('.img').click(function() {
this.form.submit();
});
*Edited to reflect your current edits.
How to hide country parameters on page load via jquery ajax php.
The code below display results from database and its working fine.
I can hide/unhide or toggle all the country values each separately via its id when button is click and is working good.
Here is my issue: How can I hide only the all country values on page load so that I can toggle or hide/unhide it as usual.
here is my coding effort so far
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
//toggle div on click
$(document).ready(function() {
$(".hideunhide_country").click(function(){
var id = this.id;
$("#result_"+id).toggle( 'slow', function(){
});
});
});
/*
//hide unhide div on click
$(document).ready(function(){
$(".hideunhide_country").click(function(){
var id = this.id;
$("#result_"+id).hide();
});
});
*/
</script>
<div class="content">
<?php
include('db.php');
$result = $db->prepare('SELECT * FROM users order by id');
$result->execute();
while ($row = $result->fetch()) {
$id = $row['id'];
$country = $row['country'];
?>
<div class="p">
<h1>Userid: <?php echo $id; ?></h1>
//hide country values on page load
<div id="result_<?php echo $id; ?>">
<h1><?php echo $country; ?></h1>
</div>
<input type="button" value="HideUnhide" id="<?php echo $id; ?>" class="hideunhide_country" />
</div>
<?php
}
?>
</div>
</body>
</html>
Only a qucik fix, you schould refactor your code...
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
//toggle div on click
$(document).ready(function() {
$(".hideunhide_country").click(function(){
var id = this.id;
$("#result_"+id).toggle( 'slow', function(){
});
});
// hide all countries
$("[id^='result_']").hide()
});
/*
//hide unhide div on click
$(document).ready(function(){
$(".hideunhide_country").click(function(){
var id = this.id;
$("#result_"+id).hide();
});
});
*/
</script>
<div class="content">
<?php
include('db.php');
$result = $db->prepare('SELECT * FROM users order by id');
$result->execute();
while ($row = $result->fetch()) {
$id = $row['id'];
$country = $row['country'];
?>
<div class="p">
<h1>Userid: <?php echo $id; ?></h1>
//hide country values on page load
<div id="result_<?php echo $id; ?>">
<h1><?php echo $country; ?></h1>
</div>
<input type="button" value="HideUnhide" id="<?php echo $id; ?>" class="hideunhide_country" />
</div>
<?php
}
?>
</div>
</body>
</html>
So I have a table where each cell is a name of a game and when you click it it needs to show in a fancybox the results of the user which clicked the cell (I use table Indexes to get the GameID and the Session variable to get userID) which will be used to load the results from a second PHP page.
If I click on a cell for the first time the fancybox will not display anything and after I close fancybox and click on any cell again it works fine. Am I doing something wrong?
This is the whole javascript:
$(".jogos").fancybox({
'hideOnContentClick': true,
'onComplete':function(element)
{
var gameIdx = $(element).index();
var cateIdx = $(element).parent().parent().index();
var gameIdxPHP;
var catIdxPHP;
var gameID;
var userId = '<?php echo $_SESSION['userID']; ?>'
<?php
for ($i=1; $i<= count($categoryArray);$i++)
{
for ($j=1; $j<=count($categoryArray[$i-1]->gamelist);$j++)
{
?>
catIdxPHP = '<?php echo $i ?>' -1;
gameIdxPHP = '<?php echo $j ?>' -1;
if (catIdxPHP == cateIdx && gameIdxPHP == gameIdx)
{
gameID = '<?php echo $categoryArray[$i-1]->gamelist[$j-1]->GameID; ?>';
$("#graphic").load("backoffice/resUserNivel2short.php", {userId:userId,gameID:gameID}, function(){ });
}
<?php
}
}
?>
}
});
HTML
<div style="display:none">
<div id="data">
<div id="graphic">
</div>
</div>
</div>
Sample code of the link
<a href="#data" class="jogos" id="cat<?php echo $i; ?>jogo<?php echo $j; ?>" >
You have display:none on the parent of your fancybox therefor the grafic isnt displayed.
The Grafic element isn't inside the dom yet if you use display:none initially. Try to use clip: rect instead as a class and add/remove that class using the fancybox callbacks.
Try this code:
$('.jogos').fancybox({
'onStart': function() {
$("#data").removeClass('hidden');
},
'onClosed': function() {
$("#data").addClass('hidden');
}
});
CSS:
.hidden {
clip: rect(1px 1px 1px 1px);
position: absolute;
)}
HTML:
<div>
<div id="data" class="hidden">
<div id="graphic">
</div>
</div>
</div>
I am trying to add new elements (buttons) to html file using javascript. Here is the working script:
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<script type="text/javascript">
var element = document.createElement("input");
element.type = "button";
element.value = "Click me";
element.id = <?=$row['id'];?>;
var foo = document.getElementById("examples");
foo.appendChild(element);
</script>
<?php
}
?>
</div>
The script adding new elements to html file, but I would like to change some of the properties (for example:button size) too.
I have method SetProperties(id, fontSize) and if I am adding it in code when elements should be created it doesn't work, it even do not creates that new elements. Here is the code which makes me a headache:
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<script type="text/javascript">
var element = document.createElement("input");
element.type = "button";
element.value = "Click me";
element.id = <?=$row['id'];?>;
var foo = document.getElementById("examples");
foo.appendChild(element);
*SetProperties(<?=$row['id'];?>, <?=$row['fontSize'];?>);*
</script>
<?php
}
?>
</div>
And here is the function which changes new elements properties:
<script type="text/javascript">
function SetProperties(id, fontSize)
{
var btn = document.getElementById(id);
btn.style.fontSize = fontSize + "px;";
}
</script>
you may try like this
<style>
#examples [type=button]
{
font-size:25px;
}
</style>
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<script type="text/javascript">
var element = document.createElement("input");
element.type = "button";
element.value = "Click me";
element.id = <?=$row['id'];?>;
var foo = document.getElementById("examples");
foo.appendChild(element);
</script>
<?php
}
?>
</div>
About your code, try using just strings for the id:
element.id = "<?=$row['id'];?>";
/* ... */
SetProperties("<?=$row['id'];?>");
Because getElementById expects a string. In some cases JavaScript could cast the number to string, but it depends on how getElementById is implemented in the browser.
Besides that, the code that your are doing can be implemented in a much better way:
Output the HTML directly
Use CSS for changing the styles
If you need to associate some meta-data to your button so you can refer for example to a database id, use data attributes, instead of messing with the ID.
For example:
<div id="examples">
<?php
while ($row=mysql_fetch_array($result)) {?>
<button class="do-something" data-row-id="<?=$row['id'];?>">Click me</button>
<?php
}
?>
</div>
Then in CSS:
.do-something { /* set CSS properties */ }
Also if you need to add a click handler, and you have a lot of buttons, you can assign the handler to the container of buttons (the example uses jQuery):
$('#examples').on('click', '.do-something', function () { /* handler */ });
This is more efficient than assigning the click handler for each button.
<script type="text/javascript">
function SetProperties(id)
{
document.getElementById(id).style.fontSize = 25 + "px";
}
</script>
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<script type="text/javascript">
var element = document.createElement("input");
element.type = "button";
element.value = "Click me";
element.id = <?=$row['id'];?>;
var foo = document.getElementById("examples");
foo.appendChild(element);
SetProperties(<?=$row['id'];?>, <?=$row['fontSize'];?>);
</script>
<?php
}
?>
</div>
I agree with #meagar -- why emit JavaScript when you can do it all on the server?
Here's how you would add the elements directly on the server-side, instead of emitting JavaScript that then adds the elements on the client-side:
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<input type="button" value="Click me" id="<?=$row['id'];?>" />
<?php } ?>
</div>
and to style it, put this in the <head> or in your CSS file:
<style>
#examples input {
font-size: 25px;
}
</style>
You may try like this to avoid creating `buttons` at `client` side
<div id="examples">
<?php
while ($row=mysql_fetch_array($result))
{?>
<input type="button" value="Click me" id="<?=$row['id'];?>" style="font-size: 25px;" />
<?php } ?>
</div>
I am experiencing this problem for few hours now and really not sure how to solve this. However its work fine in IE but it is not working in mozilla.
Here is my code:
<!-- Skin CSS file -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/skin.css">
<!-- Utility Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script src="http://yui.yahooapis.com/2.7.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.7.0/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script src="http://yui.yahooapis.com/2.7.0/build/editor/editor-min.js"></script>
<script>
var myEditor = new YAHOO.widget.Editor('msgpost', {
height: '100px',
width: '522px',
dompath: true, //Turns on the bar at the bottom
animate: true //Animates the opening, closing and moving of Editor windows
});
myEditor.render();
//Inside an event handler after the Editor is rendered
YAHOO.util.Event.on('save', 'click', function() {
//Put the HTML back into the text area
myEditor.saveHTML();
//The var html will now have the contents of the textarea
var html = myEditor.get('msgpost').value;
});
YAHOO.util.Event.on('edit', 'click', function() {
//Put the HTML back into the text area
myEditor.saveHTML();
//The var html will now have the contents of the textarea
var html = myEditor.get('msgpost').value;
});
</script>
<form id="form2" name="form2" method="post" action="processgreeting.php">
<div class="span-22 gtype" >
<div class="span-5"><label>Message:</label></div>
<div class="span-17 last"><textarea name="msgpost" id="msgpost" cols="50" rows="40"> </textarea> <br>
</div>
<input type="submit" name="save" value="Post Greeting" id="postgreeting"/>
</form>
processgreeting.php
if(isset($_POST['save']))
{
$body = trim($_POST['msgpost']);
$valid = 1;
$publish_date = strtotime($publish);
if ($publish >= $today)
{
$valid = 0;
$insert_greeting = "INSERT INTO greeting (type,decs,name,message,date,user,publish) VALUES ('$type','$desc','$name','$body','$today',$user,'$publish')";
$register_greeting = mysql_query($insert_greeting)or die(mysql_error());
$lastnum = mysql_insert_id();
$_SESSION["greetingno"] = $lastnum;
if($valid == 0)
{
echo '<strong>Greeting Type: </strong>'.$type.'<br><strong>Description: </strong>'.$desc.'<br><strong>Name: </strong>'.$name.'<br><strong>Message: </strong>'.$body.'<strong><br>Publish Date: </strong>'.$publish;
}
//echo $valid;
}
else{ //echo "<span style='color:#FF0000'>Publish date is invalid</span>" ;
echo $valid;
} //}
}
Please can anyone help me what iam doing wrong..
Thanks in advance.
i've just tried on my mac with firefox and everything seems to work. What's exactly your problem ?