I have an HTML textarea, and an IFrame. On a button click, I would like to be able to load the content of the textarea into the IFrame.
For example, when the user types in Hello World into the textarea, and presses the submit button, the text Hello World would show up in the IFrame.
Any ideas on how this could be done? Thanks in advance.
NOTE: I would like to use JQuery, but I think I'll have to use PHP for this. It sounds more server side.
You can target the iframe with jquery only:
<html>
<head>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#btnSubmit').click(function () {
var content = $("#test").val();
$('#iframe1').contents().find('p').html(content);
});
});
</script>
</head>
<body>
<textarea name="test" id="test" rows="5" cols="40"></textarea>
<button id="btnSubmit">Post to iFrame</button>
<iframe name="iframe1" id="iframe1" src="test2.html"></iframe>
</body>
</html>
Your iframe content page, in this case "test2.html" would have something like this:
<html>
<body>
<p>[intro text or whatever]</p>
</body>
</html>
Here is a previous S/O post with a similar issue: Selecting an element in iFrame jQuery
var content = $("#myTextarea").val();
$('#myIframe').contents().find('html').html(content);
(edit) ...and #myIframe should initially be:
<html></html>
