Update iframe content with ajax Post request

Question

I am making my Rich text editor. I have a textarea and an iframe. I want to update an iframe content clicking on some button with ajax post request passing to it textareas value. Here is my html code:

<textarea name="myTextarea" id="text" cols="100" rows="10"></textarea><br> <br> <input type="button" value="B" onclick="formatText (myTextarea,'b');" /> <input type="button" value="I" onclick="formatText (myTextarea,'i');" /> <input type="button" value="U" onclick="formatText (myTextarea,'u');" /> <input type="button" value="P" onclick="formatText (myTextarea,'p');" /> <input type="button" value="strike" onclick="formatText (myTextarea,'strike');"/> <input type="button" value="h1" onclick="formatText (myTextarea,'h1');" /> <input type="button" value="h2" onclick="formatText (myTextarea,'h2');" /> <input type="button" value="h3" onclick="formatText (myTextarea,'h3');" /> <input type="button" value="h4" onclick="formatText (myTextarea,'h4');" /> <input type="button" value="h5" onclick="formatText (myTextarea,'h5');" /> <input type="button" value="h6" onclick="formatText (myTextarea,'h6');" /> <input type="button" value="center" onclick="alignText (myTextarea,'center');" /> <input type="button" value="left" onclick="alignText (myTextarea,'left');" /> <input type="button" value="right" onclick="alignText (myTextarea,'right');" /> <input type="button" value="justify" onclick="alignText (myTextarea,'justify');" /> <input type="button" value="preview" onclick="view(document.getElementById('text').value)"> <br><br><br> <iframe id="upload_target" name="upload_target" src="#" style="width:1000px;height:1000px;border:2px;opacity:0;filter:alpha(opacity=0);"></iframe>

And here is js view function:

function view(str) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } terms = "text="+str; xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById('upload_target').innerHTML=""; jQuery.noConflict(); (function($) { $('#upload_target').append(xmlhttp.responseText); })(jQuery); } } xmlhttp.open("POST","print1.php",true); xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xmlhttp.send(terms); document.getElementById('upload_target').style.opacity=1; }

I can`t put my textarea into a form and target it to the iframe on submit event, because the code above is just a part of my entire code and it is already inside a form. And nested forms are not allowed with w3c standards Thanks for replies.

Rafael Sedrakyan · Accepted Answer · 2011-08-10 18:25:58Z

4

The problem was in the method of requesting to iframes content. The right method is:

document.getElementById("upload_target").contentWindow.document.body.innerHTML=x‌mlhttp.responseText;

It is supported in all major browsers.

answered Aug 10, 2011 at 18:25

Rafael Sedrakyan

2,65911 gold badges36 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Web_Designer Over a year ago

.contentDocument works better in modern browsers than .contentWindow

Anton Mitsev Over a year ago

It is really strange - I have "Permission denied" message trying this, despite I use the same domain. Any ideas?

Community · Accepted Answer · 2017-05-23 11:55:34Z

1

Why can't you simply get the iframe and change the url with your get params after the ajax request is done ? If your iframe only works with GET. You can trigger POST requests also on the iframe by creating a dummy form and submit it from javascript More answers here

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Aug 10, 2011 at 10:07

MarutiB

9342 gold badges9 silver badges17 bronze badges

3 Comments

Rafael Sedrakyan Over a year ago

I cant create a form because my textarea is already inside a form and nested forms are not allowed. I cant use GET method because I am sending russian characters to print1.php file and it will not work in IE. Russian characters can be send only with POST method.

MarutiB Over a year ago

you dont need to create a form inside the form. you can create an invisible form as a child of <body>

Rafael Sedrakyan Over a year ago

I have alreade solved this problem by changing methof of requesting frames content to: document.getElementById("upload_target").contentWindow.document.body.innerHTML=xmlhttp.responseText;

Collectives™ on Stack Overflow

Update iframe content with ajax Post request

2 Answers 2

2 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Linked

Related