I have a PHP file that contains a form and which submits back to itself. Is there any way to show a loading animation after the form is submitted and run until the page is loaded?
If you want to show progress indicator while the form is submitting why dont you use AJAX?
$("form").submit(function(e) {
e.preventDefault();
$(".loading").show();//Assuming you have a container which has appropriate style and image to show the loading image
$.post( {
url: $(this).attr("action"),
data: $(this).serialize(),
success: function(){
$(".loading").show();
//Write code here to handle on success
}
});
});
This is trivial. Assuming you have a hidden spinner/loading image somewhere on your page with id 'loadingImg':
$("form").submit(function() {
$("#loadingImg").show();
});
Demo: http://jsfiddle.net/yFaAj/1/
Related
I am using the plugin formtomail to send emails. The problem that I am experiencing is that I do not want the page to refresh after submitting the form from the template which is called in the action of the form on the primary page. Does someone know how to do this that has worked with this plugin?
I think this might help a little:
first you need to edit the html page that has the form.
then add this script to it and adjust it properly.
// this is the id of the form
$("#idForm").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
});
I have two pages (checkout and order page).
The checkout page contains a confirme order button. If the button is clicked the order page loads the data without a page refresh.
How can i do that. Please click me.
You can use an ajax call to get HTML from 'data.php' (or wherever you are getting your data from) and print that HTML into a div in checkout page.
$.ajax({
url: "data.php"
}).complete(function(result) {
$( div ).html(result);
});
Something similar to this.
For more on Ajax - http://api.jquery.com/jquery.ajax/
First take a simple button and call a jquery function onclick-
echo 'Click to change';
Jquery
<script type="text/javascript">
$(function() { // wrap inside the jquery ready() function
//Attach an onclick handler
$('#button').click(function(){
//Get the ID of the button that was clicked on (addition if you want any specific data, just pass that id in place of button)
var specific_id = $(this).attr("id");
$.ajax({
url: "yourPHP_data.php", //This is the page where you will handle your SQL insert
type: "POST",
data: "data=" + specific_id, //The data your sending to yourPHP_data.php
success: function(){
console.log("AJAX request was successfull");
},
error:function(){
console.log("AJAX request was a failure");
}
});
});
});
</script>
yourPHP_data.php page contain your code that you want to load and display, and you also find that data you have passed-
$data = $_POST['data'];
I am trying to get a div to reload once a checkbox has been selected or unselected and the form has been submitted. I have used AJAX and can get the form to submit on change, which works no problem. However the page has to reload to display new data.
I have built the php in such a way that it doesn't need to refresh the page or fetch a new page. If the div and it's content refreshes that should be sufficient to display the new filtered data.
Below is what I have written so far
$(document).ready(function() {
$("input:checkbox").change( function() {
$.ajax({
type: "POST",
url: "index.php?action=resortFilter",
data: $("#locationFilter").serialize(),
success: function(data) {
$('.resorts').html(data);
}
});
})
});
What do I need to do to get the div to reload after the request has been made?
I use class methods to handle the processing which return only the array of data. The requests are made to the class from a php function.
What I'm trying to do isn't actually possible to because PHP is a server side language. The best bet is to create a new intermediate file that can handle the display of the data so that it can be brought in through a normal AJAX request and get the new display from it
Where is the Ajax request? You are submitting your form through HTML/Browser. You need to use the following code:
$(document).ready(function() {
$("input:checkbox").change( function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#locationFilter").serialize(), // serializes the form's elements.
success: function(data)
{
$('.resorts').html(data);
}
});
})
});
Source: jQuery AJAX submit form
this sample loading code maybe help you
<div id="loadhere"></div>
$('div#loadhere').load('ajaxdata.php',{datatosend:whatyouwantforexamplehelloworld});
I've this script:
<script>
$(document).ready(function() {
$('#signUpForm').submit(function() {
$.ajax({
type: 'POST',
url: "process.php",
data: $("#signUpForm").serialize(),
success: function(data)
{
$('#errors').show();
$('#errors').append(data);
}
});
return false;
});
});
</script>
It displays errors from php script. And right now every time I click submit button, new errors are added to old ones. I wonder, is it possible to reset old errors and show just new, after I click submit button?
Use $('#errors').html(data); instead of $('#errors').append(data);, When you use .append(), you add to the content you already had. .html() replaces the content.
Another alternative might be to empty first and then append. Like $('#errors').empty().append(data);
I wonder why do you have $('#errors').show();? If it was hidden first, maybe better to put .show() after the .html() / .append()`
Use $('#errors').empty().append(data);
I use a page with Jquery tabs and if i submit one of the forms in the tabs only that tab is submitted and refreshed with this jquery code:
$(document).on("submit", "#plaatsen_stap3", function(event) {
/* stop form from submitting normally */
event.preventDefault();
$.ajax({
type:"GET",
url:"../plaatsen_advertentie/plaatsen_advertentie_stap3.php",
cache: false,
data: $("#plaatsen_stap3").serialize(),
success:function(data){
$("#tab2").html(data);
}
});
});
But in the case that there has to be payed i want to reload the page with the payment page. I want to do that AFTER the div is reloaded with the data, because i need to put a payment row in the DB with the data from the GET. Is location an option? If i use that now only the div (tab2) is loaded with the payment page....
So:
1.push submit
2.submit the form and load page/script in div by Ajax
3.check in php script (within the div) if payment is needed
4.if yes,add row with payment data in database and reload entire page with payment page (with some Get data in the url (last inserted id)
success:function(data){
$("#tab2").html(data);
location.href = "/yourpage.php";
}
Since you wanna do once the HTML is generated, give some time like about 5 seconds?
success:function(data){
$("#tab2").html(data);
setTimeout(function(){location.href = "/yourpage.php";}, 5000);
}
This would work for your use case. This cannot be done from server side.
I think load() is what you are looking for. http://api.jquery.com/load/
The code below is intended as a guideline, and I'm not even sure it's working (I have not tested it). But I hope it will be of some help.
I would do something like this:
//Step 1
$(document).on("submit", "#plaatsen_stap3", function(event) {
/* stop form from submitting normally */
event.preventDefault();
$.ajax({
type:"GET",
url:"../plaatsen_advertentie/plaatsen_advertentie_stap3.php",
cache: false,
data: $("#plaatsen_stap3").serialize(),
success:function(data){
//Step 2 - submit the form and load page/script in div by Ajax
//Make sure array[] is an actual array that is sent to the test.php-script.
$("#tab2").load("test.php", { 'array[]' , function() {
//Step 3 - check in php script (within the div) if payment is needed (Do this from test.php - don't check the actual div but check values from array[])
//Step 4 - if yes,add row with payment data in database and reload entire page with payment page (with some Get data in the url (last inserted id)
//Do this from test.php and use header-redirect to reload entire page
$("tab2").html(data); //Do this when test.php is loaded
}
} );
}
});
});