Success or error code is not available after form submission

Support
1

I have a form that uses some jquery to validate the fields, like checking it is a valid email with regex etc. then When the form is submitted (again this is handled by jquery listening to the form for submit event…runs the validation , then submits the form via ajax and returns either a data-success=“Thanks for your enquiry” or data-error=“something wrong” which are attached to the form html in the same way as data-netlify=“true” for example. So everything is working as I wish and the form is posting and the validation is working, but the success or error code is not displayed in my fade in modal window crated by jquery, instead i get the entire HTML of the webpage the form is sent from. I really could use some pointers on this. I basically need to tell my jquery function if it gets the success from netlify to show my success message!. Bet that was as clear as mud lol

netlify user daveharrisonnet
url : Contact Superclean Pressure Washers the Northern Ireland's exclusive distributor of Superclean Pressure Washers

2

hi @DaveHarrison - i split your post into a different topic so we can handle the issues separately :slight_smile:

3

Hi @DaveHarrison,

It looks like your problem isn’t related to Netlify forms, but just general jquery/javascript usage. Can you share a link to your public repo so people can see what you’re doing? without seeing that, I don’t think you’ll get any good advice beyond “check your javascript and make sure you don’t have errors in y our code”.

4

Hi futuregerald, thanks for your input. I hear what you’re saying, the thing is if I don’t add data-netlify=“true” to my form everything works exactly as it should!, when netlify form is introduced, instead of returning the success code into the modal the modal is populated with the full HTML of the page, indicating that instead of staying on current page and displaying ajax callback it is displaying the html of response sent from netlify (perhaps?!)

I think I need to ask more specific questions, lol

Here is a gist of the javascipt: Javascript used for a contact form. · GitHub

The bit I think is of relevance line 924: onwards

More specifically line 1023: as this needs to behave just as a basic email form

Then the key to it all I think: line 1043:
jQuery.ajax({
type: “POST”,
url: (formAction !== “” ? formAction : “”),
data: thisForm.serialize()+“&url=”+window.location.href+“&captcha=”+captchaUsed,
success: function(response) {

The url: was posting to a php mailer script like this url: (formAction !== “” ? formAction : “php/mail.php”),

By adding data-netlify=“true” to my form, netlify magic seems to hijack the script what do i need to set my url: formAction to in order that netlify just returns a success code, or how do I accept the full HTML code as a successful post and then show my success message?

5

Hi Dave, it looks like you are doing your post to the path set in your form’s action attribute. When you add the netlify attribute, the action path is an html page by default. What you can do is make the post to “/” or the current page instead. That should prevent you from getting a full html page as a response. Alternatively, you can set the action attribute on your form directly as described here. You’ll need to set it to an actual existing page, meaning that the path is an actual file. Let me know if that helps.

6

Dennis
Thanks for jumping in on this one
I’m not entirely clear what you mean. I have tried dozens of variations on this.
Everything on the JS works as expected, incuding the validation and then posting the form and returning the error or succes message in a modal on the same page as the form
However, when i add data-netlify=‘true’ it all goes wrong!! lol
I’m not clear what netlify forms are doing ater they get the form post (the form IS being posted btw and shows up in my netlify form dashboard!). I have a feeling it is to do with the response that is sent back to my page (and it not being in a format that is recognisable by my JS code) It almost seems like my “success message string” is being overwritten by the HTML of the page that is in the action=""
Perhaps it will come down to a slight change to the conditional statement in the JS or something really simple, but for now I am still at a loss
Any further help greatly appreciated
Dave

7

dennis

think I’ve narrowed it down to this:

if ($.isNumeric(response)) {
if (parseInt(response,10) > 0) {
// For some browsers, if empty ‘successRedirect’ is undefined; for others,
// ‘successRedirect’ is false. Check for both.
successRedirect = thisForm.attr(‘data-success-redirect’);
if (typeof successRedirect !== typeof undefined && successRedirect !== false && successRedirect !== “”) {
window.location = successRedirect;
}

                            mr.forms.resetForm(thisForm);
                            mr.forms.showFormSuccess(formSuccess, formError, 1000, 5000, 500);
                            mr.forms.captcha.resetWidgets();
                        }
                    }

I need a test for the response, i.e some way to recognise that I have received a response from netlify and that the form posted OK…any ideas

Should I check to see if it contains a certain string maybe, like <html

I think I’m almost there!! lol
Suggestions still very very welcome
Dave

8

Dennis, think I got there in the end
I used : if (response.includes("<html")){
Feel free to close thread :wink:
Dave

9

@DaveHarrison, thank you for sharing you solution here! :slight_smile:

Hopefully, this information will be helpful to someone else in the future searching the web for way to solve this issue.

1 Like