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>
Related
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 beginner to ajax world and trying to call contents from php page using $.ajax() function and the code couldn't executed. the html page i used:
<!DOCTYPE html>
<html>
<head>
<title>AJAX</title>
</head>
<body>
<div >
<input type="text" name="search" id="search">
<br>
<br>
<h2 id="result"></h2>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
the JQuery code i used in the script.js:
$(document).ready(function() {
$('#search').keyup(function () {
var search = $('#search').val();
$.ajax({
url:'search.php',
//the page to which the request will go to
data:{search: search},
type: 'POST',
success:function(data) {
if(!data.error){
$('#result').html(data);//the h2 we want to echo it uing the ajax
}
}
});
});
});
the search.php page contain:
$search = $_POST['search'];
echo $search;
the code not executed. What should I do.
I see some issue in your response from PHP code and in ajax side success code.
You are not sending in response JSON format so data.error is meaningless.
so in your success callback code should be like this.
success:function(data) {
$('#result').html(data);//the h2 we want to echo it uing the ajax
}
Follow jQuery Ajax Document :
An alias for method. You should use type if you're using versions of jQuery prior to 1.9.0
type: 'POST'
But you are using 2.0 so i think this will work :
method: 'POST'
jQuery Documents
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´m trying to get typed text on ckeditor (textarea), but I have some trouble:
Here is my code:
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#editor').ckeditor();
var editor = $('#editor').ckeditorGet();
var data = $('#editor').val();
window.alert(data);
window.alert(CKEDITOR.instances['editor'].getData());
});
</script>
<body>
<form method="post">
<textarea name="editor" id="editor"></textarea>
<input type="submit" value="Submit">
</form>
The results on two alerts are empty. What i´m doing wrong?
That's because you are calling the alerts when the page loads. At that time, there is nothing yet on the textarea.
Bind the event to something that will happen after the textbox has something to show, for example, when you click the submit button:
$(document).ready(function(){
$('#editor').ckeditor();
$('input[type=submit]').on('click', function() {
window.alert($('#editor').val());
});
});
Also, you may want to bind the click event to the document instead, so it will happen even if you add new submits programatically. For that to happen, bind the event like this:
$(document).on('click', 'input[type=submit]', function() {
window.alert($('#editor').val());
});
I am new to using jquery and i have written the following code and it does not work and i am not able to figure out what the mistake is ..syntax might also be wrong.
It has 2 submit buttons while using button1 it should get info from the DB and display on the same page.i.e., get the title from the DB and display on the same page.
While second submit button is used to submit title into the DB and update it(written in script_2.php).
<form id="myForm" method="post">
id: <input type="text" name="search"/>
<input type="button" id="button1" value="Submit to script 1" />
<input type="button" id="button2" value="Submit to script 2" />
title:<input type="text" name="title"/>
</form>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$.post('script_1.php', { name: form.name.value },
function(output) {
$('#age').html(output).show();
}) ;
}) ;
$("#button2").click(function(){
$('form#myForm').attr({action: "script_2.php"});
$('form#myForm').submit();
});
});
</script>
</head>
Help appreciated.
You are missing the }); to close the $("#button1").click function:
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$.post('script_1.php', { name: form.name.value },function(output) {$('#age').html(output).show();});
});
$("#button2").click(function(){
$('form#myForm').attr({action: "script_2.php"});
$('form#myForm').submit();
});
});
</script>
You have too many closing
<script type="text/javascript" src="jquery.js"></script></script>
to
<script type="text/javascript" src="jquery.js"></script>
jQuerys attr() expects strings, not an object, like:
$('form#myForm').attr("action", "script_2.php");
You form is before your <head> tag. It should be after your </head> and in a <body> tag.
You are putting the results of your ajax call in an element with id age, but I don't see any element with that id on your page.
That's all for errors (that I see as of now), but you can also speed up your selecter here $('form#myForm') by changing it to $('#myForm') since id's are unique, and I doubt you have any element with the id myForm which isn't a form.