Include a PHP variable in load script - javascript

My apologize in advance for my (maybe) stupid question but my knowledge of Javascript/JQuery is almost 0
I have in index.html the following script:
index.html
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#MyDIV")
.load("buttons.php")
});
</script>
<div id="MyDIV"></div>
As you can see, the idea is load buttons.php in a div tag in index.html - That works fine -
buttons.php
<div id="buttom">
<div id="botton5"><img src="5.png" id="5"/></div>
</div>
<script>
$('#botton5').click(function(event){
$("#bottons").load('somepage.php?answer=5'); //here!
});
</script>
Thats also works fine and I receive the information from somepage.php in MyDIV in index.html
but does not work when I include a php in the URL in the line
$("#bottons").load('somepage.php?answer=5&title=<?php echo $title;?>&date=<?php echo $date;?>'); //here!
Including a PHP in load, the div does not load in index.html, can you please support me on how to add a php in the URL in load?
Thanks in advance for your support

#Luis Gerardo Runge In JavaScript you can't use PHP but logically you can take your value in hidden field and use in javascript. i have add some sample code my be it's help you
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<div id="buttom">
<div id="botton5"><img src="5.png" id="5"/></div>
</div>
<div id="bottons">
</div>
<?php
$title = 'your title';
$date = 'yourdate';
?>
<input type="hidden" id="title" name="title" value="<?php echo urlencode($title); ?>">
<input type="hidden" id="date" name="date" value="<?php echo urlencode($date); ?>">
<script>
$('#botton5').click(function(event){
alert('call');
$("#bottons").load('json.php?answer=5&title='+$('#title').val()+'&date='+$('#date').val()+''); //here!
});
</script>
FYI: You need to use urlencode and urldecode for pass parameter through the URL

Related

self submit form acces variables javascript

I'm making a site for some peaple of my class and I want them to be able to login. I don't want to make an extra loginpage, so I created this bit of code for my login system, but it doesn't work. I looked al over the internet to find other soloutions, but with no success... I want the person to type in their username and password and I want to store that information in a javascript function, so that I can do a function like tis:
function passCheck () {
if (pass="johndohpassword1234") // userbname johndoe and passsword password1234
{
document.getElementById('h').innerHTML= "welcome, John!";
}
this is my code:
<?php
$id = $_POST[username] . $_POST[password];
?>
<html>
<head>
<title>Login</title>
<script type="text/javascript" src="script.js">
var pass=" <?php echo "$id"; ?>";
window.alert( "welkom, " + pass );
</script>
</head>
<body>
<h1 id="h">Login</h1> <br>
<form action="http://timkast.tk" method="post">
<b>Username:</b><input type="text" name="username"> <br>
<b>Password:</b><input type="password" name="password"><br>
<input type="submit"></input>
</form>
</body>
</html>
everything works fine, but the code for window.alert does nothing and I dont know why, please can someone explain/fix this?
When you specify a src for the script tag, it ignores the contents of the script tag.
As specified in the documentation:
If a script element has a src attribute specified, it should not have a script embedded inside its tags.
You can't write code into a <script> tag with reference to external file <script src="...">.
You have:
<script type="text/javascript" src="script.js">
var pass=" <?php echo "$id"; ?>";
window.alert( "welkom, " + pass );
</script>
And you need:
<script type="text/javascript" src="script.js"></script>
<script>
var pass=" <?php echo "$id"; ?>";
window.alert( "welkom, " + pass );
</script>

HTML input to php and then back to input

So, I tried everything that I know and I tried to find everywhere but no luck. I want to paste imdb link into (id="id_imdb") and then when I press button (name="b") I want that link to become variable $hjo and then to execute php script get_info_imdb.php and then return variable $slbl into javascript which will set textarea (name="movie_desc") to echo $slbl.
insert-movie.php
<html>
<body>
<?php
global $hjo;
$hjo = "http://www.imdb.com/title/tt1431045/";
include ("get_info_imdb.php");
?>
<form action="insert_movie.php" method="post" enctype="multipart/form-data">
<div>
<div>
<div>Description:</div>
<div><textarea name="movie_desc" rows="7" cols="50" id="id_desc" value="<?php echo (isset($slbl))?$slbl:'';?>"></textarea></div>
</div>
<div>
<div>Imdb:</div>
<div><input id="id_imdb" type="text" name="movie_imdb" size="50">
<button name="b" type="button">Button</button></div>
</div>
<div>
<div><input type="submit" name="submit" value="Publish"></div>
</div>
</form>
<script type="text/javascript">
function myFunction() {
document.getElementById("id_desc").value = "<?php echo $slbl; ?>";
}
</script>
</body>
</html>
<?php
...here is script to insert in database which is working...
?>
get_info_imdb.php
<?php
include ("simple_html_dom.php");
$html = new simple_html_dom();
$html->load_file($hjo);
$html = $html->find('.summary_text', 0);
$nesto = strip_tags($html);
$nesto = trim($nesto);
$slbl = $nesto;
?>
This is an example to explain how to perform your request through javascript and jQuery. It's only an example, you have to implement it wih your own code:
File get_info_imdb.php:
<?php
$movieID = $_GET['id'];
// Your code to retrieve movie info and chunk of HTML you want put in textarea
echo $TextAreaValue;
?>
Fle insert-movie.php:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<script type="text/JavaScript">
function getHTML()
{
$.get( "get_info_imdb.php?id=tt1431045", function( data ) {
$( "#myTextArea" ).html( data );
});
}
</script>
<form action="YourAction.php" method="YourMethod">
<textarea id="myTextArea"></textarea>
<button id="myButton" onclick="getHTML(); return false;">Click Me</button>
</form>
</body>
</html>
In the <head><script> I load jQuery; In javascript function getHTML() I use jQuery get method to retrieve desired url (I have insert movie id, you can insert variable id with php) and put it into the content of textarea #myTextArea.
In the <form> the <button id="myButton"> call getHTML() js function.
See more about jQuery
See more about jQuery.get method
See an alternative in javascript

JQuery POST data to php, direct to php, data not exist anymore in php

I passed along data via POST to php using JQuery, but when the page direct to the php file, the POST["createVal"] in php doesn't seem to exit after the call back. I showed this in demo below, notice that the $name is undefined when the callback result is clicked. Any idea how to fix this?
I'm trying to make a function that when the returned result was clicked, html page could redirect to the php page in which user input in html file could be printed out.
HTML file
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input type="text" id="userinput">
<div id="result">
</div>
</body>
<script>
$("input").keyup(function(){
var input=$("input").val();
$.post("process.php",{createVal:input},function(data){
$("#result").html("<a href='process.php'>"+data+"</a>");
})
})
</script>
</html>
php file(process.php)
<?php
if(isset($_POST["createVal"])){
$name=$_POST["createVal"];
echo $name;
}
?>
<?php
echo $name;
?>
change
$("#result").html("<a href='process.php'>"+data+"</a>");
to
$("#result").html("<a href='process.php?createVal="+data+"'>"+data+"</a>");
and
process.php
if(isset($_REQUEST["createVal"])){
$name=$_REQUEST["createVal"];
echo $name;
}
Use this Html Code:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>
<body>
<input type="text" id="userinput">
<div id="result"> </div>
</body>
<script>
$("input").keyup(function(){
var input=$("input").val();
$.ajax({
type: "POST",
url: "http://localhost/stackoverflow/process.php",
data: {'createVal': input},
success: function(data){
$("#result").html("<a href='http://localhost/stackoverflow/process.php?createVal="+data+"'>"+data+"</a>");
}
});
});
</script>
</html>
PHP Code:
<?php
if(!empty($_REQUEST['createVal']) || !empty($_GET['createVal'])){
$name = $_REQUEST['createVal'];
echo $name;
}elseif(!empty($_GET['createVal'])){
$name = $_GET['createVal'];
echo $name;
}
return 1;
?>
I have run and checked this too.
localhost: if you are running this code on localhost
stackoverflow: is the folder name, if you have any folder in localhost for it so replace the name by this.

How to use ACE editor to edit and save a file

I'm a dummy in HTML.
In my project, I want to use ACE editor to allow the user editing and saving a file.
I succeed to load the file, and to open it with ACE editor.
The problem is how to save it.
For this part, I need your help.
Here is the code I wrote to use ACE.
<?php
if(isset($_POST["save_modification"])){
$file = "./".$_POST["file_name"];
$file_ptr=fopen($file,"w");
fwrite($file_ptr,$_POST["content"]);
fclose($file_ptr);
}?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" type="text/css" href="./css/style.css" />
<title>Test</title>
</head>
<body>
<div class="site">
<div class="header">
<span>Test</span>
</div>
</div>
<div class="clean"></div>
<div class="corp">
<div class="corp_ctn">
<h1>Edit a file</h1>
<div id="content" class="paragraphe">
<?php
$dir=opendir("./");
while($file=readdir($dir)){
if(!in_array($file, array(".",".."))) {
echo '<div style="float:left; margin:0 10px; text-align:center;"><a href="?f='.$file.'">';
echo $file;
echo '</a></div>';
echo '<br/>';
}
}
?>
<br clear="all"/>
<?php
if(isset($_GET["f"])) {
echo "<h1>{$_GET["f"]}</h1>";
$file = "./".$_GET["f"];
$content = file_get_contents($file);
?>
<form method="POST" action="index_select_lua_script.php">
<div id="editor" name="content" style="width:100%;height:200px;">
<?php echo $content ?>
</div>
<script src="js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/lua");
editor.getSession().setTabSize(4);
editor.setHighlightActiveLine(true);
editor.resize();
</script>
<input type="hidden" name="file_name" value="<?php echo $_GET["f"] ?>" />
<input type="submit" name="save_modification" value="Save modification" />
</form>
<br/><br/>
<?php
}
?>
</div>
</div>
</div>
</div>
When I save my modification, using the save button, the content is empty.
Please, do you have an idea of how I can do it?
Thank you
The HTML5 Filesystem API handles tasks like this quite well now. There are a few ways of capturing the contents of the editor area, and once you've done that you can save it.
Look at something like:
http://www.codeproject.com/Articles/668351/HTML-File-API-Capability-and-Compatibility
http://blog.teamtreehouse.com/building-an-html5-text-editor-with-the-filesystem-apis
http://www.html5rocks.com/en/tutorials/file/filesystem/
Can't remember where, but you can ZIP files together using JS now as well, if you so wish.

Send data to served with Jquery ajax

I am learning jquery.ajax but I cant understand something
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
var cacat = $("#nam").val();
$("#stage").load('/jquery/result.php', {"name":cacat} );
alert(cacat);
});
});
</script>
</head>
<body>
<p>Enter your name and click on the button:</p>
<input type="input" id="nam" size="40" /><br />
<div id="stage" style="background-color:blue;">
STAGE
</div>
<input type="button" id="driver" value="Show Result" />
</body>
</html>
and here is the Php FIle
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
I don't understand what is this $("#stage").load('/jquery/result.php',{"name":cacat});
because it's also working with $("#stage").load('result.php', cacat );
So here comes the question:
What's the difference between {"name":cacat} and cacat? Also both scripts do the same thing, the jQuery gets the value of the input and the PHP also gets the value of the input, why so?
The difference is that the first one sends a JSON object which gets to $_REQUEST whereas the other one sends the value, without the JSON form.

Categories

Resources