使用字符串从php更改bootstrap的内容

Question

I have a modal in an html page as shown below:

<!-- Modal -->
  <div class="modal fade" id="uploadImages" role="dialog">
    <div class="modal-dialog modal-lg">

      <!-- Modal content-->
      <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Upload Scanned Images</h4>
    </div>
    <div class="modal-body">
         <form action="upload.php" method="POST" enctype="multipart/form-data">
            Select file : <input type='file' name='U_FILES[]' id='file' class='form-control'  multiple=""><br>
             <input type='submit' class='btn btn-info' value='Submit' id='upload' name = 'submit'>
            </form>
    </div>
    <div class="modal-footer">
     <p>Only jpeg, png, bmp and tiff Images are allowed to be uploaded</p>
    </div>
      </div>

    </div>
  </div>

I also have a php file where I am outputting whether an output has been successful or not through an echo.

    for ($i = 0; $i < count($response); $i++) {
    echo $response[$i]["fileName"]." - ".$response[$i]["msg"]."<br/>";
}

Is it possible that instead of an echo I pass the response to the same modal body?

Answer 1

You can use ajax to submit form based on your response, also you can display message on same model.

<!-- Modal -->
  <div class="modal fade" id="uploadImages" role="dialog">
    <div class="modal-dialog modal-lg">
      <div id="alertMsg"></div>
      <!-- Modal content-->
      <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h4 class="modal-title">Upload Scanned Images</h4>
    </div>
    <div class="modal-body">
         <form method="POST" enctype="multipart/form-data" id="form_submit">
            Select file : <input type='file' name='U_FILES[]' id='file' class='form-control'  multiple=""><br>
             <input type='submit' class='btn btn-info' value='Submit' id='upload' name = 'submit'>
            </form>
    </div>
    <div class="modal-footer">
     <p>Only jpeg, png, bmp and tiff Images are allowed to be uploaded</p>
    </div>
      </div>

</div>
  </div>
  <script>
  $.ajax({
        url: 'path/to/php/upload.php',
        type: 'POST',
        data: $('#form_submit').serializeArray()
        success: function(response) {
            var tempResponse = JSON.parse(response);//if you are getting json array in response then this line is needed otherwise pass response directly in below html
            $('#alertMsg').html(tempResponse);
        }
    });
  </script>