I've created a form on my website using Google Forms, and through a couple of tutorials I've prevent the page from navigating to the Google Forms thank you page and instead using my own thank you page.
The way this has been done is using a hidden iframe as a target on the form and then the iFrame checks if the form has been submitted successfully before switching the window to my thank you page.
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted == true)
{window.location='https://www.normadorothy.com/sample-thanks';}">
</iframe>
This works fine and submits the form before showing the thank you page, however if the user then clicks the back button, the form is submitted again.
I've tried console.log(submitted) which returns false so not sure why this is being submitted twice.
Just for clarity, the form code is:
<form id="sample-form" class="validate" action="google-url" method="post" target="hidden_iframe" onsubmit="return validate();">
The validate function checks all the fields, sets submitted to true and then submits the form.
Any help would be great, I've been banging my head against a wall with this!
I would guess this is happening because the back button tries to take you back to the iFrame's last known state (which is the form POST URL) and not the "raw" state you expect. You could try writing the iFrame using JS on the parent page to work around this:
var iframe = document.createElement('iframe');
iframe.onload = function() { if(submitted == true) {window.location='https://www.normadorothy.com/sample-thanks';}};
iframe.style.display = 'none';
document.body.appendChild(iframe);
Related
I have a contact form inserted into my website via an iframe. I am unable to modify the contact form but I can insert some javascript within the iframe itself. I would like to have the contact form redirect the user to a new page upon successfully submitting the form. That new page should load in the parent page and not the iframe. Any ideas how I could accomplish this? This is the page i'm trying to modify http://www.oneupland.com/contact
After a successful submission try executing either of the below
window.location.href="https://stackoverflow.com"
or
window.location.replace("http://stackoverflow.com");
Not really sure if u can access it but u can try something like this..
// keep a reference to the window element of the iframe :
var winIFrame = window.frames["myFrame"].contentWindow;
// with this you can access any DOM element in the iframe
winIFrame.document.getElementById("myForm").onsubmit = function() {
window.location.replace("http://your_redirect.com");
return false;
}
Firefox version is 37.0.2
I have an MVC application where I submit forms in order to carry out CRUD functions. I POST to a hidden iframe, then refresh the page after the POST so that the user can see the new data after the database has been updated. Here is the javascript function that takes care of adding a new user:
$('#submitNewUser').click(function () {
document.getElementById("newUser").submit();
$('#newUser').remove();
location.reload();
}
submitNewUser is the button for submitting the form (id and name). newUser is the name and id of the modal form that is submitted. So on click of the submitNewUser button, the newUser form is submitted, then the newUser modal window is removed, then the page is reloaded.
This function works as intended (or at least, as I intended it to) in Chrome and IE. In Firefox, the page reloads without submitting the form. There are no errors in the console, it just looks like a page refresh occurs. When I comment out the line: location.reload();, the form submits but I then have to manually refresh the page in order to see the data changes.
I've searched for similar issues but thus far have been unable to fix the problem. Things I've tried:
changing the name parameter of the iframe to NAME
removing any capital letters from the name and id parameters of the iframe
using window.location = window.location instead of location.reload()
I changed the input type from button to submit and modified the javascript function to be an onSubmit of the form, but the behavior is identical to my original reported issue
I removed the target parameter from the form, and then removed the location.reload() line from the javascript. The behavior is then identical across all browsers: the form gets submitted and the page is redirected to my "Success!" page. This tells me that there is something going on with the location.reload() and how it interacts with the iframe in Firefox. Here is my iframe code:
<iframe id="new_user_hidden_frame" name="new_user_hidden_frame" class="hide"></iframe>
And here is where I set the target for my POST method:
<form id="newUser" method="POST" action='<c:url value="/createUser.htm" />' target="new_user_hidden_frame">
EDIT:
As per the accepted answer, Firefox was actually the only browser that was technically handing this correctly! I was refreshing the page before receiving a response, so the behavior was 100% appropriate. I added the following to my function so the page won't refresh until a response has been received:
$.ajax({
success: function() {
window.location.reload(true);
}
});
As your code says you are trying to reload page before getting the response, so request is not completed till, for this you have to delay the reload or better way submit form using ajax and reload page in the callback function.
I am trying to submit a mailchimp form from within my DNN (DotNetNuke) site. Typically, you just remove the form tags and put some javascript in the onclick event of the submit button...like here. This works and you can see as such here.
But, I am using this popup module, as I want this form to pop up when someone comes to the site. And in this configuration it does not work. It will submit the form to the designated URL, but no form data is passed. This page is here.
A couple of observations:
When you view the page source, the popup form is within the form tags, yet a this.form returns null in the script.
When you inspect the submit button element in Chrome, you see that the html form is then OUTSIDE the form tags.
So maybe there is some javascript with this popup module that is moving the DOM element on page load???
I created a js function to call on the input button submit; code is as follows:
function submitSubscription(clickedElement){
$form = $('body').find('form');
$form.attr('action', 'http://InciteResults.us2.list-manage1.com/subscribe/post?u=6d82b6a028c94cc75005eb4fe&id=1c7ceabac4');
$form.submit();
}
Note: in this function clickedElement.form is returning null.
Because your content is not in a <form>, you're going to put it inside a <form> in order for your script to work. You can either dynamically create a <form> element, or move your content back inside the main <form> when you submit. Try something like this:
function submitSubscription(clickedElement){
var $form = $('<form></form>', { action: 'http://InciteResults.us2.list-manage1.com/subscribe/post?u=6d82b6a028c94cc75005eb4fe&id=1c7ceabac4' });
$('#mc_embed_signup').wrap($form);
$form.submit();
}
I'm using the following html beginning form code:
<form id="uploadpic" method="post" target="uppic" name="upform" action="/cgi-bin/inpost.cgi" enctype="multipart/form-data">
to try and load a page, however the page opens in a new tab.
I don't think this is part of the problem, but I'll include this anyways. This is the submit button code in the form:
<input name="filename" id="filename" type="file" onchange="submitFormAfterImageCheck();" />
And this is the function it calls:
function submitFormAfterImageCheck()
{
if(/(\.jpeg|\.jpg|\.JPG|\.gif|\.png|\.tiff)$/.test(document.getElementById("filename").value))
{
nogo = "go";
document.getElementById("uploadpic").submit();
$("#upload").html("<center>LOADING...</center>");
$('#link').hide();
$('#update_post').hide();
}
else
{
alert("You can only upload an image.");
}
}
iFrame code:
<iframe id="uppic" name="uppic"></iframe>
Why isn't this submitting to the iframe?
I also faced the same problem and found a work around.
When you set the target attribute of a form statically (as you are doing), even if the target iframe is in the same window, response is received in a new tab/window.
You can override this by setting the target attribute of form dynamically using javascript/jQuery.
javascript:
document.getElementById(formId).target = iframeId;
jQuery:
$("#formId").attr('target', iframeId);
Hope this helps.
If you are not having issues with your DOM elements (as #johndoe noted in his answer) and you are still having the problem when setting the target using Javascript (as #naren noted in his answer) then this should solve the problem:
Give your iFrame a name attribute and set your form target to that value:
<iframe name="myTarget"></iframe>
<form target="myTarget" method="post" ...></form>
The placement of the DIV element seemed to be the problem. While it was placed within the form tags, it never redirected once the form submitted. When removed from the form tags, it redirected fine.
I have a form with a submit button and it works fine, but I now have a user request to make the form get saved (posted to save action) if a link on the page is clicked and the form is "dirty".
I've got the logic in place by having an isDirty JavaScript variable, now I would like to post the form from the JavaScript function when it is dirty.
My form declaration is as follows:
<form id="formSmart" action="<%= ResolveUrl("~/SmartForm/Proceed") %>"
method="post" enctype="multipart/form-data">
and my JavaScript is:
function checkLink() {
if (isDirty) {
$("#formSmart").submit();
}
}
The proceed action doesn't get called, yet when I click the submit button on the form it works fine. What am I doing wrong in the JavaScript?
Note: The call to checkLink() works fine, the ultimate problem is that $("#formSmart").submit(); is not posting to the Proceed action.
You have the correct way of submitting the form based on what you have posted and the names match up.
Are you sure you are calling checkLink and is isDirty equal to true?
Put and alert('Test'); right before you submit and in the if scope.
EDIT: To hookup your event you need to do the following:
$('#yourLinkID').click(checkLink(); return false;);
Note the return false which will cause your link to not execute a navigate. If you want the link to navigate, you can just remove that part.
Sounds like the requirement is that 'a link on the page is clicked'.
Perhaps attach this event to all the <a> tags on the page.
$(document).ready(function() {
// all <a> tags get the checkLink attached to them
$("a").click(checkLink());
});
your problem is that the browser navigate before the page performs your submit.
the solution is suspending the navigation till you save the form.
The UGLY solution:
you could do it buy saving the clicked url at a hidden field,
returning false to stop the navigation,
and after submit check for a value there and if it exists do navigation
A better solution:
post the form via ajax and after the ajax call completes(no need to check for success or error) perform the navigation(to make it really easy just use ajaxForm ajaxForm plugin)
the only problem with this solution is if the link has target="_blank" because then you have to use window.open which might be blocked by popup blockers
you can play with a simple jsbin sample i prepared showing this
this example post some values to an older version of this page + navigate to google, open fiddler and see that it first post and then navigate.
If you went to the jsbin page stop reading here
here is the Html:
<form id="formSmart" action="http://jsbin.com/oletu4/edit" method="post">
<input type="text" name="someLie" />
<input type="text" name="someLie2" />
<input type="submit" value="submit" />
<a id="lnkNavOut" href="http://www.google.com">www.google.com</a>
here is the JS:
$(document).ready(function(){
$("#lnkNavOut").click(function(){
var jqFormSmart = $("#formSmart");
//check here if the form is dirty and needs to be saved
var jqClickedLink = $(this);
$.ajax({
url: jqFormSmart.attr("action"),
type: "POST",
data:jqFormSmart.serialize(),
complete:function(){
location = jqClickedLink.attr("href");
}
});
return false;//stop navigation
});
});