I want to have a success message in the modal directly below, on the same page without redirecting to a new page.
so I did this but it does not work why?
HTML code
<html>
<head>
<meta charset="UTF-8">
<title>essai</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form form id="form1">
donnee1:<input type="text" name="donnee1"/>
<input type="submit" vatue="envoyer">
</form>
The result of the success message rendered inside this div
<div id="result"></div>
<script>
$(document).ready(function() {
$("#form1").submit(function(event) {
event.preventDefault();
$("#result").html('');
var values = $(this).serialize();
var ajaxRequest= $.ajax({
url: "php.php",
type: "post",
data: values
});
ajaxRequest.done(function (response, textStatus, jqXHR){
$("#result").html('Submitted successfully');
});
ajaxRequest.fail(function (){
$("#result").html('There is error while submit');
});
});
</script>
Related
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<span id="response">
</span>
<script>
$(document).ready(function () {
$("#open-comm").click(function () {
$.ajax({
url: "http://en.wikilistia.com/fetch_comments.php",
type: "POST",
SUCCESS: function (responsedata) {
$("#response").html(responsedata);
alert("sucess");
}
});
});
});
</script>
</body>
</html>
Not Receiving responsedata from php page. In the browser php file showing data but through ajax not showing anything.
What's the problem with PHP or Jquery code. I am trying first time this.
Here you go with a solution
$(document).ready(function () {
$("#open-comm").click(function () {
$.ajax({
url: "http://en.wikilistia.com/fetch_comments.php",
type: "POST",
success: function (responsedata) {
$("#response").html(responsedata);
alert("sucess");
},
error: function(error) {
console.log(error);
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<head>
<title>Page Title</title>
</head>
<body>
<span id="response"></span>
</body>
It's a typo SUCCESS should be success
When I have many buttons 1 page, how do I identify different buttons that make different AJAX requests? See code/script below (button1 to switch_on.php, button2 to switch_off.php). How do I link the specific button to a specific function within 1 page?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Update MySQL</h2></div>
<button switch-ONid=“1” class="loadButton">Switch ON</button>
<button switch-OFFid=“0” class="loadButton">Switch OFF</button>
</body>
</html>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url: "switch_on.php",
success: function(result){
$("#div1").html(result);
}
});
});
});
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url: "switch_off.php",
success: function(result){
$("#div1").html(result);
}
});
});
});
</script>
You can simply set id for them :
<button id="btnOn" class="loadButton">Switch ON</button>
<button id="btnOff" class="loadButton">Switch OFF</button>
Your javascript :
<script>
$(document).ready(function(){
$("#btnOn").click(function(){
$.ajax({
url: "switch_on.php",
success: function(result){
$("#div1").html(result);
}
});
});
$("#btnOff").click(function(){
$.ajax({
url: "switch_off.php",
success: function(result){
$("#div1").html(result);
}
});
});
});
</script>
I have a file called try.php where there is code below having all javascript, PHP and html file in itself.
<?php
if(isset($_POST["submit"])){
echo "hello";
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Submit Form Using AJAX and jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<form method="POST" id="myForm">
<input name="name" type="text" placeholder="Your Name">
<input name="email" type="text" placeholder="email">
<input name="submit" type="submit" value="Submit">
<div id="display"></div>
</form>
<script>
$(document).ready(function(){
$("#myForm").submit(function(event) {
event.preventDefault(); //prevent default action
window.history.back();
var form_Data = $(this).serialize();
$.ajax({
type: "POST",
url: "try.php",
data: form_data,
cache: false,
success:function(response){
alert(response);
}
});
});
});
</script>
</body>
</html>
The target of above code is just to submit form without reloading the page simply using AJAX and the form data should be handled by php here just echo "hello". The above code works fine it submits and php handles all properly but page is reloading. What should be the change in code?
Try this as javascript code
$(document).ready(function(){
$("#myForm").click(function(event) {
event.preventDefault(); //prevent default action
var form_Data = $(this).serialize();
$.ajax({
type: "POST",
url: "try.php",
data: form_Data,
cache: false,
success:function(){
alert("hello");
}
});
});
});
I am trying to insert a name into my database. There is a form asking to enter name.There is also a submit button.on clicking the submit button no alert is show.I am new to ajax.
this is index.php.
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#submit").submit(function() {
var name = $('#name').val();
$.ajax({
type: "POST",
url: "ajax.php",
data: "name=" + name,
success: function() {
alert("sucess");
}
});
});
});
</script>
</head>
<body>
<form action="" method="post">
Name:
<input type="text" name="name" id="name" />
<br />
<input type="submit" name="submit" id="submit" />
</form>
</body>
</html>
This is ajax.php
<html>
<body>
<?php
$query=mysql_connect("localhost","root","root");
mysql_select_db("freeze",$query);
$name='l';//$_POST['name'];
mysql_query("insert into tt values('','$name')");
?>
</body>
</html>
Be careful with url's in ajax. Your url is 'ajax.php', this is a relative url, so, if your page is at url http://localhost.com/index.html (for example), ajax will fire a post to http://localhost.com/index.html/ajax.php (and that's probably wrong). Try use absolute url, for that, add '/' at begin of url, then ajax will be fired against http://localhost.com/ajax.php.
Your ajax code should look like code below:
$(document).ready(function() {
$("#submit").submit(function() {
var name = $('#name').val();
$.ajax({
type: "POST",
url: "/ajax.php",
data: "name=" + name,
success: function() {
alert("sucess");
}
});
});
});
The submit event is triggered on the form, not the submit button. So
$("#submit").submit(function() {
will not ever be triggered, because #submit selects the button, not the form. You need to give an ID to the form:
<form id="myform">
then use
$("#myform").submit(function() {
You also need to use event.preventDefault() or return null in the event handler, to prevent the form from being submitted normally when the function returns.
This question already has answers here:
jQuery Ajax POST example with PHP
(17 answers)
Closed 7 years ago.
To make this understandable I made an sample code because my actual code is much bigger.
Basically what I want to accomplish is to run my PHP script that edits an XML file using ajax. This is because I need to do this inside a javascript in my real project.
This is what I have so far:
the .php file containing the ajax function:
<!DOCTYPE html>
<html>
<head>
<script>
function editXMLDoc()
{
$.ajax({
url: "sensors.php",
context: document.body
}).done(function() {
$( this ).addClass( "done" );
});
}
</script>
</head>
<body>
<button type="button" onclick="editXMLDoc()">Endre XML</button>
</body>
</html>
And here is the php script writing to xml:
<?php
include 'sensor.php';
$b=new sensor();
$arr=$b->load('sensor.xml');
for($i=0,$ms=count($arr);$i<$ms;$i++)
{
if($arr[$i]['fields']['status']=='1')
{
$arr[$i]['fields']['status']='0';
}else{
$arr[$i]['fields']['status']='1';
}
}
echo "Completed<br/>";
//3. save array to xml
$b->save('sensor.xml',$arr);
?>
I know the script is working so I am pretty sure the prob is the connection between the ajax function and the php script.
Can anyone help me out?
Try this code... actually you did not attached jQuery library.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
var resp = $("#response");
$.ajax({
type: "POST", // Method type GET/POST
url: "sensors.php", //Ajax Action url
data: {},
// Before call ajax you can do activity like please wait message
beforeSend: function(xhr){
resp.html("Please wait...");
},
//Will call if method not exists or any error inside php file
error: function(qXHR, textStatus, errorThrow){
resp.html("There are an error");
},
success: function(data, textStatus, jqXHR){
resp.html(data);
}
});
});
</script>
</head>
<body>
<div id="response"></div>
</body>
</html>
Use AJAX like this:
<script type="text/javascript">
jQuery(document).ready(function($){
$('.rt11').click(function(){
$.ajax({
type: "POST", // Method type GET/POST
url: "sensors.php", //Ajax Action url
data: {yourKey: "yourValue", yourKey1: "another value"},
// Before call ajax you can do activity like please wait message
beforeSend: function(xhr){
console.log("Please wait...");
},
//Will call if method not exists or any error inside php file
error: function(qXHR, textStatus, errorThrow){
console.log("There are an error");
},
success: function(data, textStatus, jqXHR){
console.log(data);
}
});
});
});
</script>
I think there is no problem in code but sometime in large code the min.js file did not include properly. please try the below code. there is no need to change sensors.php file.
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
$('.rt11').click(function(){
$.ajax({
url: "sensors.php",
context: document.body
}).done(function(html) {
$( this ).addClass( "done" );
});
});
});
</script>
</head>
<body>
<button type="button" class="rt11">Endre XML</button>
</body>
</html>
HTML:
<button type="button" id="idButton">Endre XML</button>
JS:
$("#idButton").click(function(){
$.ajax({
url: 'sensors.php',
dataType: "xml", //if it returns a xml file
success: function (data) {
// everything is ok
alert(data)
},
error: function (xhr, status, error) {
// Something went wrong
if (xhr.status > 0) alert('Error: ' + status);
}
});
})
Try this i think you missed to include the jQuery library file.Get post data to your php file after ajax call.
<!DOCTYPE html>
<html>
<head>
//include the jQuery library file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function editXMLDoc()
{
var myvalue='123';
$.ajax({
url: "sensors.php",
context: document.body,
data: {myvalue:myvalue},
}).done(function() {
$( this ).addClass( "done" );
});
}
</script>
</head>
<body>
<button type="button" onclick="editXMLDoc()">Endre XML</button>
</body>
</html>