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

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.
electricinkAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
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
electricinkAuthor Commented:
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
hieloCommented:
where's the rest of the code? What type of button are you clicking?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

electricinkAuthor Commented:
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
hieloCommented:
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
electricinkAuthor Commented:
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
hieloCommented:
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
electricinkAuthor Commented:
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
hieloCommented:
>> 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
electricinkAuthor Commented:
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
electricinkAuthor Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.