JS script function not working in php - javascript

Here is my JS function:
function checkError() {
var field = 'error';
var url = window.location.href;
document.write('test');
window.alert('please work');
if(url.indexOf('?' + field + '=') != -1)
document.write('The username and password do not match. Do not use your full email.');
return true;
}
and then in my body paragraph I have:
<?php echo '<script> checkError();</script>' ?>
It doesn't have any errors calling it. But the function does nothing on my page. Any thoughts? I've tried putting the JS script in the page and in a JS file and correctly called for its inclusion.
Full script:
<html>
<head>
<meta charset="UTF-8">
<title>Secure Login</title>
<script type="text/JavaScript" src="js/functions.js"></script>
<link href="stylesheets/mainStyle.css" rel="stylesheet" type="text/css">
<link href="stylesheets/formStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php include('header.php'); ?>
<div id="mainContent">
<h1>Member Login</h1>
<div id="mainParaText">
<?php echo '<script> checkError();</script>' ?>
</div>
</body>
</html>
TURNS OUT JS Function is UNDEFINED. Ugh, can't figure out why (thought I fixed this problem a while back lol)

try like this:
<html>
<head>
<meta charset="UTF-8">
<title>Secure Login</title>
<script type="text/JavaScript" src="js/functions.js"></script>
<link href="stylesheets/mainStyle.css" rel="stylesheet" type="text/css">
<link href="stylesheets/formStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function checkError(){
var field = 'error';
var url = window.location.href;
document.write('test');
window.alert('please work');
if(url.indexOf('?' + field + '=') != -1)
document.write('The username and password do not match. Do not use your full email.');
return true;
}
<?php
echo "checkError();";
?>
</script>
</head>
<body>
<?php include('header.php'); ?>
<div id="mainContent">
<h1>Member Login</h1>
<div id="mainParaText">
<?php echo '<script> checkError();</script>' ?>
</div>
</body>
</html>

JS is client side and PHP is server side.
That means that everything in PHP code will be processed on server and then "echoed" to your browser where you get undefined error.
When debugging this you should always check source code in the browser first so you see exactly what your server echoed.
I'm guessing a bit but try with double quotes instead of single.
And not related to the question ...
You are checking username and password with JS? How exactly will you do this? With ajax call back to the server? If you check with JS that means password should be in the source code somewhere and that is NOT secure. Username / pass validation should always be made on serverside (either with ajax request or usual submit form).

Related

pop up message on success full submit

i am creating a blog posting page for practice.
1) i want a pop up window 'javascript' on success full data submitting to phpmyadmin.
2) same on failure a popup window.
3)where exactly we should close the mysqli connection mysqli_close(); in a isset codding.
i have tried all onclick, onsubmit, two function on one onclick but all in vain
reasons: two javascripts function were not working on one button.
while onsubmit code typed the popup window appears but data does not success fully submits to phpmyadmin.
<html>
<head>
<title>
</title>
</head>
<link href="blogsup-main.css" type="text/css" rel="stylesheet"/>
<link href="blogsup.css" type="text/css" rel="stylesheet"/>
<body onload="refresh();">
<center>
<form method="post">
Name
Category
<option>Education</option>
<option>Society</option>
<option>Politics</option>
<option>Business</option>
<option>IT</option>
<option>Book</option>
<option>Other</option>
Heading
Sub heading *optional
Blog
*Send Email
</form>
</center>
<div id="popupdiv" class="popup-area">
<div class="popup-content">
<span class="close">×</span>
<center>
Blog Created Success Fully!pending approval.
Proceed
</center>
</div>
</div>
</body>
</html>
<?php
$user='root';
$password='';
$db='blogsup';
$con=mysqli_connect('localhost',$user,$password,$db);
mysqli_select_db($con,$db);
if(isset($_POST['submit'])){
$bloggername=$_POST['bloggername'];
$category=$_POST['category'];
$heading=$_POST['heading'];
$subheading=$_POST['subheading'];
$textarea=$_POST['textarea'];
$que="insert into blogposting (bloggername,category,heading,subheading,blogdate,blog) values ('$bloggername','$category','$heading ','$subheading', now(),'$textarea')";
$run=mysqli_query($con,$que);
if($run){
echo '<script type="text/javascript">
var popupdiv = document.getElementById("popupdiv");
popupdiv.style.display = "block";
return false;
</script>';
} else{
echo"Failed";
}
}
mysqli_close($con);
?>
<script type="text/javascript">
var nametextbox = document.getElementById('nametextbox');
var heading= document.getElementById('heading');
var blog = document.getElementById('blog');
var span = document.getElementsByClassName('close')[0];
function refresh(){
nametextbox.value='';
heading.value='';
subheading.value='';
blog.value='';
}
span.onclick = function() {
popupdiv.style.display = "none";
nametextbox.value='';
heading.value='';
subheading.value='';
blog.value='';
message.innerHTML = '';
}
</script>
When you submit a form there is no success or failure.You shouldn't add php and html and js code in the same page.Add the php code to php file which will be your action
e.g
<form action="anyfile.php" method="post">
In the php file add your business logic, like connect to db, execute queries and close the db connection.when the insert query is executed without errors then send a redirect back (yourMainPage?message='ok') to show a successful message like
<?php if(isset($_GET('message') == 'ok'){ ?>
<p>Data successfully inserted</p>
<?php } ?>
Also, your code should be more tidy. Hope i helped.

Jquery is not working on html echoed by php

I echo my html in the body using php.
Like this:
<body>
<?php
echo " <button type=\"button\" id=\"button\">Click Me!</button> ";
?>
</body>
In this html I have a button with the id set to button. Then, in Jquery,I have this code:
$(document).ready(function(){
$("#button").click(function(){
alert("It works");
});
});
However, It works is not getting printed. What should I do?
It also depends on where your Javascript Code is located within the DOM and also if you have jQuery included in the page in question.
Something like this could hopefully work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<title>Demo</title>
</head>
<body>
<div class="container">
<?php
echo " <button type=\"button\" id=\"button\">Click Me!</button> ";
?>
</div>
<script type="text/javascript">
(function ($) {
$(document).ready(function(){
$("#button").on("click", function(e){
alert("It works");
});
});
})(jQuery);
</script>
</body>
</html>
Please note that the above Snippet is assumed to live inside a PHP File (index.php - for example).

Send JSON data from one page and receive dynamically from another page using AJAX when both page are open

I am trying to send JSON data from page1 on submit button click and try to receive this data dynamically from page2 using AJAX and print the data in console. I don't know the proper syntax to do this. One suggested code which is not appropriate. The code is given:
page1:
<?php
if(isset($_POST["submit"])){
$x = "ok";
echo json_encode($x);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>page1</title>
</head>
<body>
<p>This is page is sending json data on submit button press</p>
<form method="post">
<input type="submit" name="submit">
</form>
</body>
</html>
page2:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</head>
<body>
<p>Get json data from page1 dynamically using ajax</p>
<script>
setInterval(checkVariableValue, 5000);
function checkVariableValue() {
$.ajax({
method: 'POST',
url: 'page1.php',
datatype: 'json',
success: function(data) {
console.log(data);
}
});
}
</script>
</body>
</html>
What should I write to make it works properly?
You can do like this
session_start();
if($_SERVER['REQUEST_METHOD']=='POST' && isset($_POST["submit"])){
$value = 'I am test'; //can be any value
$_SESSION['key'] = $value;
} else if($_SERVER['REQUEST_METHOD']=='POST')){
echo $_SESSION['key'];
}

Beginner AJAX search function

I am working on a instant search function, currently i am having trouble passing the variable from JS to PHP file. I am also unsure about what to do once i have the results from the query. Any help would be fantastic. This is my current standing.
ERROR
Undefined index: partialSearch in \php\search.php on line 4
test.php
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AJAX SEARCH</title>
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function search(partialSearch){
$.ajax({url:"PHP/search.php",data: partialSearch,success:function(result){
$("#results").html(result);
}});
};
</script>
</head>
<body>
<div class="container">
<div class="one-third column index">
<h3>Search Our Site</h3>
<p>Simply type into the search bar below the video, article you are looking for.</p>
<input type="text" name="partialSearch"onkeyup="search(this.value)"/>
<div id="results"></div>
</div>
</div>
</body>
</html>
search.php
<?php
include 'config.php';
$partialSearch = $_POST['partialSearch'];
$stmt = $mysqli->prepare("SELECT Name FROM videos WHERE Name LIKE ? ");
$stmt->bind_param('s',$partialSearch);
$stmt->execute();
$stmt->bind_result($Name);
while ($row = $stmt->fetch()) {
$searchResults[] = $Name;
echo "<div>".$searchResults."</div>";
}
?>
You should change
data: partialSearch
to
data: {partialSearch: partialSearch} // or {"partialSearch": partialSearch}, which is the same
Where partialSearch is the data's index name.
1.) You did not tell jQuery to post, e.g.
$.ajax({ type: "POST", ... });
You can also use the shorthand ".post" :
$.post{url:"PHP/search.php",data: partialSearch,success:function(result){ $("#results").html(result);
2.) The PHP thinks of a named POST variable. So your partialSearch must be an object like so
partialSearch = { partialSearch : "I AM your variable, NOT the object holding me !!!" }
By default, $.ajax calls sends a GET request, so your $_POST is not valid in your .php file, unless you specify a ..type:"POST".. variable in your $.ajax(.. settings.
Secondly, you need to change this:
$.ajax({url:"PHP/search.php",data: partialSearch,success:function(result){
to this:
$.ajax({url:"PHP/search.php",type:"POST",data:{partialSearch:partialSearch},success:function(result){
It's perfectly ok to pass an object of variables to send.

facebook share producing white / blank page with php and javascript

ok basically i am getting a white page when i try to use the facebook share buttons, both the new and the sharer.php version
i am trying to share a url like the following:
https://www.facebook.com/sharer/sharer.php?u=https://**.com/3e68ec7f58134f66d09a1c05c2783385/index.html
now the page loads fine if i paste in a new browser window, or even when i refresh the white / black page
here is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
overflow:hidden;
}
</style>
<link rel="stylesheet" href="onlinedojo/css/layout.css" type="text/css" media="screen" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="onlinedojo/js/hideshow.js" type="text/javascript"></script>
<script src="onlinedojo/js/jquery.tablesorter.min.js" type="text/javascript"> </script>
<script type="text/javascript" src="onlinedojo/js/jquery.equalHeight.js"></script>
<title>post</title>
</head>
<body>
<div id="fb-root"></div>
<script>
function postToFb(){
window.open('<?php echo $fburl ?>','1317220786706','width=400,height=400,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');
window.close();
return false;
}
</script>
<form class="submit_link" style="float:right">
<input type="submit" class="alt_btn" value="Share on Facebook" onclick="postToFb();" />
</form>
</body>
</html>
any help would be appreciated - this is driving me crazy!
You don't need a form or submit button here. so just remove form and button and put simple share link and try this
HTML:
<a href="javascript: void(0)" onClick="fbpopup('<?php echo urlencode($fburl); ?>')">
Share on Facebook
</a>
Javascript
<script>
function fbpopup(popwhat) {
window.open( popwhat, "fbshare", "height=380,width=660,resizable=0,toolbar=0,menubar=0,status=0,location=0,scrollbars=0" )
}
</script>
Well, yo try this
<script>
function postToFb(url) {
window.open(url, '_blank', 'width=530,height=460,left=' + (screen.availWidth / 2 - 250) + ',top=' + (screen.availHeight / 2 - 250) + '');
return false;
}
<?php
$title = urlencode('your title');
$summary = urlencode('your sumary');
$url_base = urlencode('url to share');
$url_image = urlencode('thumbnail url');
$url_to_share = "http://www.facebook.com/sharer/sharer.php?s=100&p[title]=$title&p[summary]=$summary&p[url]=$url_base&p[images][0]=$url_image";
?>
postToFb('<?php echo urlencode($url_to_share) ?>') {
</script>
I hope this help you.

Categories