?
Solved

How to reset a form target to iframe without reseting the form

Posted on 2008-11-04
11
Medium Priority
?
1,747 Views
Last Modified: 2012-05-05
I have a form on a page, when the user clicks a button, javascript sets the action and then submits it.  The target of the form is an Iframe, so that when they submit it opens in an iframe instead of a new window.  The form tag looks like this:

<form action="" method="post" name="form_name" id="form_name" target="iframe_name">
The iframe tag:
<iframe name="iframe_name" id="iframe_name" width="0" height="0" scrolling="no" frameborder="0"></iframe>

The javascript:
var iframeSrc = webpage.html;
document.getElementById('iframe_name').width = '400'; //Re-sizes Iframe
document.getElementById('iframe_name').height = '275'; //Re-sizes Iframe
document.forms['form_name'].action = iframeSrc;
document.forms['form_name'].submit();

Everything works great.....until I hide the iframe (In case they want to make a change to the form inputs) and try to click the button a second time.  On the second time around
the submit causes another window to open up.  I can stop this from happening by forcing the page to reload when they close out of the iframe, however they then lose all entered data.

Any ideas on how to force it to target the iframe even after its run once and the iframe has been hidden.

P.S. I am hiding the iframe by setting the style.visibility to hidden so that the element still exists.
0
Comment
Question by:electricink
  • 6
  • 5
11 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 22879947
if you want to explicitly specify the target, try:
var iframeSrc = 'webpage.html';
document.getElementById('iframe_name').width = '400'; //Re-sizes Iframe
document.getElementById('iframe_name').height = '275'; //Re-sizes Iframe
document.forms['form_name'].action = iframeSrc;
document.forms['form_name'].target = 'iframe_name';
document.forms['form_name'].submit();

Open in new window

0
 

Author Comment

by:electricink
ID: 22880031
Thank you for the speedy reply.

When I explicitly specify the target, it doesn't seem to help.  At least not after it has been submitted once.
Is there something else that needs to be explicitly reset after it has been submitted?
0
 
LVL 82

Expert Comment

by:hielo
ID: 22880099
where's the rest of the code? What type of button are you clicking?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:electricink
ID: 22880350
As I said, when I click on the "Send Copy" button the first time, everything works great.  When I "close" (read: Hide) the iframe and try clicking the "Send Copy" button a second time it opens a new window instead of submitting the form to the iframe again.
<form action="" method="post" name="form_name" id="form_name" target="iframe_name">
<input type="button" name="btncopy_1" value="Send Copy" onclick="subCopy();" class="button">
</form>
Function subCopy(){
   var iframeSrc = webpage.html;
   document.getElementById('iframe_name').width = '400'; //Re-sizes Iframe
   document.getElementById('iframe_name').height = '275'; //Re-sizes Iframe
   document.forms['form_name'].action = iframeSrc;
   document.forms['form_name'].target = 'iframe_name';
   document.forms['form_name'].submit();
}
 
webpage.html has a link:
<a href="Javascript://" onclick="closeIt2();">Close</a>
 
function closeIt2(){
   top.document.getElementById('iframe_name').style.visibility = 'hidden';
}

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 22880776
I believe the reason is because it is actually hidden. Instead of visibility='hidden' first "hide" the frame by positioning it off screen:

<iframe name="iframe_name" id="iframe_name" width="0" height="0" scrolling="no" frameborder="0" style="position:absolute;left:-100em;top:-100em;"></iframe>
 
Then if you actually need to "see" the iframe:
Function subCopy(){
   var iframeSrc = webpage.html;
   var ifr = document.getElementById('iframe_name');
 
   //adjust these two values until it appears where you want it
   ifr.style.left="0px";
   ifr.style.top="0px";
 
   ifr.width = '400'; //Re-sizes Iframe
   ifr.height = '275'; //Re-sizes Iframe
   ifr.action = iframeSrc;
   ifr.target = 'iframe_name';
   ifr.submit();
}
 
function closeIt2(){
    var ifr = top.document.getElementById('iframe_name')
    ifr.style.left = '-100em';
    ifr.style.top = '-100em';
}

Open in new window

0
 

Author Comment

by:electricink
ID: 22881220
Moving it off screen didn't change the results on the second submit.  (I moved it off screen without changing the visibility)
Also I tried adding code to make the iframe visible again as shown in the snippet......same results

From what I gather it should do the same thing, that is eliminate the visibility as being an issue, and yet it still wants to open a new window the second time around.  Thats why I think that there is something that needs to be explicity reset in my JavaScript before re-submitting the form.... Either that or it isn't possible to submit to an iframe a second time around.....
Function subCopy(){
   var iframeSrc = webpage.html;
   document.getElementById('iframe_name').width = '400'; //Re-sizes Iframe
   document.getElementById('iframe_name').height = '275'; //Re-sizes Iframe
   // Make iframe visible again
   document.getElementById('iframe_name').style.visibility = 'visible';
 
   document.forms['form_name'].action = iframeSrc;
   document.forms['form_name'].target = 'iframe_name';
   document.forms['form_name'].submit();
}

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 22881379
Is this what you actually have:
  var iframeSrc = webpage.html;

If so, that IS an error and since it never makes it to the submit() line, it would submit to the current page, not to the iframe. It should be in quotes:
  var iframeSrc = "webpage.html";
0
 

Author Comment

by:electricink
ID: 22881543
I actually do have it in quotes, and I did some dev work on a different page, and coding exactly what we have to this point (in this thread) is working like a charm, so I must be missing something in my original code.. Please bear with me as I try to find the difference.
0
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 22881592
>> is working like a charm, so I must be missing something in my original code
Suggestion: install firebug in Firefox and load your page on Firefox. If there are any javascript errors, you will notice them easily.
0
 

Author Comment

by:electricink
ID: 22886965
I installed firebug, however the javascript wasn't throwing any errors.  I did hunt down the problem tho.

The page that I was loading in the iframe had a window.name set in it.  As it turns out if the window.name is different then the iframe name it causes all kinds of problems, so just a note to anyone who uses the window.name in javascript -- if you load the page in an iframe make sure the name of the iframe and the name you give window.name are the same.  

I do thank you hielo for all the help.
0
 

Author Closing Comment

by:electricink
ID: 31513252
Thanks for all the speedy help, I have awarded you the points, the answer turned out to be very discrete, check the post as I have included what I needed to do to fix the problem.

Thanks again
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question