How to parse large strings of html into Javascript with php echo variable

Question

I have a javascript function that displays html code that is stored in the mysql database into CKeditor <textarea>. When a user selects any of the options, the mysql query is meant to echo the chunk of html code into the javascript as a php variable.

The select option works really fine in selecting the echoed variables from the javascript. The problem here is that, when i saved plain text into the database they were displayed but when i saved html codes into the database, the javascript refuses to display it.

I have tried several ways to echo the html string into the javascript such as:

 <?php echo json_encode($fbilling); ?> \\Accepts Only Plain Texts Not HTML Codes
'<?php echo decodeURI(rawurlencode($freply)); ?>' \\Refuses To load Page
'<?php echo htmlspecialchars_decode(rawurlencode($freply)); ?>'  \\Changes HTML Codes To Characters Like :%3Ctable%20data-module%3D%22header%22%20data
'<?php htmlspecialchars(json_encode($freply)); ?>'  \\ No Value is Displays, Just Empty
'<?php echo htmlspecialchars(json_encode($freply)); ?>' \\ No Value is Displays, Just Empty
'<?php echo htmlspecialchars(rawurlencode($freply)); ?>' \\Changes HTML Codes To Characters Like :%3Ctable%20data-module%3D%22header%22%20data

This is my code:

var Code = new Array("", <?php echo json_encode($fwelcome); ?>, <?php echo json_encode($fbilling); ?>, <?php echo json_encode($freply); ?>, <?php echo json_encode($fdelivery); ?>);

function change() {
  var ID = formconteudo.message.options[formconteudo.message.selectedIndex].value;
  CKEDITOR.instances.editor1.setData('<p>' + Code[ID] + '</p>');
}

<div class="col-md-4">
  <div class="form-group">
    <?php             
                        $sql3="SELECT * FROM email WHERE id='1'";
                        $result3=mysql_query($sql3) or die(mysql_error());
                        $rwsf=  mysql_fetch_array($result3);
                        $fwelcome= $rwsf[3]; 
                        $freply= $rwsf[2]; 
                        $fbilling= $rwsf[1]; 
                        $fdelivery= $rwsf[4]; 
                        ?>
    <label>Email Templates: </label>
    <select name="message" onChange="change();" class="form-control select2 required" style="width: 100%;">
      <option disabled selected>Click To Select</option>
      <option value="1">Welcome Email</option>
      <option value="2">Billing Email</option>
      <option value="3">Basic Reply Email</option>
      <option value="4">Delivery Process Email</option>
    </select>
  </div>
</div>
</div>


<div class="row">
  <div class="col-md-12">
    <div class="form-group">
      <input type="text" name="subject" placeholder="Subject" class="form-control required">
    </div>
  </div>
</div>
<textarea id="editor1" name="editor1" rows="10" cols="80">Select your mail design from the 'Email' drop down list above.</textarea><br>

<div class="form-wizard-buttons">
  <button type="submit" class="btn btn-success" style="border:0px"><i class="fa  fa-send"> Send Mail</i></button>
</div>

Answer 1

Hi as you have html content, you can follow below process to get html and send it to the function as parameter.

    <div class="col-md-4">
      <div class="form-group">
        <?php             
                            $sql3="SELECT * FROM email WHERE id='1'";
                            $result3=mysql_query($sql3) or die(mysql_error());
                            $rwsf=  mysql_fetch_array($result3);
                            $fwelcome= $rwsf[3]; 
                            $freply= $rwsf[2]; 
                            $fbilling= $rwsf[1]; 
                            $fdelivery= $rwsf[4]; 
                            ?>
        <label>Email Templates: </label>
        <select name="message" onChange="change();" class="form-control select2 required" style="width: 100%;">
          <option disabled selected>Click To Select</option>
          <option value="1">Welcome Email</option>
          <option value="2">Billing Email</option>
          <option value="3">Basic Reply Email</option>
          <option value="4">Delivery Process Email</option>
        </select>
      </div>
    </div>
    </div>


    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
          <input type="text" name="subject" placeholder="Subject" class="form-control required">
        </div>
      </div>
    </div>
    <textarea id="editor1" name="editor1" rows="10" cols="80">Select your mail design from the 'Email' drop down list above.</textarea><br>

    <div class="form-wizard-buttons">
      <button type="submit" class="btn btn-success" style="border:0px"><i class="fa  fa-send"> Send Mail</i></button>
    </div>
   <div name="fwelcome_content">
     <?php echo $fwelcome; ?>
   </div>
   <div name="fbilling_content">
     <?php echo $fbilling; ?>
   </div>
   <div name="freply_content">
     <?php echo $freply; ?>
   </div>    
   <div name="fdelivery_content">
     <?php echo $fdelivery; ?>
   </div>

and then in javascript

var Code = new Array();
window.onload = function(e){     
   Code = new Array("", getHTMLContent("fwelcome_content"), getHTMLContent("fbilling_content"), getHTMLContent("freply_content"), getHTMLContent("fdelivery_content"));
}
function change() {
  var ID = formconteudo.message.options[formconteudo.message.selectedIndex].value;
  CKEDITOR.instances.editor1.setData('<p>' + Code[ID] + '</p>');
}
function getHTMLContent(elementId){
  var htmlContent = document.getElementsByName(elementId)[0].innerHTML;
  document.getElementsByName(elementId)[0].remove();
  return htmlContent;
}