Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Submitting IFrame form from main page not working right

Status
Not open for further replies.

kirtc

Programmer
Nov 30, 2006
2
US
I have an IFrame that contains a form and a link on the main page to submit the form in the IFrame. If I use a submit button in the form in the IFrame, then the form submits properly. It does not work properly if I try to submit with JavaScript from the main page. The form in the IFrame posts back to the same page. I have supplied some code snippets below. They are not complete. Just examples to show the problem.

You can see there is an alert to display the contents of notes_1 on the form submit within the IFrame. There is also an alert at the end of the IFrame page to show the contents of note_1 upon load. If I change the contents of notes_1 and press the submit button in the IFrame, the first alert will show me the current content of notes_1 (the changed value). Upon reloading, the alert shows the contents of notes_1 to be the original value from the db because I'm not actually saving changes yet.

You see that all the Save link does on the main page is click the same submit button I pushed manually above. But when I do this the alert shows me the OLD value of notes_1 before I typed in something else. The alert on the bottom of the IFrame page happens showing that the page has reloaded, but IT DOESN'T REFRESH THE IFRAME. The IFrame continues to show what I typed into the field before pressing the Save link.

Two things I do not understand: 1) Why does posting from the main page give me an alert with the old value? and 2) why does the IFrame not refresh upon the post? The post was successful but the IFrame doesn't show so.

This is HTTPS if that makes any difference.

Thanks,
Kirt

<!-- This is the main doc snippet -->
<fieldset>
<legend>&nbsp;Emergency Contacts&nbsp;&nbsp;<a href="#" onclick="SaveEmergencyContacts(); return false;">[Save]</a>&nbsp;</legend>
<iframe SRC="EmergencyContacts.php" name="ECIframe" id="ECIframe" width="622" height="210" frameborder="0"></iframe>
</fieldset>

<script>
function SaveEmergencyContacts()

{
document.frames['ECIframe'].document.getElementById('test').click();
}
</script>


<!-- This is the IFrame snippet -->
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form action="EmergencyContacts.php" method="post" name="ECForm" id="ECForm"
onsubmit="alert(document.getElementById('notes_1').value);">
<input type"text" name="notes_1" id="notes_1" value="This is a test">
<input type="submit" name="test" id="test" value="Click Me">
</form>

<script>
alert(document.getElementById('notes_1').value);
</script>
</body>
</html>
 
Instead of calling the "click" method of the button, you would be better off calling the submit method of the form. You should also note that doing this bypasses any onsubmit handler, so you'd need to call this manually first.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Hi Dan,

Yes. Thanks for the reply, and sorry for not getting back to you sooner. I just got busy with other things. Using the click method on the button is not something I would normally do. I only did it that way because when I pushed the button manually it worked but when I clicked it through code it didn't. It was a test trying to track down what was going on.

I inherited this app from someone else. The problem basically boiled down to JS becoming confused by having multiple copies of the same object with the same name on the main page. The page in question is using a tabbed interface. The form displayed upon clicking a particular page is actually copied (using innerHTML) into a div for that tab from a hidden div on the page that holds all possible forms for the tabbed interface. Not sure if that makes much sense. The bottom line is that this "copying" creates two instances of the form objects on the page and that confuses JS. I rewrote that code to ensure there is never more than one instance of a particular form on the page and now everything seems to work.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top