Unable to invoke html tags in PHP when using jquery script

Question

I am using the following script for a file upload progress bar. Everything works fine except for the echo command in my php script test2.php.

Once the file is uploaded, I do an echo to display "File Uploaded" with the bold tags within the test2.php and the print out will display "File Uploaded" along with the bold tags as opposed to making it bold.

Nothing is wrong with the test2.php becuase if I go to that page directly, then that text is printed in bold.

$(function() {
  $('#btn').click(function() {
    $('.myprogress').css('width', '0');
    $('.msg').text('');
    var filename = $('#filename').val();
    var myfile = $('#myfile').val();
    var formData = new FormData();
    formData.append('myfile', $('#myfile')[0].files[0]);
    formData.append('filename', filename);
    $('#btn').attr('disabled', 'disabled');
    $('.msg').text('Uploading in progress...');
    $.ajax({
      url: 'test2.php',
      data: formData,
      processData: false,
      contentType: false,
      type: 'POST',
      // this part is progress bar
      xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
          if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            percentComplete = parseInt(percentComplete * 100);
            $('.myprogress').text(percentComplete + '%');
            $('.myprogress').css('width', percentComplete + '%');
            $('.myProgress').css("background-color", "#0078ae");
          }
        }, false);
        return xhr;
      },
      success: function(data) {
        $('.msg').text(data);
        $('#btn').removeAttr('disabled');
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform1" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <label>Rename Firmware File <i>(optional)</i> </label>
    <input class="form-control" type="text" id="filename" />
  </div>
  <div class="form-group">
    <input type="file" id="myfile" />
  </div>
  <div class="form-group">
    <div class="progress">
      <div class="progress-bar progress-bar-success myprogress" role="progressbar" style="width:0%;">0%</div>
    </div>
    <div class="msg"></div>
  </div>
  <input type="button" id="btn" class="ui-button" value="Upload" />
</form>

Have you watched the AJAX request in the browser's developer tools? — Jay Blanchard
– Jay Blanchard, Commented Jan 12, 2018 at 16:33
If you want to include HTML in the message, use the html method instead of text ($('.msg').html(data);) — Chris Forrence
– Chris Forrence, Commented Jan 12, 2018 at 16:38

Chris Forrence · Accepted Answer · 2018-01-12 16:58:43Z

1

In the success handler, you're calling .text to set the text on an element, but that essentially escapes HTML.

Instead, try .html (just be careful that you're sending sanitized data!)

success: function(data) {
    $('.msg').html(data);
    $('#btn').removeAttr('disabled');
}

answered Jan 12, 2018 at 16:58

Chris Forrence

10.1k11 gold badges50 silver badges66 bronze badges

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

Comments

Neil Girardi · Accepted Answer · 2018-01-12 16:57:27Z

0

Try adding the following the settings object you pass into $.ajax():

dataType: "html"

Accoding to the jQuery API docs, the dataType setting specifies "...The type of data that you're expecting back from the server", and setting it to html "Returns HTML as plain text; included script tags are evaluated when inserted in the DOM."

answered Jan 12, 2018 at 16:57

Neil Girardi

5,0113 gold badges37 silver badges49 bronze badges

Collectives™ on Stack Overflow

Unable to invoke html tags in PHP when using jquery script

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related