Passing values from PHP to JavaScript - php

I'm trying to get the value which is the id in the mysql database. However, each time I click on the image, I get null. I used this to get the value but it is not working as it keeps giving me null in the alert box.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<?php
mysql_connect('localhost','root','');
mysql_select_db("ajax");
$query="SELECT * FROM xxxx";
$result= mysql_query($query);
while($row= mysql_fetch_array($result)){
echo "<img src='".$row['filepath']."' value='".$row['ID']."' id='".$row['ID']."' onclick='getrating(this.value);'>";
echo "<br>";
}
?>
<script type="text/javascript" >
function getrating(row_id){
var x = document.getElementById(row_id);
alert(x);
}
</script>
</body>
</html>
What is the problem?

You need getrating(this.id) instead. Images don't have a value property.

Try this:
echo "<img src='".$row['filepath']."' id='".$row['ID']."' onclick='getrating(".$row['ID'].");'>";

Or you can pass this.id
<img id="row_12" onclick="getrating(this.id)" alt="image"/>
function getrating(id){
alert(id);
}
Or you can use the event object and the currentTarget propety
<img id="row_12" onclick="getrating(event)" alt="image"/>
function getrating(e){
alert(e.currentTarget.id);
}

value isn't a valid attribute of the img tag. You could use the id, or just do
echo "<img ... onclick='getrating($row[ID]);'>";

An <img> doesn't have a value property.
You are doing unnecessary work in your function too. Your code should look like this:-
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<?php
mysql_connect('localhost','root','');
mysql_select_db("ajax");
$query="SELECT * FROM xxxx";
$result= mysql_query($query);
while($row= mysql_fetch_array($result)){
echo "<img src='".$row['filepath']."' value='".$row['ID']."' id='".$row['ID']."' onclick='getrating(this);'>";
echo "<br>";
}
?>
<script type="text/javascript" >
function getrating(element){
alert(element);
}
</script>
</body>
</html>
By passing this to your function through the onclick event, you already have the element you are looking for without needing to use document.getElementById().

They way how you escape the ID could be the problem. I know this is already answered but just in case for those people who needs another solution.
onclick="getrating(\''.$row['ID'].'\')"

Related

Assign the text of an element as a php variable

i have a text inside an element. This text will changed according to a jQuery. As it changes, I need to pull that text as a php variable. This variable will be used later in the same document.
<div id="divId">sometext<div>
now, I want to assign a php code to assign "sometext" as the variable
I need the below;
<div id="divId">
sometext
<?php
$variable = (get text from "divId");
?>
<div>
then I can use it somewhere else like
<div>
<?php
if($variable == "sometext")
{
echo ($variable);
}
?>
<div>
I need help on the (get text from "divId")part
You cant do with PHP. please use javascript or jquery
please find way of jquery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var getDivValue = $('#divId').html();
if(getDivValue == 'sometext'){
$('#divId').html('updateText');
}else if(getDivValue == 'other'){
$('#divId').html('updateTextTwo');
}
});
</script>
</head>
<body>
<div id="divId">sometext</div>
</body>
</html>

how to insert php on html5

I wanted to insert php on html5
i trying copy code from w3schools
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
</head>
<body>
<div id="result"> </div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("do_dropdown.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>
</body>
</html>
my do_dropdown.php just select data from drop down list
but it doesn't show anything.
what do i miss?
the right thing to do, for my opinion
is to send your options data as JSON and to parse it with JS to required dropdown
for easy solution that will fit your situation, ill assume this is your PHP code:
//file name: do_dropdown.php
<?php
$options = [1,2,3,4,5];
echo '<select name="name">';
foreach $options as $option{
echo "<option value=$option>$option</option>";
}
echo '</select>';
?>
so you need to change your html file to PHP file (file.html -> file.php) and make sure you run on it PHP server (localhost as you are using right now)
<div id="result">
<?php
require_once "do_dropdown.php";
?>
</div>
there are much better solutions for this, but I guess your'e new in business so good luck :)
why don't you try this ?
I think, It should not create any problem even if you're using HTML5. NOTE :: it should be .php extension file
<html>
<body>
<?php
....your code
....from file <do_dropdown.php>
?>
</body>
</html>
you can also create a function and call it from here.

Why does my jquery code glitch for animation?

thanks for reading this,
I'm making a website. I have a popup box that asks if you are 18 years or older. Once you click "yes", the forum I'm making appears. When you click the reply button, for some unknown reason, the popup box reappears.
Why is that?
this is the php file.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Umich Chan</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="index.js">
</script>
</head>
<body>
<div id="confirmage">
<h2 style="text-align:center;">Are you older than 18 years old?</h2>
<button id="close" style="display:block;margin-left:auto;margin-right:auto;margin-bottom:5px;">Yes</button>
<button id="linknoclose" style="display:block;margin:auto;">No</button>
</div>
<div id="fadeina" style="opacity:0;">
<p>
</p>
Post Anonymously Now<br>
<br>
<?php
// Connect to server and select database.
$con = mysqli_connect("$host", "$username", "$password", "$db_name") or die ("cannot connect");
$result = mysqli_query($con, "SELECT * FROM Table_forum ORDER BY `key` DESC");//
// Start looping table row
while($rows = mysqli_fetch_array($result)){
$key=$rows['key'];
$name=$rows['name'];
$input=$rows['input'];
echo "<div class='answerbox'>";
echo '<font color="blue">' .$name. '</font>';
echo "<br />";
echo "$input.";
echo "<a class='reply' href=''>Reply</a>";
echo "</div>";
echo "<div class='replybox'><textarea></textarea></div>";
/*
echo "<div class='commentbox'>";
$namecomment = mysqli_query($con, "SELECT namea FROM `postcomments` WHERE keya = '1'");//
echo ".$name.";
$inputcomment = mysqli_query($con, "SELECT input FROM `postcomments` WHERE keya = '" .mysql_real_escape_string .$key."'");//
echo ".$inputcomment.";
echo "</div>";
*/
}
mysql_close();
?>
</div>
</body>
</html>
This the js file.
$(document).ready(function() {
$(".replybox").hide();
$(".reply").css("color","blue");
$("#fadeina").hide();
$(".reply").click(function(){
$(".replybox").show();
});
$("#close").click(function(){
$("#confirmage").remove();
});
$("#close").click(function(){
$("#confirmage").empty();
});
$("#close").click(function(){
$("#fadeina").fadeTo('slow',1);
});
$("#linknoclose").click(function(){
history.back();
return false;
});
});
The popup box reappears because your Reply link has an empty href:
"<a class='reply' href=''>Reply</a>";
As Stated in RFC 2396: A URI reference that does not contain a URI is
a reference to the current document. In other words, an empty URI
reference within a document is interpreted as a reference to the start
of that document
try using href="javascript:;".
Unlike the <button> elements, the "reply" anchor needs e.preventDefault() (or return false) to inhibit its natural hyperlink behaviour, which will cause the page to reload.
The code will also simplify quite significantly.
$(document).ready(function() {
$(".replybox, #fadeina").hide();
$(".reply").css("color","blue").on('click', function(e) {
e.preventDefault(); //<<<<<<<<
$(".replybox").show();
});
$("#close").on('click', function() {
$("#confirmage").remove();
$("#fadeina").fadeTo('slow', 1);
});
$("#linknoclose").on('click', function() {
history.back();
});
});

PHP Edit Post with Google OpenID

I'm trying to code an edit post page for my site which posts to itself using a google openid logon, however i just get a blank page, instead of the edit form. Here's the code i'm using:
<html>
<head>
<title>BQuotes</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="votingfiles/voting.css" rel="stylesheet" type="text/css" />
<script src="votingfiles/voting.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<link rel="stylesheet" type="text/css" href="http://bquotes.me/mystyle-a.css">
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<style>
.head_text {
color: #ffffff;
}
a {
text-decoration: none;
}
</style>
<script type="text/javascript">
$('#g-login').bind('click', function (event) {
// event.preventDefault();
// $('#form-id').attr('action', 'google-login.php').trigger('submit');
alert("Clicked");
});
</script>
</head>
<body style="color:#d4ffaa">
<!-- BQ Edit Post Start -->
<div data-role="page" id="editPost">
<div data-role="header" style="background-color:#5FBF00">
<h1 class="head_text">BQuotes: Edit Statuses</h1>
</div>
<div data-role="main" class="ui-content">
<?php
?>
</div>
<?php
define ('HOSTNAME', 'host');
define ('USERNAME', 'user');
define ('PASSWORD', 'pass');
define ('DATABASE_NAME', 'db');
$db = mysql_connect(HOSTNAME, USERNAME, PASSWORD) or die ('I cannot connect to MySQL.');
mysql_select_db(DATABASE_NAME);
$tbl='table';
$id=$_POST['pid'];
$query="SELECT * from $tbl WHERE $id=id";
$result = mysql_query($query);
while($row = mysql_fetch_array($result)) {
$id=$row['id'];
$username=$row['username'];
$message=$row['message'];
$tag=$row['tag'];
session_start();
if($_SESSION['myusername'] != null && isset($_SESSION['myusername'])){
echo "<form action='logout.php' method='post' id ='form-logout' data-ajax='false'>
<br/><input type='submit' value='Logout'/>";
echo "</form>";
echo "<div style='margin-left:20px;'>Logged In As: ".$_SESSION['myusername']."</div>";
echo "<form name='post-edit' action='' method='post'>";
echo "<input type='hidden' name='id' value=".$row['id'].">";
echo "<input type='hidden' name='username' value=".$row['username'].">";
echo "<textarea name='message' value=".$row['message'].">";
echo "<input type='text' name='tag' value=".$row['tag'].">";
echo "<input type='submit' name='submit' value='Edit!'>";
echo "</form>";
}
else if($_SESSION['myusername'] == null){
echo "<form action='google-login.php?login=true' method='post' id ='form-id' data-ajax='false'>";
echo "<span class='loginreq'>Login to Edit</span>";
echo "<br/><input type='submit' value='Login with Google'/>";
echo "</form>";
}
}
if (isset($_POST['submit'])) {
$query = "UPDATE mybq_post_txt_main SET message=$message, tag=$tag WHERE id=$id ";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result)) {
echo "Your post has been edited to:";<br>
echo $row['message'];
echo $row['tag'];
}
mysql_free_result($result);
mysql_close();
}
?>
<a href='mybq-index.php'>Home</a>
</div>
</body>
</html>
Any help will be appreciated. (never mind the PHP SQL statements, I will convert them to PDO later).
$query="SELECT * from $tbl WHERE $id=id";
Should be
$query="SELECT * from $tbl WHERE id=$id";
(i.e. flip around the "id" to put the SQL column first and your PHP variable second)
Not sure if that will fix everything, but that was the first thing that jumped out at me.
I'm sure you at least want the login form to show up if not logged in yet. If so, change:
while($row = mysql_fetch_array($result)) {
...
}
To this:
$row = mysql_fetch_array($result);
...
//}
I'm assuming the query is only intended to return either 1 or 0 rows, so no need for loop anyway.
I have the closing braced rem'd out to clarify that it needs to be taken out of the operating code. You can just delete it.
The forms in your code are within the WHILE mysql_fetch_array loop, so when no user record is found neither form gets a chance to display.
Try moving session_start() to the top of your page? You generally want to call this before anything else is sent to the browser. Above the HTML tag, probably.
Here is the code that worked (The Full code below the snippet).
The initial bug was the line break ( <br> ) after the "your post has been edited to:" which was not properly formatted for php.
The other bugs were relating the $_GET variable properly, wrong table name, and wrong looping of the initial 'while' condition.
Thanks!

How to echo javascript code in php

I am having a problem with how to echo javascript in php. I have a form which on submit will execute itself and echo some text and will redirect to a page in 5secs. I am currently echoing this:
header("Refresh: 5;url=index2.php?ID=".$objResult["ID"]."");
echo '<html>';
echo '<head>';
echo '<title>Klant toevoegen</title>';
echo '<link rel="stylesheet" href="style.css" type="text/css" media="screen" />';
echo '</head>';
echo '<body>';
echo '<fieldset>';
echo ''.$Naam.' is added to the database, u will be redirected in a couple of seconds.<br><br>';
echo '</fieldset>';
echo '</body>';
echo '</html>';
The javascript I have is a countdown which counts down from 5 to 1. The code is this:
<script>
var countdownFrom = 5; // number of seconds
var countdownwin;
var stp;
function CountDownStart() {
stp = setInterval("CountDownTimer('CountDownTime')",1000)
}
function CountDownTimer(id)
{
if (countdownFrom==0) {clearInterval(stp); window.close(); }
else {
var x
var cntText = "Closing in "+countdownFrom+" seconds";
if (document.getElementById)
{
x = document.getElementById(id);
x.innerHTML = cntText; }
else if (document.all)
{
x = document.all[id];
x.innerHTML = cntText; }
}
countdownFrom--
}
</script>
<title>Untitled</title>
</head>
<body onload="CountDownStart()">
<Div id="CountDownTime"></div>
</body>
Now I would like to echo this countdown script to replace the <fieldset> in the html. I have tried several things like just add the whole code in 1 echo ''; and I tried to echo all the lines seperately but with both it crashes my whole script. If anyone knows how to do this it would be great!
I Wouldn't write all those echo's, instead, leave all the HTML and JS outside the PHP block
<?php
some php code
?>
HTML AND JS
<?php
More php if required
?>
And use
<?=$Naam?>
To inject your values where required
Alternatively you should look into template engines
Try to use
echo <<<EOT
/* some text here */
EOT;
You can put the script in a separate .js file and echo the script tag:
<? echo "<script type='text/javascript' src='path/to/script.js' ></script> ?>
Don't forget to remove any HTML tags from the JS file, like <body>, <head>, etc.

Categories