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.

score 4 · Accepted Answer · answered Aug 10 '11 at 18:25

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 '11 at 18:25

Rafael Sedrakyan

2,171
9
31
41

1

`.contentDocument` works better in modern browsers than `.contentWindow` – Web_Designer Feb 12 '12 at 06:22
It is really strange - I have "Permission denied" message trying this, despite I use the same domain. Any ideas? – Anton Mitsev Sep 18 '14 at 08:27

score 1 · Answer 2 · edited May 23 '17 at 11:55

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 '17 at 11:55

Community

1
1

answered Aug 10 '11 at 10:07

MarutiB

874
2
8
17

I can`t create a form because my textarea is already inside a form and nested forms are not allowed. I can`t 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. – Rafael Sedrakyan Aug 10 '11 at 10:17
you dont need to create a form inside the form. you can create an invisible form as a child of – MarutiB Aug 10 '11 at 13:42
I have alreade solved this problem by changing methof of requesting frames content to: document.getElementById("upload_target").contentWindow.document.body.innerHTML=xmlhttp.responseText; – Rafael Sedrakyan Aug 10 '11 at 18:23

Update iframe content with ajax Post request

2 Answers2