Showing posts with label iframe. Show all posts
Showing posts with label iframe. Show all posts

Tuesday, June 10, 2008

Posting HTML Form and iframe's form data together

Posting HTML Form and iframe's form data together

HTML Form and iframe's form data can be posted simultaneously using the same submit. Whats needed to be done is that first we post/submit the iframe's form data and then post/submit the HTML form's data.

main HTML code

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
function selectSubmit(argThis)
{
// submit the iframe and then the form
iframepage.myiframeform.submit();
document.mainFormPage.submit();
}
</script>
</head>
<body>
<form name="mainFormPage" action="#" method="post">
<iframe id="iframepage" name="iframepage" src="iframehtml.html" width="100%" height="270px" frameborder="0" scrolling="no">
</iframe>
<label>lastname: </label>
<input type="text' id="id2" value="some lastname"/>
<label>city: </label>
<input type="text' id="id3" value="some city"/>
<input type="submit" id="savebtn" onclick="javascript:selectSubmit(this)"
value='save button' />
</form>
</body>
</html>


IFRAME HTML code

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<form id="myiframeform" name="myiframeform" action="#" method="post">
<label>name : </label>
<input type="text' id="id1" value="some name"/>
</form>
</body>
</html>

Wednesday, February 27, 2008

Accessing javascript methods from an IFRAME

If you need to access any javascript methods defined in the parent/main webpage from an IFRAME make use of the top property followed by the javascript method name ex. top.myfunction() ; where myfunction() has been defined in the parent/main webpage.


vice-versa to access methods from within an IFRAME in the parent/main webpage, you will need the following syntax:
window.<>.<> ex.window.sub_frame.subpagedisplay(); where sub_frame is the frame ID defined in the parent/main webpage and subpagedisplay() is the javascript function defined in the subpage or in the iframe src property.



NOTE: Both the html files shown below need to be on the same DOMAIN as browsers do NOT allow cross-site scripting.

complete parent/main webpage code: mainHTML.html


<html>
<head>
</head>
<iframe id="sub_frame" name="sub_frame" src="sub_frame.html"></iframe>

<script type="text/javascript"><!--
function myfunction()
{
alert('main page function called');
}

function subpagefn()
{
window.sub_frame.subpagedisplay();
}
//-->
</script>
<body>
main page
<a href="javascript:subpagefn();">call sub page function</a>
</body>
</html>




complete subpage/IFRAME webpage code: sub_frame.html

<html>
<head>
<script type="text/javascript"><!--
function showme()
{
top.myfunction() ;
}

function subpagedisplay()
{
alert('in sub page');
}
//-->
</script>
</head>
<body>
iframe page
<a href="javascript:showme()">some link</a>
</body>
</html>