All the code you need is below. This code will let you easily add FORMs that go to other websites, like Paypal, Constant Contact or Aweber, to your Asp.net or DotNetNuke website. This code lets you break out of an IFRAME and stay in the same window or open up in a new window.
The problem is Asp.net, and therefore DotNetNuke, only allows one FORM per page.
Other websites, like Paypal, Constant Contact and Aweber, require you to add FORMs to your webpage. This is a problem on Asp.net websites.
The solution is to put your form in an IFRAME. The IFRAME lets you have a page within a page.
This leads to another problem. When you click a button or link in the IFRAME, the new page opens in the tiny IFRAME and your visitors cannot see what is there.
What you need is for the new page to open in a new window or replace the entire window of the current page.
All the code you need to solve this problem is here.
If you are coding the FORM or links yourself, you can break out of the IFRAME by following these instructions.
www.programmer.bz/Articles/tabid/159/asp_net_sql/122/How-to-Break-Out-of-an-Iframe.aspx
However, if you have a script generated from another website and you cannot or do not want to update the script by hand, you can use the code here.
For example, if you use Aweber.com, Aweber has a useful feature that generates a subscribe form for your website via a javascript.
If you are using DotNetNuke or Asp.net you cannot use that script on your website as is. You have to put the script in an IFRAME. However, the script does not break out of the IFRAME and you get the Thank You page, inside the IFRAME.
Here is some code you can use to add a target tag to the FORM, to break out of the IFRAME.
In the example code below, all the files will need to be in the same folder. You can put the files anywhere you want as long as you qualify the file references.
This useful piece of code will set a particular attribute in every item in a collection. Put this in a file.
Step: 1
File: basecode.js
//---------------------------------------------------------
function basecode_Attribute_Set(item, attribute, value) {
var newattribute = document.createAttribute(attribute);
newattribute.value = value;
item.attributes.setNamedItem(newattribute);
}
//---------------------------------------------------------
// Change same attribute on all items
function basecode_Attribute_Set_All(collection, attribute, value) {
if (!collection) return;
if (!attribute) return;
value = value || "";
var n = collection.length;
for (var i = 0; i < n; i++)
basecode_Attribute_Set(collection[i], attribute, value);
}
//---------------------------------------------------------
Use target="_blank" to open in a new window. You can call the above function passing in the document's forms collection, like this. You will use this later, so you do not need to do anything with this for now. Just showing you what it looks like.
<script type="text/javascript">
basecode_Attribute_Set_All(document.forms, "target", "_blank");
</script>
To put this all together, you need to (1) put the IFRAME on your DotNetNuke or Asp.net page, and (2) you need to create the file that the IFRAME loads, which contains the above code along with the script from Aweber or whomever.
To make the code more portable, package everything up in scripts.
Here is exactly what you need to do to put an IFRAME, that contains a script, that generates a FORM, on an Asp.net page, for two zuzim.
This is what you put in your webpage, where you want the FORM to go. Short and sweet, just one line.
Step: 2
Put in your webpage, say: mywebpage.aspx
For testing, put in file: mywebpage.htm
<script type="text/javascript" src="myiframe.js"></script>
This loads a javascript that will build the IFRAME.
The nice thing is if you use the FORM in different places, you can change the script in one place without having to touch the pages.
Create the file myiframe.js with this code.
Step: 3
File: myiframe.js
//---------------------------------------------------------
function basecode_Iframe(src, height, width) {
var out='<iframe marginheight="0"'
+ ' src="' + src + '"'
+ ' frameborder="0" marginwidth="0" scrolling="no"'
+ ' style="padding:0px; height:' + height
+ '; width:' + width
+ ';"></iframe>';
document.write(out);
}
//---------------------------------------------------------
basecode_Iframe("myiframe.htm", "35em", "15em");
//---------------------------------------------------------
In the above code, change the height and width parameters to match the contents of your IFRAME.
You could handcode the IFRAME in html directly in your page, but you see those last two parameters. They control the size of your IFRAME. By keeping these in the script, you can change the size of your IFRAME if you change the contents, without having to update your pages.
Create the file myiframe.htm with the whatever you want in your IFRAME.
Step: 4
File: myiframe.htm
<html><head>
<script type="text/javascript" src="bronze.js"></script>
</head>
<body>
<script type="text/javascript" src="http://forms.aweber.com/form/55/54321.js"></script>
<script type="text/javascript">
bronze_Attribute_Set_All(document.forms, "target", "_blank");
</script>
In the above code there is a reference to forms.aweber.com. Change this to whatever your external script is.
This is the code that caused the problems originally, because it generated a FORM inside an Asp.net page. So, you moved this script to an IFRAME, but the FORM stayed in the IFRAME after you submitted it. The Thank You page was displayed in the IFRAME and it was hard to read.
You solved the problem with the last line in yellow, which adds target="_blank" to the Aweber FORM.
To summarize, you now have these files.
- basecode.js - the code to add the target attribute to the FORM inside the IFRAME.
- mywebpage.aspx (or mywebpage.htm for testing) - the page in which you put the simple, one line of script that loads the IFRAME and FORM. You can put this code on as many pages and websites as you like.
- myiframe.js - the script that generates the IFRAME. You only need one version of this file. The only thing you need to change in this file is the size of the IFRAME.
- myiframe.htm - the file with the code that goes in the IFRAME along with the call to the function that adds the target="_blank" attribute to break out of the IFRAME. You only need one version of this file. When you want to change your form, you change only this file and your changes will show up wherever you have placed the form.
By Andrew Weitzen, Bronze Inc. (c) 2010
Bronze is the publisher of several online Internet journals including: InternetHandholding.com, DomainNames.gs, DotNetNuke.bz, Programmer.bz, Software.vg, WebHosting.vg