title: rendering javascript in textarea in php
body: <p>I have one form, textarea &amp; one button.
  On button click I call one php function.
  From that I call service to get data as per value inserted in textbox.
  function code is </p>
  
  <pre><code>function fire_btn(btnvalue) {
      if(btnvalue=="Create Widget") {
          var dataString =  $("form").serialize();
          receiveReq.open("GET", '&lt;?php echo $this-&gt;config-&gt;item('url');?&gt;getData/retriveData?&amp;'+dataString);
          receiveReq.onreadystatechange = getdata; 
          receiveReq.send(null);
          document.getElementById('btnsave').value="Save Changes";
      }
  }
  
  function getdata() {
      if (receiveReq.readyState == 4 ) {
          document.getElementById('code').innerHTML = receiveReq.responseText;
          document.getElementById('codebox').focus();
      }
  }
  </code></pre>
  
  <p>Here Id "code" is my div id &amp; Id "codebox" is d of my textarea.</p>
  
  <p>Now in retriveData data function of php I am doing this</p>
  
  <pre><code>$x = "&lt;input type='hidden' value='".$this-&gt;db-&gt;insert_id()."' name='hdn' id='hdn' /&gt;";
          $x .= "&lt;textarea id='codebox' readonly style='cursor:auto;min-width: 643px; min-height: 112px;max-width: 643px;max-height: 112px;margin-left:5px;'&gt;&lt;!--Code Starts--&gt;&amp;lt;script type='text/javascript'&amp;gt;";
          $x .= "wID= '".$this-&gt;db-&gt;insert_id()."';";
          $x .= "document.write('&amp;lt;div id=myads".$this-&gt;db-&gt;insert_id()."&amp;gt;&amp;lt;/div&amp;gt;');";
  
          $x .="document.write('&amp;lt;scr'+'ipt type=";
          $x .='"text/JavaScript" src="'.$this-&gt;config-&gt;item('url').'allJs/myJs.js"&gt;';
          $x .=  "&amp;lt;/scr'+'ipt&amp;gt;');&amp;lt;/script&amp;gt;&lt;!--Code Ends--&gt;&lt;/textarea&gt;";
          echo $x;
  </code></pre>
  
  <p>myJs.js is </p>
  
  <pre><code>document.write('&lt;link rel="stylesheet" type="text/css" href="style.css"&gt;');
  document.write('&lt;script type="text/javascript" src="http://myDomain.com/Create.js"&gt;&lt;/script&gt;');
  
  var myElement = document.getElementById('myads'+wID);
  var JavaScriptCode = document.createElement("script");
  JavaScriptCode.setAttribute('type', 'text/javascript');
  JavaScriptCode.setAttribute("src", 'http://myDomain.com/content/'+wID);
  document.getElementById('myads'+wID).appendChild(JavaScriptCode);
  </code></pre>
  
  <p>Now the problem is that in textarea text supposed to show is </p>
  
  <pre><code>&lt;!--Code Starts--&gt;&lt;div id='myads28'&gt;&lt;/div&gt;&lt;script async type='text/JavaScript' charset='utf-8' src='http://myDomain.com/content/28'&gt;&lt;/script&gt;&lt;!--Code Ends--&gt;
  </code></pre>
  
  <p>this is properly shown when i test it in local machine</p>
  
  <p>but when I see it on my hosted server it shows something like this.</p>
  
  <pre><code>&lt;!--Code Starts--&gt;&lt;script type='text/javascript'&gt; wID= '28';document.write('&lt;div id=myads28&gt;&lt;/div&gt;');document.write('&lt;scr'+'ipt type="text/JavaScript" src="http://myDomain.com/Create.js"&gt;&lt;/scr'+'ipt&gt;');&lt;/script&gt;&lt;!--Code Ends--&gt;
  </code></pre>
  
  <p>I am not able to understand that what is happening.</p>
  
  <p>can any one help me to solve it.</p>