Form onsubmit redirect not working

[McCloud]

I have this issue and I don’t really understand what’s going on…

I’ve got a form on an old site, which submits the data to a google sheet.

  <form action="https://docs.google.com/a/sheeturl" method="post" target="hidden_iframe1" onsubmit="window.location='thankyoupageurl'">

which works perfectly fine - submits the data to google spreadsheet and redirect the user to a custom thank you page on the site.

I now try to mimic this behavior on a new website but with exactly the same code, it does not redirect to the thank you page - instead, it sends the data and goes to the default Google Forms thank you page.

Looking at the working code on the old web, I don’t see any javascript attached, which would further alter the redirect behavior.

Is there a reason why the redirect does not work on the new page ? In what ways can I accomplish a successful redirect after the form is submitted ?

Thank you.

/Edit:
I see that there’s a rel=“f1_submit” on the submit button and the following script:

$('input[rel="f1_submit"]').attr('disabled','disabled');
$('input[rel="f2_submit"]').attr('disabled','disabled');
$('input[rel="f3_submit"]').attr('disabled','disabled');

  $('input[type="text"]').keyup(function() {
    if($('input[rel="f1_1"]').val() != '' && $('input[rel="f1_2"]').val() != '' && $('input[rel="f1_3"]').val() != '' && $('input[rel="f1_4"]').val() != '' && $('input[rel="f1_5"]').val() != '') {
       $('input[rel="f1_submit"]').removeAttr('disabled');
    } else {
		 $('input[rel="f1_submit"]').attr('disabled','disabled');
	}
 });
	
	$('input[type="text"]').keyup(function() {
    if($('input[rel="f2_1"]').val() != '' && $('input[rel="f2_2"]').val() != '' && $('input[rel="f2_3"]').val() != '' && $('input[rel="f2_4"]').val() != '' && $('input[rel="f2_5"]').val() != '') {
       $('input[rel="f2_submit"]').removeAttr('disabled');
    } else {
		 $('input[rel="f2_submit"]').attr('disabled','disabled');
	}
 });
	
$('input[type="text"]').keyup(function() {
    if($('input[rel="f3_1"]').val() != '' && $('input[rel="f3_2"]').val() != '' && $('input[rel="f3_3"]').val() != '' && $('input[rel="f3_4"]').val() != '') {
       $('input[rel="f3_submit"]').removeAttr('disabled');
    } else {
		 $('input[rel="f3_submit"]').attr('disabled','disabled');
	}
});

but I assume this is just a lame way of input validation…

[John_Betong]

Has the old site some sort of site specific verification that the new site is lacking?

edit:
Google Webmaster Tools has optional HTML page to be saved in the site root or a meta tag on every page.

[McCloud]

hmm, not sure.

@John_Betong

Google Webmaster Tools has optional HTML page to be saved in the site root or a meta tag on every page.

could you elaborate on this a bit more ? I don’t see the connection between GWT and the form submission / redirect.

[John_Betong]

Your new site is submitting data to Google’s secure server. Google checks to ensure your site is registered and has been validated.

Because your site fails Google’s validation checks it does not process the received data and directs you to a welcome page.

It is necessary to register your new site with Google.

This problem seems similar to Google Analytics. Without verification I could have numerous sites sending analytical data and hoping to boost a single sites statistics. The verification has to be unique and match the sending site’s url.

[McCloud]

ah, I see.
But I don’t think this is the case… as as I said, I don’t have a problem submitting the data itself. The thing is, that after submission, it redirects by default to the google forms thank you page. Instead, I need it to redirect to a custom thank you page on my own domain.

[John_Betong]

@McCloud

onsubmit=“window.location=‘thankyoupageurl’”

Is there any JavaScript on the old site page that has not been included on the new site page?

[snowmang]

Are you ok with using the action attribute in the form tag?

[John_Betong]

@snowmang

Are you ok with using the action attribute in the form tag?

In the original post the form worked OK on the old site using this script:

<form 
    action="https://docs.google.com/a/sheeturl" 
    method="post" 
    target="hidden_iframe1" 
    onsubmit="window.location='thankyoupageurl'"
>

It appears that either JavaScript is missing or the target hidden_iframe1 is missing.

Perhaps CTRL-F12 to activate the debugger may show some errors.

[McCloud]

@snowmang why wouldn’t I be… is there some issue with it in terms of security ?

@John_Betong
Now what I’ve noticed is that it does indeed redirect to the page I want, but also opens the Google forms thank you page on top of that, in a new tab.
So I added

		jQuery('#submitForm').click(function(event){
  event.preventDefault();
});

to prevent this… but now the submit button does not do anything at all.

[John_Betong]

I have moved this topic to JavaScript and hopefully someone can help.

[McCloud]

thank you. Yes, now it definitely makes sense, as the solution will be JS based.

[McCloud]

Anybody ? I though this was really easy and that only I am stupid…

[Paul_Wilkins]

@McCloud

Anybody ? I though this was really easy and that only I am stupid…

This will be easy for us to solve for you when we can take a detailed look at frame-based solution that the original page applies.

[McCloud]

hm, you mean the connection between Google Docs and how it inputs data to spcific fields ?

[Paul_Wilkins]

@McCloud

hm, you mean the connection between Google Docs and how it inputs data to spcific fields ?

No, that connection doesn’t seem to be relevant. It is the target="hidden_iframe1" piece that seems to be responsible for the beneficial effect that you are after.

So, if we can take a closer look at the rest of the code for that page, we should be able to help you further.

No JavaScript is required here at all.

[McCloud]

Ooh, you are right! Thank you for pointing this out…

Here’s the website. It does indeed use Iframes (which I wasn’t aware can be used for this purpose at all). Now I feel bad that I’ve overlooked it

I have managed to implement it, partially. I still have two issues:

1. the submit forms are pointing to iframe 1 and I can only see iframe 2 being defined in the code…
   I have solved this by simply poiting to hidden_iframe2 from the form.

2.The iframe has an onload IF function, checking for submitted - however I did not find any function or further definition to submitted on the site. That’s also the only issue I see in my site’s console.
`Uncaught ReferenceError: submitted is not defined

I thought submitted would be a pre-defined function within the html form, triggered after the form is submitted (obviously). As I can see, this is not the case…

Is it possible that the function is defined somewhere else in the website source code ? I tried to look for an effective way to search for specific filenames / terms within the whole website’s source code, but I don’t think this is possible.

The current state is that the form successfully submits the data without redirecting anywhere.
Which is already a step forward.

Thanks again Paul for bringing me on the right track with the Iframes =)