This question may seem completely stupid, but say i have a PHP page with some form processing at the top in php and a html form underneath with the action of submitting to same page and method of post. How do i get the result via ajax, ie. send form to self without refreshing the page, if that makes sense? Thanks
It sounds like you're asking about Ajax basics, right? I suggest using jQuery to handle the Ajax part.
Put jQuery in your page, and then do something like
$(document).ready(function(){
$('#submit_button').click(function(){
var something='value to send to PHP';
$.post('name_of_page.php',{"a_var":something},function(data){ /* do something with the data you received back*/ },'json');
});
});
Then in your PHP page, set up to handle a post or normal HTML output.
<?php
if($_POST['a_var']){
$result=do_something($_POST['a_var']);
echo json_encode($result);
exit;
}
//if there was no POST value, it continues to here
<html>
This is the rest of your page.
You'd have the form and the above javascript and so on here.
</html>
In your page, check if the page has POST parameters. If it does, process them and return a confirmation. If it doesn't, display the form.
Related
I'm displaying data from DB like this:
<?php foreach ($r as $k => $v):?>
<div data-role="collapsible" data-mini="true" class="collapsible">
Name: <?=$v['name']?>
</div>
<?php endforeach; ?>
Now when I add new data to DB and the form is submitted, my script redirects back to this page. How do I show the new data immediately without manually refreshing the browser? I usually don't have this issue if I'm not using Jquery Mobile.
You could send the form with jquery ajax
$('form[name="myform"]').submit(function(evt){
evt.preventDefault();
$.post('/my_form_handler.php', $(this).serialize())
.done(function(data){
//Populate dom elements here with new data
}).fail(function(data){
//Handle failed ajax post.
});
});
And then on successful post change the content of the dom-elements.
Not 100% sure i got the right syntax for it but i think it should give you a general idea on how to do it.
The problem here is that the data is hard coded into the page's HTML. After your form submission it's jQueryMobile that's changing the page/view, and no refresh of the page takes place so you're still seeing the same data.
You should refactor to create the loop with JSON data (loaded via AJAX). If the data is cached in a local variable, you can either add to it with the form's data, or make a fresh AJAX call to the server (recommended if you need sorting or filtering).
After reloading the data, the rendering code can be called, showing the new list.
it is easy.
you can send the request to the server using ajax.
and on the server side, you have to make the function to return the data added.
the ajax function will get the success or fail function.
the success function will run if it works.
on the success function , you have to add the content using javascript jquery with the returned data.
Thanks
I am working on a survey that will go at the bottom of a FAQ page. My problem is that everytime a form is submitted, it sends you to a different page. I was wondering - is there a way to submit the form and have a little message that replaces the survey that says "Thanks for your feedback" instead of sending the user to another page or refreshing the page?
So far, I have a file that contains the HTML form, CSS, and jQuery and another file that contains the PHP connection to database and insertion of data to the database.
I would appreciate an explanation that is dumbed-down and an example would help since I am relatively new to programming.
An important note: My jQuery is set up to automatically submit if a user answers very helpful/extremely helpful. If not, two more questions appear below with a submit button at the bottom.
More specifically it looks like this:
$(document).ready(function() {
$('.rating').click(function() {
$('.rating').removeClass('selected');
ratingClick(this);
});
});
function ratingClick(that) {
console.log(that.id);
if (that.id == 'rating4' || that.id == 'rating5') {
//$('#questions').fadeOut('slow');
//$('#thankYou').fadeIn('slow');
$('#questions').submit();
} else {
$('#getMore').fadeIn();
$(that).toggleClass('selected');
}
}
$(document).ready(function() {
$('#submit').click(function(){
//$('#questions').fadeOut('slow');
//$('#thankYou').fadeIn('slow');
});
});
What you want is the jquery post function: http://api.jquery.com/jQuery.post/
Make sure your data is JSON.
$("#formdiv").click(function(){
$.post("somepage",{ yourformdata} );
$("#formdiv").replacewith("Thanks for filling out the form!");
});
You can use the replaceWith function to replace the desired content with the thankyou message.
Alex,
from the code you supply, the reason for leaving the page is due to the fact that you don't preventDefault() on the click event. Your page will always reload after that submit unless you take abortive action. No guarantees, but try a quick refactor to:
$(document).ready(function() {
$('#submit').click(function(e){
e.preventDefault();
//$('#questions').fadeOut('slow');
//$('#thankYou').fadeIn('slow');
});
});
This should get you a stage closer. You then just have the ajax logic to define, which should come good with a quick search to match your needs.
I have a one page website in the works that has a contact form where its contact error and contact thank you messages are placed further down the page as hidden divs.
The contact form calls an external php file that calls the anchor links of the error and thank you message divs in the index.html file.
www.photograsurfer.com/test/index.html
www.photograsurfer.com/test/code/contact-panel.php
Everything works successfully as long as the divs are not hidden. So now I need to use the following javascript to get the hidden divs to display when needed.
<script type="text/javascript">
function showContactPanelError() {
document.getElementById('contact-panel-error').style.display = "block";
}
</script>
My problem, besides being a complete PHP beginner, is that I don't know how to get the PHP file to reference the Javascript code to display the hidden divs properly on the main page.
Any help is appreciated.
Thanks.
Use jQuery forms (http://malsup.com/jquery/form/) to submit your form via AJAX, then show/hide divs depending on values you return from PHP scripts.
you could assign php variable to javascript as
var error="<?php echo $_GET['error']; ?>";
the $error is the data passed along with the url like wwww.example.com/test.php?error=1
Now you could check var error and call your function showContactPanelError().
I ended up going with a mixture of the 2 methods on these pages.
http://trevordavis.net/blog/ajax-forms-with-jquery
https://spruce.it/noise/simple-ajax-contact-form/#contact
Ditched the div idea since the Ajax method allowed me to not reload the page and enter error and thank you messages within the contact form itself. Seemed like an easier approach.
Thanks for all of the suggestions, as I never would have looked at using Ajax otherwise.
You can add a onclick event on submit button. On clicking it will create an ajax call send data to the required external PHP file and then on success will display the hidden division properly on the main page.
here's a sample code just for an explanation
**
* Description : Function that will trigger the AJAX request.
* #param none
*/
function CategorySubscriber_Unsubscribe(){
var data = {
'data-1': data-1,
'data-2': data-2,
// as per your need you can put any number of data
};
var url = // your url
jQuery.post(url, data, function(response){
jQuery.show("#your-div-id");
});
}
function(response) will be executed when ajax call will be in success status.
You can learn it from these links
http://www.w3schools.com/jquery/ajax_post.asp
http://api.jquery.com/jQuery.post/
I am new to jQuery AJAX function. I want to redirect my user to a webpage when he clicks a button. Please do not tell me to target the button to the webpage as I have to do some working in the php file... My current code is :-
TEST.html file :-
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("test2.php");
});
});
</script>
</head>
<button>Get External Content</button>
<div id="div1"></div>
</html>
Now my test2.php file is the following :-
<?php header("Location:http://google.com"); ?>
I am a beginner in AJAX jQuery. So, please do not downvote my post although it may sound silly. My code, for obvious reasons is not working. Please help me. Thanks in advance. Any help will be appreciated.
You cant redirect with an AJAX call. You can either create a simple link or link to a PHP page which then redirects the user on. Using AJAX will only let you manipulate this page you are on.
Of course, you can always redirect with simple Javascript as well.
window.location = '/my_url.php';
EDIT: In response to your comment question, what I would do is use the .get() function with the data parameter, check what has been returned from the PHP page if server side validation is required and then if I am happy with the result, redirect.
If no server side validation is needed, there is no need for AJAX.
Look at it this way: AJAX is requesting and reading the .php file. When AJAX sees the header("Location: ...") line, it redirects the AJAX request. Put simply, AJAX can't be used for redirects.
You can use the complete callback to redirect the user after the AJAX query has completed like so:
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("test2.php",
complete: function(){
window.location = 'http://new_url';
}
);
});
});
That being said if you just want to redirect a user on a button click there are better ways to do that.
$("#div1").load("test2.php");
appends the contents which are
returned from test2.php , it will not redirect. The test2.php should return a link and populate the div with the link. Then write a callback on ajax success which will
redirect using window.location = target , the target being the link which was dynamically loaded in the div1
I am currently submitting a simple PHP form via JavaScript using
document.add_driver.submit();
This method how ever redirects the browser to the address of the form action
ie: <form name="add_driver" id="add_driver" action="../scripts/add_driver_script.php" method="post">
which then needs to again be redirected back to the initial page.
I am wondering how I would go about using JavaScript to still submit the form but with out the page redirecting.
Cheers.
The JavaScript: "document.add_driver.submit();" is just "Clicking" the submit button, which will cause it to redirect to the ../scripts/add_drive_script.php page.
It sounds like you're wanting to do this in the background, I'd suggest using jQuery, which is a JavaScript library with any AJAX related functions built in.
Rather than downloading the jQuery library to server to test it out, you can add the following into your pages header:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
A simple function that you might use would be:
<script>
$("#add_driver").submit(function() {
$.post("../scripts/add_driver_script.php", $("#add_driver").serialize());
});
</script>
Serialise the form's inputs, and then send it to your action with AJAX.
Research AJAX, and/or use a library to make things easier.