Call post method without reloading existing page php [duplicate] - php

I know this might be a simple question but I just didn't find the solution I want. I write a post route with express. like this:
app.post('/search', function(req, res){
// Some code to get data from req and save data to db
// Then want to stay current page.
});
My html:
<form action="/search" method="post">
<input value="name" name="marker[name]">
<input value="address" name="marker[address]">
<input value="rating" name="marker[rating]">
<button id="favo-button" type="submit">
Submit
</button>
</form>
When user click submit button, the data sent through req to the post route, and there insert to db. Then I want the page not direct to anywhere but stay current page. I tried some ways but not handle it very well. what I tried:
in the route,
res.render('/search');
this makes the page re-render with the same view, but the page will flash because of the re-render.
don't do anything to the res in the route, then the page loading circle will never stop.
app.post('/search', function(req, res){
var data = req.body.marker;
// some code insert data to db
// then do nothing to res. The page will stay but keep loading.
});
Is there a way to just do nothing to res and stay, meanwhile not keep the page loading?

There are two ways to do this.
Return a 204 No Content response. (In Express: app.post('/search', (req, res) => res.status(204).send());, but that's basic HTTP you can do in any server-side code)
Make the request with JavaScript (i.e. Ajax, e.g. with XMLHttpRequest) instead of submitting the form
(You could also submit the form to a hidden iframe, but that's just an ugly hack).

You can do it in 2 ways:
1 - Do it using Jquery AJAX call, you need to write this code in your view page, not in controller or route of NODEJS App.
$("#YOUR_FORM_ID").on("submit", function () {
$.ajax({
url: '/search',
type: 'POST',
cache: false,
data: { $("#YOUR FORM ID").serialize() },
success: function (data) {
alert('Success!')
}
, error: function (jqXHR, textStatus, err) {
alert('text status ' + textStatus + ', err ' + err)
}
});
});
2 - By redirecting the request to the source request
app.post('/search', function(req, res){
//Do Something
res.redirect('/');//redirect to the page from where request came
});

Related

Here url Not working but modal open properly

If ajax call ok than a href not working or if i stop ajax call than href ok, But i want both work on click
View
Ajax Request
$("body").on("click", ".btnad", function(e){
e.preventDefault();
details_id = $(this).attr('id');
$.ajax({
url: 'assets/php/process.php',
type: 'post',
data: { details_id: details_id },
success:function(response){
data = JSON.parse(response);
$("#getID").text(data.id);
$("#getTitle").text(data.ad_title);
$("#getUser_coin").text(data.user_coin);
}
});
});
If I understand correctly, you want to initiate an AJAX request and follow the link. You can't reliably do both an an asynchronous thing (ie an AJAX request) and still allow the browser to follow a link to a new page.
Instead, you should drop your use of AJAX, and instead allow your browser to perform a normal request to assets/php/process.php, but hae that page redirect the browser to the page you want to show next.

Event.prevent() default ajax not sending data from form to php

I already checked around for this answer but all are different problems just same title (to prevent random duplicate marks).
Here is an ajax call to the click of the filter button that should send the data inserted in the form formmatcat to the php file formfilt.php and should load the result in a div with id resultins
<script>
$(function () {
$('#filter').on('click', function(event){
event.preventDefault();
$.ajax({
type: 'post',
url: 'formfilt.php',
data: $('#formmatcat').serialize(),
success: function () {
$("#resultins").load('formfilt.php');
}
});
});
});
</script>
I set the preventdefault to load only in the div without redirecting to the php file and this works but if I put the preventDefault it echoes the string I build by concatenating values sent from the form with those empty values. The strange thing is that if I remove preventDefault of course it redirects and loads the php file but with the correct values:
Moral of the story, data in the form with the ajax call goes correctly to the php file but looks like preventDefault don't let this. Thanks in advance
Here's the structure of the html part with the form
<form id="formmatcat" method="post" action="formfilt.php">
.
.
various textboxes
.
.
</form>
What you're doing is sending an AJAX request toformfilt.php, when this call happens and it returns a response it will be stored as a parameter within the success or $.done function as I'll mention later, that is where your echo'd content will be.
What you're doing here is when the call is successful, you simple send a GET request to the same page. Since that GET request differs from the AJAX POST request and has no POST parameters you'll not get the correct output.
By simply submitting the form and letting it go to the page rather than cancelling the request you're getting the right values as you're directly posting to the page with the correct values, when you call the load function you're doing a seperate AJAX get request.
What load actually is, is a rough equivelant to $.get which is shorthand for $.ajax.
Looking at jQuery AJAX docs
jqXHR.done(function( data, textStatus, jqXHR ) {});
An alternative construct to the success callback option, the .done() method replaces the deprecated jqXHR.success() method. Refer to deferred.done() for implementation details.
Basically, a $.ajax() call returns a promise object that you can chain callbacks on when it is finished. Also note that data here will be the actual content within your PHP file, thus if you rewrite your AJAX call like so:
<script type="text/javascript">
$(function() {
$('#filter').on('click', function(e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'formfilt.php',
data: $('#formmatcat').serialize()
}).done(function(data) {
$('#resultins').html(data);
});
});
});
</script>
It will then continue to load the output of formfilt.php into the div with ID resultins.
dont use form, use input without form, and use button tag use onclick to run function, if you use form, it will submit and redirect,
i'm not good with ajax on jQuery
but if i were to use javascript/XHR
var CB=document.getElementById("filter").value; //get input/filter value
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200)
document.getElementById('contain').innerHTML=xhttp.responseText;
};
var url="formfilt.php?filter="+CB;
xhttp.open("GET", url, true);
xhttp.send();
if you want to use post :
xhttp.open("POST", "formfilt.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send('filter='+CB);
sorry, i'm also learning, and new to this, just learning a week ago,

Submit form to two places

I have an issue where I need a simple contact form to have an action to post to a data collection service, AND to a thank you page for conversion tracking.
The data collection service page does not allow for any sort of redirection unfortunately, so my best bet is to submit to BOTH a thank you page, and to the data collection service.
I just don't know how to to this though... can someone please steer me in the right direction? I've done a lot of searching, but can't really get anything to work with jquery or javascript.
Any advice / feedback / methods would be greatly appreciated.
Per the reply below, I'm trying to get the AJAX to redirect after it sends data to the collection service like this, but I can't get it to work:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// Shorthand for $( document ).ready()
$(function() { $("#ajaxform").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
window.location.replace("http://example.com");
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
}); });
</script>
<form name="ajaxform" id="ajaxform" action="https://secure.velocify.com/Import.aspx?Provider=IdealHomeLoansWebPOST&Client=IdealHomeLoansLLC&CampaignId=46"method="POST">
Using jQuery, you could send everything to your data collection service and wait for an answer. If it was successful, redirect to the thank you page.
Everything you need to know can be found in this article: http://hayageek.com/jquery-ajax-form-submit/
$(function() {
$("#ajaxform").submit(function(e)
{
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
//data: return data from server
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
});
This replaces the default form-submission with an AJAX-Request.
Then just use the following code to redirect to the thank you page:
window.location.replace("http://example.com");
Submit to the Thank You page and have the Thank You page do a CURL request to the data collection service.
Or, submit to an intermediate page that submits the CURL request and then redirects to the Thank You page.
The most straight forward way I can think of doing this would be to have a onClick handler for your submit button and then using JavaScript fire off some sort of XHR post request to your data collection service containing the form data. You would then return true and the browser would post to the Thank You page.
For example using JQuery (your code will need more check and complexity)
HTML:
<form id="form" action="somewhere.php" method="post">
<!-- form stuff here -->
<input type="submit">
</form>
JS:
$('#form').submit(function() {
$.post('somewhereElse.php', {data: $('#form-element').val()});
return true;
});
JQuery Ajax Post, might have to set it to async.
On the success submit from the first one, you can submit to the second. Then on the success you can redirect to the the thankyou page.

Using ajax for form submission with multiple forms generated by php on page

I have a page with multiple forms that do the same thing, acting as a like button for each post in the page, and right next to it the number of likes inside a div named "likes".$id, so I can identify where to write the likes count after the ajax call. I was trying to use jQuery ajax function, but I couldn't set what div to write the results of the function.
$.ajax({
type:'POST',
url: 'likepost.php',
data:$('#like').serialize(),
success: function(response) {
$('#like').find('#likediv').html(response);
}
});
And how would I access the data on likepost.php? I am terrible with javascript, so I hope someone could help me and explain how the jQuery function really works, because I've been copying and pasting it without really knowing what I was doing.
Would this work?
$(function () {
$("#likebutton").click(function () {
var id = $('input[name=id]'); // this is me trying to get a form value
$.ajax({
type: "POST",
url: "likepost.php",
data: $("#like"+id).serialize(), // the form is called like+id e.g. like12
success: function(data){
$("#likes"+id).html(data); // write results to e.g. <div id='likes12'>
}
});
});
});
I put this in the code but when the button is clicked, the usual post refreshing page is done. Why is that?
Making a mini-form, serializing it, and POSTing it seems like a lot of heavy lifting when all you really want to do is send the ID to the likepost.php script.
Why not just retrieve the ID and post it to the script?
First let's break down your function:Type is the type of the request we're making, you specified POST here. This means in your PHP file you'll access the data we're sending using $_POST. Next up is URL which is just the url of where you're sending the data, your php file in this case.
After that is data, that is the data we're sending to the url (likepost.php). You're serializing whatever has a ID of "like" and sending it to the php file. Finally success is a function to run once the request is successful, we get a response back from the PHP and use it in the function to output the response.
As for the multiple forms I'd recommend doing something like:
http://www.kavoir.com/2009/01/php-checkbox-array-in-form-handling-multiple-checkbox-values-in-an-array.html
Here's documentation on the stuff we talked about, if you're every confused about jquery just break it down and search each part.
http://api.jquery.com/serialize/
http://api.jquery.com/jQuery.ajax/
you can try :
function submitform(id) {
var jqxhr = $.post('./likepost.php',$("#"+id).serialize(), function(data) {
$("#"+id).find('#likediv').html(data);
}, "json")
return false;
}
in form:
<form method="post" id="likeForm" onsubmit="return submitform(this.id);">
<input..... />
<input type="submit" value="Submit" />
</form>
in likepost.php add first line:
if ($_SERVER['HTTP_X_REQUESTED_WITH'] != "XMLHttpRequest") {
header("location: " . $_SERVER['HTTP_REFERER']);
exit();
}
you can see more : http://api.jquery.com/serialize/
working for me.

Need to add function

I'd like to add a simple functionality to my pages, where a user will see a "follow" button and by clicking it a db record will be created (userID and pageID). I'll handle query on the backend, I suppose. I think I need to do it in AJAX, but I havebn't done much with AJAX. I was also thinking that updating the button status from FOLLOW to FOLLOWING (or something similar) I could do with jQuery, with some sort of toggle, while the request is being processed on the background.
Am I on the right track with this?
You're on the right track.
I've created an example which uses a button like <input type="image" class="follow">. When I user clicks on it it sends a request to the server (url). On success it updates the button image.
$('input[type=image].follow').click(function() {
var button = $(this);
var current_img = $(button).attr('src');
var current_alt = $(button).attr('alt');
$(button).attr('src', '/style/icons/ajax-loader.gif');
$(button).attr('alt', 'Requesting data from the server...');
$.ajax({
url: url of script the processes stuff (like db update),
type: 'POST',
data: {},
dataType: "json",
error: function(req, resulttype, exc)
{
$(button).attr('src', '/style/error.png');
$(button).attr('alt', 'Error while updating!');
window.setTimeout(function() {
$(button).attr('src', current_img);
$(button).attr('alt', current_alt);
}, 3000);
},
success: function(data)
{
$(button).attr('src', '/style/followed.png');
$(button).attr('alt', 'Followed');
}
});
return false;
});
Above is just some example code. Change it at your will. Have fun with it.
AJAX is right, jQuery makes ajax easy.
//Post with jQuery (call test.php):
$.post('test.php', function(data) {
//Do something with result data
});
It sounds like you are on the right track here. If you're working with a smaller application then using an AJAX request and creating your record would be easiest using a Java servlet and putting for example some JDBC code in your doGet or doPost method to perform the database operations.
At the same time your onSuccess method for your AJAX request can call the jQuery code necessary to update your button. Good Luck!

Categories