如何在不刷新页面的情况下在同一{div}上显示表单成功消息？

Question

How can I submit a form on same without refreshing page? Here I'm submitting a pdf to drag and drop container and when I submit the form it's redirecting to upload.php. I need to display the successful message on the same container . I have not enough knowledge about the ajax. Kindly please help me to solve the issue

Here is the drag and drop container below:

Here is the result page (upload.php) below:

HTML Form:

<form method="POST" action="upload.php" enctype="multipart/form-data">
  <input type="file" multiple name="file[]" accept="application/pdf">
      <input class="button-primary" type="submit" value="Submit">
</form>

Upload.php file:

<?php 
//echo 'done';
$output = '';

    if(isset($_FILES['file']['name'][0])){
        //echo 'ok';
        foreach($_FILES['file']['name'] as $keys => $values) {

            if(move_uploaded_file($_FILES['file']['tmp_name'][$keys], 'upload/' .$values)) {

                $output .= 'Form submited succesfully';
            }
        }
    }
echo $output;
?>

Answer 1

You can prevent the default behaviour of the form on submit, which redirects it. Try using this:

<form id="form" method="POST" enctype="multipart/form-data">
  <input id='file' type="file" multiple name="file[]" accept="application/pdf">
  <input class="button-primary" type="submit" value="Submit">
</form>
<p id="response-text"></p>
    <script>
        $("#form").submit(function (e) {
            e.preventDefault();
            var xhttp = new XMLHttpRequest();
            var data = new FormData();
            data.append("file", document.getElementById("file").files[0]);
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("response-text").innerHTML = 'Form Successfully Submitted';
                }
                else {
                    document.getElementById("response-text").innerHTML = 'Form could not be submitted';
                }
            };
            xhttp.open("post", "/upload.php", true);
            xhttp.send(data);
        });

    </script>

Now you can display the desired message wherever you want to display. Here I have displayed on <p> of id response-text

Answer 2

Use the following code

<form method="POST" enctype="multipart/form-data">
            <input id='file' type="file" multiple name="file[]" accept="application/pdf">
            <input id='submit'class="button-primary" type="submit" value="Submit">
        </form>

 $("#submit").submit(function(e){
    e.preventDefault();
 var xhr = new XMLHttpRequest();
          var data = new FormData();

          data.append("file",document.getElementById("file").files[0]);
          xhr.open("post","/upload.php",true);

          xhr.send(data);


            });