1

My HTML is:

<!DOCTYPE html>


  <script>
    $(document).ready(function() {
    $('.parent').click(function() {
      $('.sub-nav').toggleClass('visible');
      });
    });

  </script>
  <script>
    $(document).ready(function() {
    $('.hr').click(function() {
      $('.sub-nav-hr').toggleClass('visible');
      });
    });

  </script>
  <script>
    $(document).ready(function() {
    $('.employee').click(function() {
      $('.sub-nav-employee').toggleClass('visible');
      });
    });

  </script>

  <script>
    $(document).ready(function() {
    $('.kpi').click(function() {
      $('.sub-nav-kpi').toggleClass('visible');
      });
    });

  </script>

  <!-- <script>
    $(document).ready(function() {
    $('.summary').click(function() {
      $('.sub-nav-summary').toggleClass('visible');
      });
    });

  </script> -->

  
  <script>
    function openNav() {
      document.getElementById("mySidebar").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
      document.getElementById("main_footer").style.marginLeft = "250px";
      document.getElementById("project_form").style.marginLeft = "250px";
    }

    function closeNav() {
      document.getElementById("mySidebar").style.width = "0";
      document.getElementById("main").style.marginLeft= "0";
      document.getElementById("main_footer").style.marginLeft= "0";
      document.getElementById("project_form").style.marginLeft= "0";
    }
  </script>


</head>
<body>
  
</section>

<section>
  <div class="rt-container" id="project_form" style="transition: margin-left .5s;">
    <div class="col-rt-12">
      <div class="rt-heading" style="text-align: left;">
         <h1>Upload Employee Details</h1>
       </div>

      <div class="Scriptcontent">

       <!-- Start Project Form -->
       <form class="reg-form" method="POST" enctype="multipart/form-data" id="employeeDetailsAdd" action="http://50.19.143.13:5000/hrDetailsAdd">

        <div class="field-row">
          <label class="form-label cf" for="fileupload">Details from HR</label>
          <input type="file" id="file" name="file" accept=".xlsx">
        </div>

        <div class="field-row">
          <a target="_blank" href="http://50.19.143.13:5000/static/sample_file_format/HR.xlsx"><label class="form-labe cf" for="fileupload">Download Sample Format</label></a>
        </div>

        <div class="field-row">
          <button type="submit" class="form-button" id="submit">Submit</button>
        </div>

        
          
        
      </form>

    </div>
  </div>
</div>
</section>

</body></html>

So I need to add a loading bar when the user uploads the file, to show the user that his file is being uploaded. So there's a loading symbol showing that your file is being uploaded please wait, like a lot of websites have a box with loading symbol and text saying "Please Wait!". But my server side language is python. Im fairly new to this, so if please someone can help me with this. Thank You.

Riddhi Dua
  • 91
  • 8
  • maybe this will help you.. https://stackoverflow.com/questions/15410265/file-upload-progress-bar-with-jquery – Joji Jun 24 '21 at 06:02
  • No, I dont know why but this isnt working as well – Riddhi Dua Jun 24 '21 at 06:22
  • Hi Riddhi- your form is submitting in the backend, as per the
    element which has `hrDetailsAdd` as its action. Therefore anything you do within the page will be wiped once the browser redirects to that backend code and back again. What you need to do is set up some javascript to intercept it, fire the form action itself using AJAX/XHR and then return something. Look up jQuery's `$.post()` command or "how to submit AJAX forms with jQuery", etc. Unfortunately I don't think a stack overflow answer can really give enough detail on how this works without just supplying the working code.
     – Matt Fletcher Jun 25 '21 at 06:59
  • Hello, Thank you, but I tried searching a lot regarding the same but the thing is everything is available in PHP , and my server language is Python – Riddhi Dua Jun 25 '21 at 09:41

1 Answers1

0
    <!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


  <script>
    $(document).ready(function() {
    $('.parent').click(function() {
      $('.sub-nav').toggleClass('visible');
      });
    });

  </script>
  <script>
    $(document).ready(function() {
    $('.hr').click(function() {
      $('.sub-nav-hr').toggleClass('visible');
      });
    });

  </script>
  <script>
    $(document).ready(function() {
    $('.employee').click(function() {
      $('.sub-nav-employee').toggleClass('visible');
      });
    });

  </script>

  <script>
    $(document).ready(function() {
    $('.kpi').click(function() {
      $('.sub-nav-kpi').toggleClass('visible');
      });
    });

  </script>

  <!-- <script>
    $(document).ready(function() {
    $('.summary').click(function() {
      $('.sub-nav-summary').toggleClass('visible');
      });
    });

  </script> -->

  
  <script>
    function openNav() {
      document.getElementById("mySidebar").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
      document.getElementById("main_footer").style.marginLeft = "250px";
      document.getElementById("project_form").style.marginLeft = "250px";
    }

    function closeNav() {
      document.getElementById("mySidebar").style.width = "0";
      document.getElementById("main").style.marginLeft= "0";
      document.getElementById("main_footer").style.marginLeft= "0";
      document.getElementById("project_form").style.marginLeft= "0";
    }

    function submit_file() {
      $(".preloader").show();
      // $(".preloader").hide(); for hide the loader
      return false; //Hide this

    }
  </script>
<style>
.preloader {
        width: 100%;
        height: 100%;
        top: 0;
        position: fixed;
        z-index: 99999999;
        background: rgba(247, 247, 247, 0.5);
    }
    </style>

</head>
<body>
  <div class="preloader" style="display:none;">
  Loading  
  <!-- Inside preloader you can use gif images -->
</div>

</section>

<section>
  <div class="rt-container" id="project_form" style="transition: margin-left .5s;">
    <div class="col-rt-12">
      <div class="rt-heading" style="text-align: left;">
         <h1>Upload Employee Details</h1>
       </div>

      <div class="Scriptcontent">

       <!-- Start Project Form -->
       <form class="reg-form" method="POST" enctype="multipart/form-data" id="employeeDetailsAdd" action="http://50.19.143.13:5000/hrDetailsAdd">

        <div class="field-row">
          <label class="form-label cf" for="fileupload">Details from HR</label>
          <input type="file" id="file" name="file" accept=".xlsx">
        </div>

        <div class="field-row">
          <a target="_blank" href="http://50.19.143.13:5000/static/sample_file_format/HR.xlsx"><label class="form-labe cf" for="fileupload">Download Sample Format</label></a>
        </div>

        <div class="field-row">
          <button type="button" class="form-button" id="submit" onclick='submit_file()'>Submit</button>
        </div>

        
          
        
      </form>

    </div>
  </div>
</div>
</section>

</body></html>

While submiting display the preloader. Once file uploaded hide the preloader.

Kaja Mydeen
  • 1
  • 1