Submit form without reloading page

[saga_shiftyblow]

Hi,
it is possibile to submit vgm form without reloading the page in which the map is contained?
I’m needing this for I had to put map and VGM inside a lightbox in a page containing another form and reloading cause the loss of all data of the form already in the page.

I’m pretty sure i’m a step away from the target with

jQuery.ajax(
url:”???”,
type: “POST”,
data: jQuery(“#wpgmaps_ugm”).serialize(), // serializes the form’s elements.
success: function(data){
alert(data);
}
});
return false;

instead of form.submit in ugm-core, but still i’m missing something. May I ask for a little help?
Thank you very much!

• This topic was modified 5 years ago by saga_shiftyblow.
• This topic was modified 5 years ago by saga_shiftyblow.

[SupportTeam]

Hi there,

Thank you for getting in touch with us.

We don’t support ajax submit form on WP Google Maps but I’ll try to prepare some changes for you. Are you feeling comfortable with javascript changes?

Thank you for your time in this.

Best regards,
Jarek

[saga_shiftyblow]

Sure, I am.
I was thinking about ajax only because I thought it was, truly, the only way to make the post call, memorize data of the added marker and avoid reloading. Pleased to know there’s a simpler way in js!

Thank you very very much!!
Elisabetta

[SupportTeam]

Hi Elisabetta,

I’m afraid there is no simple way to submit a form and avoid reloading.
I’ll send you some script as soon as possible.

Kind regards

[saga_shiftyblow]

Hi Jarek,
can’t really thank you enough! Anyway, in the meanwhile, thank you a lot!

Elisabetta

[SupportTeam]

This reply has been marked as private.

[SupportTeam]

This reply has been marked as private.

[saga_shiftyblow]

This reply has been marked as private.

[SupportTeam]

This reply has been marked as private.

[saga_shiftyblow]

This reply has been marked as private.

[Perry]

Hi Elisabetta

Very good work! Thank you very much for this!

I’d recommend that you redirect before calling die(); to avoid resubmission, you could pass the marker ID though a GET variable or a cookie beforehand if you need to retain that.

If you want to upload files via AJAX, take a look at HTML5s FileReader. I would encode the file as a base64 string and then pass that to the server.

If there’s anything else we can help you with please don’t hesitate to ask

Kind regards
– Perry

[saga_shiftyblow]

Hi Perry, thank you for your kind and precious help!
What do you mean by ‘redirecting before die()’? The point of all this code was avoiding redirect, as I had to put the map in a lightbox allowing people to insert/choose a marker by the mean of the lightbox and then return to the principal page, containing a form that was would be emptied by a non-ajax submit (reload).

Thanks for your hints about file upload. As I manage to do that, i’ll send the code for it, too.

Elisabetta

[Perry]

Hi Elisabetta,

I see what you mean, normally we always redirect after POST, to avoid form resubmission, but if you’re doing that in a lightbox then it won’t make much difference!

If you have any problems with the file upload please feel free to ask any questions, I can recommend the Mozilla Developer Network documentation for FileReader, it’s very clear.

Kind regards
– Perry

[saga_shiftyblow]

This reply has been marked as private.

[SupportTeam]

This reply has been marked as private.

[Author]

Posts