I have a index.php file where I have canvas game. This game is loaded from separate game.js file where I have variable: ballsCought. I want this wariable and name inputet to text input pass on click to another php file. my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple Canvas Game</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
function score(){
$('#score').fadeIn(1000);
$('#score').load("load_players.php");
};
setInterval(score , 1000);
var nam = $("#name").val();
$('#submit').keyup(function(e){
if(e.keyCode == 13){
$.post('upload_score.php','n=' +nam, 'score=' +ballsCought);
}
});
$('#submit').click(function(e){
$.post('upload_score.php','n=' +nam, 'score=' +ballsCought);
});
});
</script>
</head>
<script src="game.js"></script>
<body>
<canvas id="canvas" width="525" height="525"></canvas>
<br /><p><span id="points"></span><input type="text" id="name" placeholder="Name..."/><input type="submit" id="submit" value="Submit"/></p>
<br /><span id="score"></span>
</body>
</html>
But this post function is not working any idea? THank you...
Looks like your $.post method is not correct. If you want to pass data to the PHP page you need to use the JavaScript object notation like so:
$.post('upload_score.php', {n: nam, score: ballsCought});
You can read more about the various ways to call $.post from the jQuery Docs page
Now there could still be problems with your PHP page. You should use something like Firebug to see the Ajax request and any errors that might be returned.
Related
emphasized texti need help creating an onclick() function for an tag, that when it is activated it writes to 3 different rows in an MSSQL DB.
Im trying to figure it out, but my knowledge is not that great, i know i might have to use AJAX for this work.
Using MSSQL 2017, PHP 7.1
MY end result is to create a Click counter, the name of the section clicked and the date/time it was clicked.
IF anyone can help me, i appreciated very much.
Thank you.
Thanks for the guidance!!!
Edit
test.php
$counterServer = "TEST\TEST";
$counterconnection = array( "Database"=>"TestingCounters","UID"=>"User","PWD"=>"1234","CharacterSet"=>"UTF-8");
$finalcon = sqlsrv_connect( $counterServer, $counterconnection);
if( !$finalcon ) {
die( print_r( sqlsrv_errors(), true));
}
$sequel = "INSERT INTO dbo.CounterTest(Visit,Date_Value,Section)
VALUES('1',getdate(),'Kitchen')";
and my dumb logic , but i later realized i dont need to use a button but an anchor.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button action="test.php" method="post">click</button>
</body>
</html>
Final Working Test HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script type="text/javascript">
function ctest(){
$(document).ready(function () {
$.post('test.php', // url
{ Section: 'something.' });
});
}
</script>
</head>
<body>
<h1> jQuery post() method demo
</h1>
click me
<p>
</p>
</body>
</html>
Use Jquery library for Ajax request then add the onclick event on the button to make the ajax request.
https://www.tutorialsteacher.com/jquery/jquery-post-method
You can see the example of ajax on this link. The url should be where your php script is to send the 3 different rows in an MSSQL DB.
It seems that this question has already been asked many times but none of the solution is working for me. I'm new to AJAX so maybe there are some basics that I've missed? Basically I just want to pass the content of an html paragraph to a PHP script and I don't want to use html form.
I have two files: tes.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#post").click(function(){
var getContent = $("#text").html();
$.ajax({
url:"tes.php",
type:"POST",
data:{text:getContent},
dataType:"html",
});
});
});
</script>
</head>
<body>
<p id="text" contenteditable="true">This is the content</p>
<button id="post">post 2</button>
</body>
</html>
and tes.php
<?php
if (isset($_POST['text'])) {
$content = $_POST['text'];
echo $content;
} else {
echo "no content";
}
?>
After I clicked the Post button, in the PHP file it returns
Notice: Undefined index: text in C:\xampp\htdocs\projects\lab\tes.php on line 3.
Where did it go wrong? Really need your help guys. Thanks!
can you try this
$(document).ready(function(){
$("#post").click(function(){
var getContent = $("#text").html();
$.ajax({
url:"tes.php",
type:"POST",
data:{text:getContent},
dataType:"html",
success:function(data) {
console.log(data)
}
});
});
});
and in the HTML (as reza suggested)
<button id="post">post 2</button>
then, open the developer console and see if you can see the response from the tes.php
change html
<button id="post2">post 2</button>
to
<button id="post">post 2</button>
You have a click event and that sends an AJAX request so far, so good. You have
target="_blank"
which makes sure the page is opened in another tab/window. As far as I understood, you only want to send the request, so you need to prevent default:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#post").click(function(e){
e.preventDefault();
var getContent = $("#text").html();
$.ajax({
url:"tes.php",
type:"POST",
data:{text:getContent}
});
});
});
</script>
</head>
<body>
<p id="text" contenteditable="true">This is the content</p>
<button id="post">post 2</button>
</body>
</html>
The new tab/window will give you the error, since an expected parameter is not there, so don't open it.
I am new in jQuery and need help to figure out why $.get does not reply.
Let me explain what I have: There is a main index.php as follows:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8"> </head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/reqhan.js"> </script>
<input id="string" type="text" />
<input id="button" type= "button" value="Go" />
<div id="div"></div>
</body>
</html>
the js/reqhan.js contains
$(document).ready(function(e) {
alert('1');
$('#button').click(function() {
$.get('php/reverse.php',{input: string},function(data){alert('2');});
$('#div').text(data);
alert('3');
});
});
and reverse.php contains a simple code (I pasted here but does not preview it) that gets the text from reqhan.js file and returns an echo message.
when running the code on Google Chrome, the first alert is shown but not the rest and of course the `$('#div').text(data);' doesn't send back the data to the js file.
Please let me know if further info is required.
many thanks.
You're closing your callback function before you do anything with the data
Try this instead:
$(document).ready(function(e) {
alert('1');
$('#button').click(function() {
$.get('php/reverse.php',{input: string},function(data){
alert('2');
$('#div').text(data);
alert('3');
});
});
});
Try to format your code so that each pair of brackets gets its own indentation. It should help catch small things like this.
I was following a tutorial to understand how AJAX/PHP works but i'm having an issue.
Let me start with the code.
escalationTest.php:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form>
<input type="text" id="name" placeholder="Enter Name.." /> <br>
<input type="text" id="age" placeholder="Enter Name.." />
<input type="button" value="Submit" onClick="post();" />
</form>
<div id="result"></div>
<script type="text/javascript">
function post()
{
var name= $('#name').val();
var age= $('#age').val();
$.post('escalation.php',{postname:name,postage:age},
function(data)
{
$('#result').html(data);
});
}
</script>
</body>
</html>
escalation.php:
<?php
echo "working";
?>
I've typed the code exactly how its in the tut. From its output when i click the submit button i should "working" in the result div which is not happening.
What am i doing wrong here..?
Thanks.
<script type="text/javascript" src="jquery.min.js"></script>
Download a version of jQuery and then link to it with this script tag.
While you can link to an online version, it's not ideal for eventual production use and you should definitely get a local copy.
add the folowing line to your head tag
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
This is a pretty simple fix - you're missing jQuery. Add the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
in your head element.
I have some php code that generates a random password. Next to a text box I have some text which says "click to Generate a random password".
What I am looking to achieve is when the text in double quotes above is clicked that the PHP code is run and the generated random password is then pasted into the text box which is beside the text above in double quotes.
How could do this? I am thinking maybe jQuery but not sure how I would do what I want above.
Here you are... complete and working example :)
Put files 'index.html' and 'passgenerator.php' into same directory.
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#generate').click(function(){
$.get('passgenerator.php', function(data) {
$('[name=password]').val(data);
});
})
});
</script>
</head>
<body>
<form action="">
<input type="text" name="password">
<input type="button" id="generate" value="Generate password">
</form>
</body>
</html>
passgenerator.php
<?php
echo sha1(uniqid());
?>
either use ajax to call the script page that generates the password or like col. shrapnel says port the generating function to javascript (which is a better idea)
Example (with jquery using ajax)
$.get("/PasswordGenerator.php",function(password)
{
$("#TextboxID").val( password );
});
where TextboxID is the id of the textbox u want the password to be added to.
Don't do it in php. Just do it in javascript. Here is a very neat tutorial that should show you the step by step instructions:
http://www.mediacollege.com/internet/javascript/number/random.html
Patrick Evans is right. You can setup your form like this :
<input type="button" value="Generate" onclick="generate();">
And in section you have to define a function
<script type="text/javascript">
function generate(){
$.get("/PasswordGenerator.php",function(password)
{
$("#TextboxID").val( password );
});
}
</script>
Try this ajax call to get the content using ajax and display it on the div.
$("#generate").click(function(){
$.get('url:to:urPHP',{
data:urData
},function(data){
$("#generatedPassword").html(data);
});
});
<input type="" id="generate" value="click to Generate a random password" />
<div id="generatedPassword">
<div>