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.
Related
Lately I've been experimenting with AJAX and jQuery. But somehow $.post method doesn't seem to work. Anybody got solutions?
Here's my code.
<html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
function send(){
$.post('t.php', {stuff:1}, function(data){
if(data == 'success'){
alert('works');
}
});
}
</script>
</head>
<body>
<div id="btn" onclick="send()">CLICK</div>
</body>
</html>
and my t.php:
<?php echo "success";?>
It works actually but you don't know that how to get response from php file properly
Change ajax code like below:
$.post('t.php', {stuff:1}, function(data){
if(data[0] == 's'){//changed here. data is an array not string
alert('works');
}
});
And in php
<?php echo "s";?>
I've searched on internet but I just can't seem to figure this out.
I got this Jquery function which I want to call in my php/html page. I'm an absolute noob when it comes to Jquery.
!function( $ ){
var Keyboard = function ( element, options ) {
this.$element = $(element)
this.options = options
if (this.options.display) {
this.$keyboard = $('<div class="keyboard"><input type="text" class="input-keyboard"></div>').appendTo('body')
} else {
this.$keyboard = $('<div class="keyboard"></div>').appendTo('body')
}
this.$biginput = this.$keyboard.find('.input-keyboard')
this.wait_timer = null
this.init()
this.listen()
}
}
How can I call this function in a div or button?
<body>
<button id="testKeyboard">Test open keyboard</button>
</body>
<script>
$(document).ready(function(){
$("#testKeyboard").keyboard();
});
</script>
Without knowing this plugin, i would say something like this:
$(document).ready(function(){
$("div, button").keyboard();
});
with ID:
$(document).ready(function(){
$("#button_id").keyboard();
});
your php/html file, needs also the jQuery Library in the head part...
For example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="yourKeybordPlugin.js"></script>
maybe an other version. It should be before the plugin script...
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="yourKeybordPlugin.js"></script>
</head>
<body>
<button id="testKeyboard">Test open keyboard</button>
<script>
$(document).ready(function(){
$("#testKeyboard").keyboard();
});
</script>
</body>
Call like this from your php file,
<script type = "text/javascript">
$(window).keyboard();
</script>
Check now on JSfiddle, included Jquery plugin and added that in head section from the option.
You can see the console.log firing.
http://jsfiddle.net/7ttq2gf0/2/
I am trying to run this simple Ajax Post example like:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("test.php",
{
name:"Hello Ajax"
},
function(data){
$("p").html(data);
}
);
});
});
</script>
</head>
<body>
<p></p>
</body>
</html>
and PHP (test.php) as:
<?php
$name = $_POST['name'];
echo '<a>'.$name.'</a>';
?>
No error message but not getting any result back! can you please let me know what I am doing wrong?
Just a simple change, added button element in your markup. Click it and it should work:
<body>
<button>Click Me</button>
<p></p>
</body>
Your javascript is looking for the button element on which when clicked, will trigger the ajaxcall in test.php
$("button").click(function(){
By clicking the button, it will display Hello Ajax, the echo from the test.php and the one that you've send.
$.post("test.php",
{
name:"Hello Ajax"
},
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 am looking for a way to get a response in a form of a javascript alert after a form has been submitted using a php script. I guess ajax should do this but Im not an Ajax guy yet. A simple sample code would help a lot. Thanks for reading
In your PHP code after successfully saving/processing data, write/echo the following inside <body> tag. This will show an alert when rendered on client's browser.
<script language="javascript" type="text/javascript" >
alert('This is what an alert message looks like.');
</script>
If you want to venture into ajax and jquery - grab a copy of the jquery core and then do something like the following:
(Now with a full example. You will also need jquery.form.js plug in)
<html>
<body>
<script type="text/Javascript" src="jquery-1.2.4.min.js"></script>
<script type="text/Javascript" src="jquery.form.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$("#SUBMIT_BUTTON").click(function()
{
var options = {
url: 'processForm.php',
success: function(){
alert('success');
},
error: function() {
alert('failure');
}};
$('#MYFORM').ajaxSubmit(options);
return false;
}
)});
</script>
<form id="MYFORM" method="post">
<input type="text" name="testing">
<input type="button" value="click me" id="SUBMIT_BUTTON">
</form>
</body>
</html>