Post form to web2py function using ajax - javascript

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.
});

Related

Post-map-repost JavaScript form handler

I'm trying to write JavaScript (jQuery in this case) to handle the form submission of an already existing form. I do not have a ton of control over the form itself. It's built in a third-party landing page software with limited options.
What I'm trying to accomplish: Submit the form twice. The first time with all of the original values. The second time with a few of the values remapped.
What I've come up with so far is as follows:
jQuery(document).ready(function() {
jQuery("form").submit(function(e) { // fires when the original form is submitted
e.preventDefault(); // stops the form submitting / refreshing
// save the values for our first AJAX call
var formData = {
your_first_name: jQuery("#your_first_name").val(),
your_last_name: jQuery("#your_last_name").val(),
your_company_name: jQuery("#your_company_name").val(),
your_work_email: jQuery("#your_work_email").val(),
your_referrals_first_name: jQuery("#your_referrals_first_name").val(),
your_referrals_last_name: jQuery("#your_referrals_last_name").val(),
your_referrals_company_name: jQuery("#your_referrals_company_name").val(),
your_referrals_email_address: jQuery("#your_referrals_email_address").val(),
your_referrals_phone_Number: jQuery("#your_referrals_phone_number").val(),
how_did_you_hear_about_electrics_referral_program: jQuery("#how_did_you_hear_about_electrics_referral_program").val(),
}
// remaps values for second AJAX call
var repostData = {
your_first_name: jQuery("#your_referrals_first_name").val(),
your_last_name: jQuery("#your_referrals_last_name").val(),
your_company_name: jQuery("#your_referrals_company_name").val(),
your_work_email: jQuery("#your_referrals_email_address").val(),
your_referrals_first_name: '',
your_referrals_last_name: '',
your_referrals_company_name: '',
your_referrals_email_address: '',
your_referrals_phone_Number: '',
how_did_you_hear_about_electrics_referral_program: jQuery("#how_did_you_hear_about_electrics_referral_program").val(),
}
// submits the form with all of the original data
jQuery.ajax ({
type: 'POST',
data: formData,
dataType: 'json',
success: function (data) {
console.log("Form 1 submitted successfully!");
// submits the form again with new data, only if the first post was successful
jQuery.ajax ({
type: 'POST',
data: repostData,
dataType: 'json',
success: function (data) {
console.log("Form 2 submitted successfully!");
},
error: function (data) {
console.log("An error has occured on form 2");
}
});
},
error: function (data) {
console.log("An error has occured on form 1");
}
});
});
});
And I have a JSFiddle built here with an html form built out for testing: https://jsfiddle.net/wca18ekq/
I have tried various different methods. Some with and without AJAX. I ultimately think AJAX is the right approach here since I would like to post data more than once without refreshing.
Can anyone lend a hand here?
This is the workaround approach, this would require the user to allow popups, and they would need to close the tabs after, because it would set the form target to _blank, to make it submit in a tab, then submit one time, remove the fields you dont want, then submit another time
https://jsfiddle.net/04jnfytg/
//won't work in the fiddle, because it doesn't submit correctly to a tab

Firefox displaying form data in URL upon jquery AJAX post

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
}

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.

Form not submitting with AJAX

=====UPDATE AGAIN==== (if anyone cares!)
the solution I posted before stopped working for whatever reason. I included a beforeSend in my ajax request and pasted the portion of my js that validates my form into it. Works like a charm now!
$('#form').on('submit', function(e) {
e.preventDefault(); //prevents page refresh
$.ajax({
type: "post",
beforeSend: function(){ // check that form is complete
},
url: "client_config_send2.php",
data: $(this).serialize(),
success: function(data){
alert('Thank you'); hide_request();window.location = "#top";
}
});
});
EDIT
See my answer below, using 2 .preventDefault!
I have read through many pages / examples of this, but for some reason I can't get it to work on "my" form.
I'm simply trying to submit my form without refreshing the page or opening a new page / tab for the confirmation message.
The form:
<form id="form" name="Configurator" method="post" action="">
.... //Client configures his product, display an image if they choose, and request a quote.
<button id="submit_button" type="submit" name="Submit" >Request</button>
</form>
The client_config_send2.php works, it simply pulls a bunch of parameters from the form (configuration, contact info) and puts it into an email. This part works fine before I try to integrate the ajax.
The JS:
$('form').on('submit', function(e) {
e.preventDefault();
if(!validateForm(this)){
return true;
}
$.ajax({
type: "post",
url: "client_config_send2.php",
data: $(this).serialize(),
done: function(data){
alert("Thank you, we will get back to you shortly");
}
});
})
</script>
The validateForm() function also works, it checks if the configuration is valid, if the email / contact info is complete, etc.
At this point, the validateForm works: if info is missing, the alert pops up. However when validateForm() returns true, the form doesn't submit, nothing happens.
I have tried success instead of done, return false instead of true in the JS, and many other things I found online but I am lost. Never used AJAX before so I'm not 100% confident with the subtleties of the language!
Thanks in advance!
"client_config_send2.php" is a filename. The URL you give to Ajax needs to be, well, a URL like http://example.com/client_config_send2.php.
Change done to success:
success: function(data){
success only fires after your request got response and the response code is OK(http 200).
Update the code below:
$('form').on('submit', function(e) {
e.preventDefault();
if(!validateForm(this)){
return true;
}
var formdata = $(this).serialize();
$.ajax({
type: "post",
url: "http://www.example.com/client_config_send2.php",
data: formdata,
success: function(data){
alert("Thank you, we will get back to you shortly");
}
});
})
</script>
Could you try removing/commenting event.preventDefault();
If this method is called, the default action of the event will not be triggered. (http://api.jquery.com/event.preventdefault/)
Try coding in the following format. The logic uses an if/else statement to make the ajax call.
$('form').on('submit', function(e) {
//If form could not be validated
if(!validateForm(this)){
//prevent the form form submitting
alert("Your form is not valid for submission!");
e.preventDefault();
}
//else
else{
//form input is valid
//make the ajax call
$.ajax({
type: "post",
url: "client_config_send2.php",
data: $(this).serialize(),
done: function(data){
alert("Thank you, we will get back to you shortly");
}
});
}
});
});
Here is the final code that does exactly what I want:
- the validateForm() function works as it should. If the form is not complete, it returns false, an alert pops up and the form does not submit
- if validateForm() returns true, the form gets submitted, the confirmation alert pops up and the page does NOT refresh. Users can then build a new configuration and submit a new request without re-entering all the contact info.
The 2 .preventDefault did the trick!
$('form').on('submit', function(e) {
e.preventDefault(); //prevents page refresh when form is submitted
//If form could not be validated
var x = validateForm();
if(x == false){
//prevent the form form submitting
e.preventDefault();
}
//else
else {
//form input is valid
//make the ajax call
$.ajax({
type: "post",
url: "client_config_send2.php",
data: $(this).serialize(),
success: function(data){
alert('Thank you! we will get back to you within 24 hours. Please check your junk / spam folder if you do not receive a response within that time.');
}
});
}
});
Thanks everyone for your help!

Categories