Forums

AJAX Submission thank you message

bytekultur 09 Dec, 2019
Hi, I am trying to submit a form via AJAX, which works very nicely at first. But as a result after submitting I don't just get a message, but the layout of the page is loaded into the form's container instead. What I would prefer is to just get a message to display above the form or replacing the form, but nothing else. Is that possible?

I created the form and later turned AJAX Submission on in the "display form" section of the load action.
Is there anything else I need to do?
See my settings:



Thank you for any hints
healyhatman 10 Dec, 2019
Do you have an email action, and do you have debug turned on?
bytekultur 10 Dec, 2019
Thank you for your answer healyhatman.

E-Mail Action: yes, I have one, and it sends emails
I also have a message and an event loader to show the form again. But I've tried with and without event loader.

Debug: what exaclty do you mean? The debugger of Chronoforms or setting the whole system to display errorws, warnings and notices etc.?
I had a look at the browser's console and it shows no errors or warnings, and I used the debugger of Chronoforms, but there I can find nothing wrong or actually I am not sure what to look for.
healyhatman 10 Dec, 2019
The debugger will show the body of the email, which is probably why you're seeing all the fields as they're automatically attached to the email
bytekultur 10 Dec, 2019
I am not sure if we are talking about the same thing here. I am fine seeing all the fields, but I am displaying my form lets say in a DIV within a HTML template, and when I sumit the form via AJAX, I would expect it to only send in the background, receive a message to display and display the message somewhere, but not to reload the whole layout of the page in that DIV, because what I have then is an HTML layout with a DIV containing the same HTML Layout (including body tag etc.) again. This is what happens though - after submission, the whole template layout appears in the DIV around my form and message. Do you know what I mean?

This was different in CF V5, and to me it seems like a bug, but I could just be missing a setting and couldn't find anything in the documentation regarding AJAX.
healyhatman 11 Dec, 2019
Answer
1 Likes
I get what you mean. On the first tab, with all the form settings, set form type to "custom" since you're using a Form Area.
bytekultur 15 Dec, 2019
Do you mean the first thing I see when openning the form? I can't see any form type or value "custom". But if you mean the designer mode - I have changed that to new V6.1 mode, and I think I know what you mean, now I get a lot more settings and I can turn on "use AJAX".




This improved the sitauation indeed, but it didn't change the fact that the whole HTML DOM is loaded into my DIV, as I can see in the source. What I would expect is that there is some sort of AJAX repsonse that is placed by the AJAX send script above the form or instead of the form.

Is there anything else you think I have to do to achieve that? Or has it not been programmed to do so? I could get around it with a little CSS hack and just hide everything from the DOM I don't need like the header and Logo etc. but it doesn't seem a solution really. I can even see the <jdoc> tags from the template in the loaded DOM. I might have to test it with a default template to exclude the chance of a template issue (I am using YooTheme which changes a lot of the output).
healyhatman 15 Dec, 2019
1 Likes
Now that you have changed it to 6.1 there should be a custom option. Either that or get rid of the Form Area on your pages. It definitely shouldn't be loading the whole page in AJAX
bytekultur 15 Dec, 2019
Update - I just tested it with protostar and it really seems to be a difference depending on the template. I will for now have to try and find a hack to solve it.


But I still need to come back to this, as I think this could be solved in a way not depending on the template. There are ways to only give a JSON / Text response that gets processed and placed via JavaScript, in which case it would work with any template, and would give the option to place the message above the form instead of replacing the form, too. I also tested this on many other AJAX requests even with the yootheme framework. I suggest this to be improved in a future version.

Thank you for the tipps with the form type though, that helped anyway.
This topic is locked and no more replies can be posted.