Reload form in dialog box without page reload - javascript

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.

Related

Redirect button via Javascript

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;
}

passing variable from a page to an already opened page with js or jquery

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);
}

Submit Form in DNN, typical answer not working

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();
}

jQuery plugin for submiting Forms

I have a Form like this in asp Classic ..
<form method="post" name="AddItemForm" id="AddItemForm" action="/files/includes/CartControl.asp" style="display:inline;">
// bunch of Hidden Fields.
Then a SUBMIT button.
action of the form takes all the hidden fields and then after processing them redirects user to a CART page.
now what I want to do is....I want user to click on ADD TO CART button, however I want user to stay on the product page while form submits to a new window (not a javascript new window...something like lightbox/colorbox/fancybox DIV etc).
I looked into many jQuery plugins but could not get a satisfied answer...which plugin is BEST for my case? any simple example?
basicly I want to submit to a new overlay div and within that DIV redirect user to a new page to show Product Info.
Thanks
It seems that you are looking for some functionality for asynchronous form submission. There is this jQuery AJAX Form plugin that provides AJAX functionality for forms. You will have something like:
$('#AddItemForm').submit( function() {
// Submit asynchronously
$( this ).ajaxSubmit( function() {
// Form processing is done
// Redirect to the shopping cart page
});
// Show a modal or a fancy "please wait" message
// Prevent default submission
return false;
});
You can find some info in this answer, the code from one of the answers:
$('input#submitButton').click( function() {
$.post( 'some-url', $('form#myForm').serialize(), function(data) {
... do something with response from server
},
'json' // I expect a JSON response
);
});
In "do something with response" you can take the data or url and load it into an overlay div.
If it's a URL, you can use jquery .load :
$('#result').load('ajax/test.html');
If it's html (or data which you wrap in html), just do
$('#result').html(theHTML)
the simplest way (in my view) is to add target attribute to the form which will open new window while the current page won't chage...

PHP and window.close in JavaScript

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.

Categories