Update iframe content with ajax Post request

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="formatTe开发者_Python百科xt (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.

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.

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