Jquery Ajax isnt Posting - javascript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<div id="Main">
<script>
$('#Main').load('text.txt');
$.post('run.php','value=5');
</script>
</div>
</body>
</html>
'run.php' code
<?php
print_r($_POST);
echo $_POST['value'];
?>
text.txt loads but there is no value being posted in run.php and the variable is undefined also could someone post a working code of the above as an example

Just write the page you want to post data on like:
$.post( "run.php", { id: "55", age: "24" } );
this will post data on run.php
or you can do it with load method like:
$('#Main').load('text.txt?id=55&age=24');
with GET Method.

Related

Can i carry PHP variables over into an HTML or Javascript file

I'm new to PHP and am trying to create an Age Validation form that will limit access to specific content on a site if a user is under a certain age.
This is the HTML form (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="data.php" method="POST">
<input type="date" name="date" />
<input type="submit" name="submit" />
</form>
</body>
</html>
and this is the PHP script(data.php):
<?php //Age Validation Form
session_start();
if (isset($_POST['submit'])) { //Check if button clicked on form page
$date2=date("Y-m-d");//today's date
$date1=new DateTime($_REQUEST['date']); //user date
$date2=new DateTime($date2);
$interval = $date1->diff($date2); //check diff between dates
$myage= $interval->y; //resulting age
if ($myage >= 16){ //full access to website is granted
$_SESSION[$limited] = false;
header('Location: ../index.php');
}else{ //limited access is granted
$_SESSION[$limited] = true;
header('Location: ../index.php');
}
}else{ //if result page page is loaded without form submission
echo "Return to start page";
}
?>
<form action="index.html"> <!--Return to form page-->
<button type="submit">Return</button>
</form>
I would like to be able and carry the resulting $limited variable from the PHP file into this HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function myFunction () {
var access = <?php echo $limited ?>;
var txt = document.createElement('h1');
txt.innerHTML = access;
document.body.appendChild(txt);
}
myFunction();
</script>
</body>
</html>
This is currently just for testing to make sure it can carry over. I have tried the $_SESSION method but i can't seem to figure it out.
Any and all possible solutions welcomed.
Thank you
First, your HTML file must be parsed by the PHP interpreter so it must have the .php extension in order to access any session variable.
Here's an example with 3 files in the same directory based on your question:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="data.php" method="POST">
<input type="date" name="date" />
<input type="submit" name="submit" />
</form>
</body>
</html>
data.php:
<?php //Age Validation Form
session_start();
if (isset($_POST['submit'])) { //Check if button clicked on form page
$date2=date("Y-m-d");//today's date
$date1=new DateTime($_REQUEST['date']); //user date
$date2=new DateTime($date2);
$interval = $date1->diff($date2); //check diff between dates
$myage= $interval->y; //resulting age
if ($myage >= 16){ //full access to website is granted
$_SESSION['limited'] = false;
header('Location: new.php');
}else{ //limited access is granted
$_SESSION['limited'] = true;
header('Location: new.php');
}
}else{ //if result page page is loaded without form submission
echo "Return to start page";
}
?>
<form action="index.html"> <!--Return to form page-->
<button type="submit">Return</button>
</form>
new.php(the new page, where you access your session variable)
<?php
session_start();
$limited = $_SESSION['limited'] ?? true;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function myFunction () {
var access = <?php echo $limited ? "true" : "false" ?>;
var txt = document.createElement('h1');
txt.innerHTML = access;
document.body.appendChild(txt);
}
myFunction();
</script>
</body>
</html>
You're using $limited as a key in the $_SESSION array. What's in $limited ?
I'm pretty sure that if you reassign the correct value to $limited, you can access the value in $_SESSION with this:
<?php $limited = 'MyAwesomeKey'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function myFunction () {
var access = <?php echo $_SESSION[$limited] ?>;
var txt = document.createElement('h1');
txt.innerHTML = access;
document.body.appendChild(txt);
}
myFunction();
</script>
</body>
</html>

HTML Tags showing up in browser when using CKEditor with ExpressJS

Here's my app.js file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="/css/style.css" rel="stylesheet" type="text/css">
<script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>
<title>Jo Blog</title>
</head>
<body>
{{{body}}}
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
// CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
CKEDITOR.replace('content', {
plugins: 'wysiwygarea , toolbar, basicstyles, link',
enterMode: CKEDITOR.ENTER_BR,
autoparagraph: false,
uiColor: '#AADC6E',
removePlugins: 'elementspath'
});
</script>
</body>
</html>
and here is the form I'm wanting it to affect - new.handlebars
<h1>New Blog</h1>
<form method="post" action="/blog">
<label>Title</label><br>
<input type="text" name="title"/><br>
<label>Blog Content</label><br>
<textarea name="content" id="ckEdit"></textarea><br>
<input type="submit" name="submit">
</form>
Now the editor comes up just fine and I can write in it but when I hit submit the HTML tags are still all there eg "< p >Hello World< p >"
I've googled the crap out of this problem, and read everything I can find on here about it and tried everything I have read but nothing is working :/ Any ideas??
I got your code to submit the form content and title without displaying the html tags in the browser.
The file ckeditor.js is loaded twice from two sources, once in the head by a cdn and again in the body. It's possible they are conflicting. I commented out the scripts in the body, and kept the cdn.ckeditor[...]ckeditor.js script in the head.
For testing purposes I removed the handlebars {{{body}}} and inserted the form directly into the html file.
I doubt the problem is in the form's action "/blog", but in order to see the returned result I changed the form's action to "form.php" (included below). The file form.php just sends the submitted content back to the browser. It does show the submitted content and title correctly displayed in the browser.
Here's "form.php" and the modified html files.
Hope this helps a little with trouble shooting.
form.php
<?php
$title = $_POST['title'];
$content = $_POST['content'];
print <<< PRINT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>$title</title>
</head>
<body>
$content
</body>
</html>
PRINT;
?>
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--<link href="/css/style.css" rel="stylesheet" type="text/css">-->
<script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>
<title>Jo Blog</title>
</head>
<body>
<!-- changed the form's action from /blog to form.php for demo purposes -->
<form method="post" action="form.php">
<label>Title</label><br>
<input type="text" name="title"/><br>
<label>Blog Content</label><br>
<textarea name="content" id="ckEdit"></textarea><br>
<input type="submit" name="submit">
</form>
<!--
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
-->
<script type="text/javascript">
// CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
CKEDITOR.replace('content', {
plugins: 'wysiwygarea , toolbar, basicstyles, link',
enterMode: CKEDITOR.ENTER_BR,
autoparagraph: false,
uiColor: '#AADC6E',
removePlugins: 'elementspath'
});
</script>
</body>
</html>

Google Script won't call CSS file

So I'm trying to get a program to call my stylesheet to format the HTML sidebar, but it's not loading properly. here is what I have
addTime.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet"
href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<?!= include('stylesheet') ?>
</head>
<body>
<form id="addTimeForm">
...there is more to the script, it's not needed though
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<?!= include('javascript') ?>
----------------------------------------------------------------
javascript.html
<!DOCTYPE html>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>
When I run the script, the <?!= include('stylesheet') ?> actually appears in the html box. Any ideas?

Explanation of windows.open on IE? Why does this work on chrome and not on IE?

I have a html page where an option is selected from dropdown, and button clicks opens a new page.
Here is index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<p><form name="edit" method="post">
<div>CHOOSE:</div>
<div><select name="Edi" id ="Edi" >
<option selected="selected">Select</option>
<option value="edit.php?table=Alpha">Adam</option>
<option value="edit.php?table=Beta">Brandon</option>
</select>
<input onclick="return Edit();" type="submit" value="Edit"/></div>
</form>
<script type="text/javascript">
function Edit()
{
if(document.forms['edit'].Edi.value == "Select")
{
alert("Please Select Edit Field");
return false;
}
else
{
window.open(Edi.value);
return true;
}
}
</script>
</body>
</html>
Here is edit.php:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
</head>
<body>
<?php
$Table = $_GET['table'];
echo $Table;
?>
</body>
</html>
The reason i have done it like this, because i want to add more options in index.html that will open a different page(not edit.php).
This code runs fine on Google Chrome, but not on IE. My initial guess was some sort of comptability issue(and it still might be).
But then i made this window.open(Edi.value); to this window.open("http://www.yahoo.com"); and it works on both Chrome and IE. Why? What is the reason that edit.php page wont open for IE 10?

Javascript generated HTML not working

The console doesn't give any error, and the window displays nothing. What is wrong with it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body>
<div id="stuff" onload="stuffify()"></div>
</body>
</html>
The onload function will work when on the body tag of your document.
Also, the condition of your for loop is incorrect, it should be:
for(var a=6; a >= 0; a--)
try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body onload="stuffify();">
<div id="stuff" ></div>
</body>
</html>
onload is supported by following tags:
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
This explains why stuffify is not triggered after your div is loaded.
So, you can bind the onload function to body instead of div, or insert script after div, like this:
<div id="stuff" ></div>
<script type="text/javascript">
stuffify();
</script>

Categories