Firefox displaying form data in URL upon jquery AJAX post - javascript

I have a login form which calls a jquery ajax request and posts the form data via an ASP.NET Web API endpoint.
So the process just checks username and password, and if it matches, redirect to home page. It works properly when I run from Chrome but I tested in FireFox and it's not redirecting but worst of all, it's putting the form data in the URL? Why is it doing that?
After posting, this is what the URL looks like:
http://localhost:50367/Account/Login?companycode=a&username=a&password=a
This does not happen in Chrome and I don't think I have anything in my code that would cause this.
The ajax call looks like this:
$.ajax({
url: "/Account/Login",
method: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify(loginData)
})
.done((response) => {
if (response.success) {
window.location.href = response.returnUrl;
}
})
.fail((error) => {
});
What could be causing the form data to display in the URL for Firefox?

Prevent the default action of <form> submission.
form.onsubmit = function(event) {
event.preventDefault();
// do `$.ajax()` stuff
}

Related

Shopify draft order issue

I have create draft order using Shopify Draft order api in php via ajax call.
in ajax response I get one url and redirect on it www.mysite.com/17875421/invoices/280fa46bee5ca183da7e774457522428.
url is correct and all things goes well user able to see the checkout page with correct order data.
But sometime shopify show the 404 page rather than checkout page.
after showing the 404 page if I refresh the page by simple heating F5 Key than all works fine.
I can't understand why this happening.
would someone help me to solve and find the reason why this things happening ?
My ajax call function as below
jQuery.ajax({
url: AjaxUrl,
type: "post",
dataType: "json",
data: {
formData
},
beforeSend: function () {
showLoader();
},
complete: function () {
hideLoader();
},
success: function (response) {
if (response['result'] == 'success') {
window.location = response['invoice_url'];
}
}
});

Form Redirect Jquery Ajax

I'm working on an HTML app in which there is a form. On clicking the submit button, I make a server-side call using jquery.ajax(). However, whenever an exception is returned from the server, like a Status Code 500, I need to display an error message on the same page. However, it automatically redirects when it encounters an error. I tried using the statusCode setting in jquery.ajax() like this:
$.ajax(
{
method: 'GET',
url: 'my url',
//...
successCode: {
500: function(response) {
alert(response.getResponseHeader("xyz"));
$('some_selector').show();
}
},
success: function(){},
error: function(){}
//...
})
But this does not seem to work. It redirects me to the action link and displays the JSON error and I cannot think of a way to prevent this redirect. Any help would be appreciated.
Thanks
It seems like your ajax options are outside of the ajax call put your parameters inside like
$.ajax(){options} => $.ajax({options})
Try this,
$.ajax({url: 'your url',
type: 'GET',
success: function (response) {
//succesfull request
}
}).fail(function (response) {
//failed request
});
You should be able to find the status code in the fail using response.status
I think your submit button is triggering the redirect. Try adding
$("#myform").submit(function(event){
event.preventDefault();
});
to prevent the redirect

Javascript run php file and then download file

I have a page where I would like a form to be completed , a javascript file verifies the information, sends the information to a php file to mail it to me and then initiates a download.
The problem is that I can have the javascript file either send the mail or allow the file to be downloaded, but not both.
The code in question looks like this:
else {
document.dlform7.action = "http://www.myurl.com/c/post7.php" ;
document.dlform7.submit();
window.location.assign(url);
}
Is there a way (perhaps using load) that I can have both of these actions take place at once?
edit:
ajax option:
else {
$.ajax({
url: "http://www.myurl.com/c/post7.php";
type: "POST",
data: data,
cache: false,
success: function () {
window.location.assign(url);
document.dlform7.submit();
},
I think that you need to adjust the submit handler for your form. IRC, the submit event will cause the page to reload.
You will want to create an submit event handler for the form that will make an ajax call to your php script. Then have it return false to prevent the page reload. You should then be able to cause the file download at the same time.
UPDATE
If you want to download the file no matter what happens with the php script to send the email you can do the following:
else {
$.ajax({
url: "http://www.myurl.com/c/post7.php";
type: "POST",
data: $(document.dlform7).serialize(),
cache: false,
});
window.location.assign(url);
The ajax method is the form submission. It doesn't break the flow of your code so the redirect would happen after the request. (I am pretty sure that this will work).
If you want to wait until the php script successfully runs then you would move the code into the success callback like so:
else {
$.ajax({
url: "http://www.myurl.com/c/post7.php",
type: "POST",
data: $(document.dlform7).serialize(),
cache: false,
success: function () { window.location.assign(url); }
});
Of course, you could also just change the php page to send an email and then respond with the file that you want to download as mention in the comments.

Unwanted redirect to POST url after successful ajax

I do a jQuery ajax POST which successfully delivers the correct data to the server.
After the POST is complete, the browser has redirected to the post url page... which I don't want. Neither of the alerts occur. The POST data has arrived at the server just fine.
i.e. after the ajax is performed within a page at http://myDomain/myPage.html as shown below, the browser address bar shows http://myDomain:39991/updateEnabled and no alerts have happened.
var enabledAjax = $.ajax({
url: 'http://myDomain:39991/updateEnabled',
method: 'POST',
data: $('#enabledForm').serialize(),
dataType: 'jsonp'
});
enabledAjax.done(function (msg) {
alert('done')
})
enabledStatus.fail(function (jqXHR, textStatus) {
alert('textStatus');
})
In express, i have router.post('/updateEnabled', urlEncodedParser, updEnab);
Within updEnab all I do at the moment is a console.log of req.body and res.end()
I've tried a 'success' method within the ajax params but that doesn't work either.
What am I doing wrong that is causing the redirect to the POST url?
hello when you submit form this is submitting normally so you need to use this.
event.preventDefault()
this will stop stop normal submitting of form.
To stop the redirection you can use the return statement like this:
enabledAjax.done(function (msg) {
return false;
})

Post form to web2py function using ajax

The server is written in web2py, and hosted on google app engine. I can visit my index.html by entering domain.com/index and I can send form by entering domain.com/register where "register" is a function defined by default.py
However, in html, where I would like to send form to the server and get a response, I use ajax which has cross domain issues. So I use "register" as URL, and it does not work. Help?
$("#signup").click(function() {
$.ajax({
type: "POST",
url: "register",
data: $("#formsignup").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data);
}
});
return false; // avoid to execute the actual submit of the form.
});
By typing domain.com/register, I can totally trigger the function. What is the problem here? And the form is sent to domain.com... In browser it appears as htt[://domain.com/?email=ada#ad.com&password=adsa
Its very possible register is looking for GET instead of POST
try changing the type in ajax
$("#signup").click(function() {
$.ajax({
type: "GET",
url: "register",
data: $("#formsignup").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data);
}
});
return false; // avoid to execute the actual submit of the form.
});

Categories