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;
}
Related
I have a first page "main.php" with a button opening a pop-up "pop.php" with a form where i can check different options. After choosing the different option and when pressing "ok", is it possible with js or jquery to pass the result of the "pop.php" form to a field in "main.php" without reloading it?
Thanks for your answers!
Yes. With JavaScript it is possible, with jQuery it's easier.
jQuery on pop.php
<script>
jQuery(function($){
// when your popup form submits this will be called
$('form').submit(function(event){
// this stops the form from submitting
event.preventDefault();
// this sends the form data to a JS function on main.php
window.parent.popup_data_process($(this).serialize());
// this closes this window because we don't need it anymore
window.close();
});
});
</script>
JS on main.php
<script>
// this function is the receiver which will process your form data
function popup_data_process(serializedData)
{
// this displays the data to your console
console.log(serializedData);
}
</script>
You can access the parent window using the window.parent property. and call any global level function you wish
var popUp = window.open("pop.php");
inside pop.php
if(!!window.parent){
window.parent.someFunction(dataToPadd);
}
I have a wordpress page that is using a modal (jQuery UI Dialog) window with a form in it. The modal works fine, however it has a form in the window with this form tag (content is loaded from a DIV):
<form id="inline_ddateform" onSubmit="javascript: return pCalc(this);">
When the form is submitted the main page reloads and the variables are coming back in the main site URL.
Before form submit: www.site.com
After form submit: www.site.com?m=4&c=8
How can I bring the variables into the form in the modal with the values that JS is returning? It's needed to display some info in the modal.
Use the function here: http://papermashup.com/read-url-get-variables-withjavascript/
It has a function that gets url variables for you. Copy it into your project then use like so:
var variables = getUrlVars()
var m = variables["m"]
alert(m);
Then you can use that where you like.
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 trying to achive the following:
On page A we have an access restricted Link to page B. The access restriction is handled on the server side in PHP.
When a user clicks on this link to page B we display a modal dialogue on page A (via javascript) with a form, having the link's href (B) as the action. (To give the user an immediate feedback. The fallback is to redirect him to a login form that redirects him to the site he wants to access.)
This system works quite well.
But now comes my question:
We have access restricted links that should be opened in a new window.
Now if I use target="_blank" on the form the user stays logged out on the page he came from (A), that is still open in the background.
Is there a way to reload the page (A, in the background) right after the form has been submitted to the new window (B)?
My first idea was to use window.location.reload(); in the submit handler on page A.
This didn't work in chrome and from what I understand could create a race condition.
Another idea would be to log the user in via an ajax call and open a new window through javascript. Is there a way to do this without having to deal with pop-up blockers?
I implemented the idea of lostsource (see below) with one slight addition.
As I need to reload only once, the timer of setInterval can be stopped if the cookie changed.
var ri=setInterval(function() {
if(oldCookie != document.cookie) {
// assuming a login happened, reload page
clearInterval(ri);
window.location.reload();
}
},1000); // check every second
I still love the idea. stackoverflow is awsome!
Assuming you're storing PHP session information inside a cookie, you might be able to monitor your document.cookie for changes.
Before submitting the form store the value of the current cookie and monitor it for changes with a timer:
form.onsubmit = function() {
var oldCookie = document.cookie;
var cookiePoll = setInterval(function() {
if(oldCookie != document.cookie) {
// stop polling
clearInterval(cookiePoll);
// assuming a login happened, reload page
window.location.reload();
}
},1000); // check every second
}
On the parent page, do you have any visual/functional changes because of the login? As in any new actions possible?
If not, then you dont have to do anything as you would be checking for login on every action from the parent page, you can check for permissions along with that.
If there are changes or additional functionalities, you can call a javascript function in the parent, say reloadMe, using window.opener.reloadMe()
Why not just a simple setTimeout
setTimeout(function(){ location.reload(); }, 1000);
It is a bit hacky, but seems appropriate for your situation.
I have a problem. I have a page that when you click a button, a popup with a form is shown. So, I complete some data and I submit. What I want to do is, to submit the form, close the form and refresh the parent page. I don't want to do it with AJAX.
The problem is that in my parent page I have to refresh content with the input information of the form.
So when I refresh, sometimes the data is shown and sometimes not. Do you know why this could happen?
I just use onsubmit="refreshParent()" in my form. The info is stored always in my database, so I think the problem may be that sometimes the refresh catches the new info and sometimes not.
function refreshParent() {
window.opener.location.reload();
window.close();
}
I use this to reload the page that opened a popup window:
<script language="JavaScript">
<!--
function reloadParentPage() {
window.opener.location.href = window.opener.location.href;
if (window.opener.progressWindow) {
window.opener.progressWindow.close()
}
window.close();
}
//-->
</script>
By the way, the code above is called by a link or button in the popup page.
You have a race condition between the script doing the insert and the script reloading the parent.
The solution is to call refreshParent on the page after the submit - that way you know the data is in the database. You don't even have to do it on document ready - return a stub page that just defines and calls refreshParent in the head tag.
In PHP when you run post script, at the end, include this code :
echo '<html><script language="javascript">
parent.location.href="http://'.$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"].'"; // or any other url
</script></html>';
This will output a javascript that will reload the windows.