2

I am creating a user registration form and i want to show a loading/progress on my page as soon user click submit button. Here Is my code please suggest me something to achieve this. here below is process.php file

 if(isset($username)){
    $con = new dbConnection();
    $con->connect();
    $con->add_user($username,$email,$password,$contact);
    $db_class = 'ui success message';
    $db_message_header = 'header';
    $db_header_message = 'Your user registration was successful.';
    $db_msg= 'You may now log-in with the username you have chosen';
    $form_load = 'loading'; //Class for adding loading class
    sleep(4);
   header('location:index2.php');

}

Here is index.php

  <form class="ui form attached fluid segment <?php echo $form_load; ?>" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" id="form">
        <div class="field">
          <label>Username <span id="err">*</span></label>
          <input placeholder="Username Name" type="text" name="username" class="ui input success" value="<?php if(isset($username)){echo $username;} ?>" required>
        </div>
          <input type="submit" name="submit">Submit</input>
     </form>
Syed Mohi
  • 21
  • 1
  • 1
    Hi, I think you should use javascript instead of php, This may require not to load the page to display the loading indicator right? – Roshan Mar 16 '19 at 09:03
  • yes, Can you please give any example of javascript to show progress/indicator/spinning while data is added to the database. – Syed Mohi Mar 16 '19 at 09:04
  • Javascript is a great solution. You can add an onclick event to the submit button and have it load a spinner or something to indicate that something is happening while the form is doing its thing. – tshimkus Mar 16 '19 at 09:05
  • 1
    Can you post the html, and or other style you used? And also take a look at this. https://stackoverflow.com/questions/5720468/show-loading-indicator-with-jquery – Roshan Mar 16 '19 at 09:07
  • Here's an example of a pure CSS spinner you can make visible with an onclick event: https://www.w3schools.com/howto/howto_css_loader.asp – tshimkus Mar 16 '19 at 09:08
  • Thanks for help @Roshan I am trying Jquery for loading, and i used Semantic UI css framework – Syed Mohi Mar 16 '19 at 09:10
  • @SyedMohi i suggest that you make a separate loading indicator inside `
    ` on your html with an hidden attribute. And that html element should be prompted using jQuery and closed after fetching data.
    – Roshan Mar 16 '19 at 09:14
  • @Roshan Ok, thanks for your help :) – Syed Mohi Mar 16 '19 at 09:18
  • Do you mean a Progress bar that shows actual progress or just a UI blocker with a loading spinney deal? One is hard, the other is not. – ArtisticPhoenix Mar 16 '19 at 09:40
  • i want to show progress – Syed Mohi Mar 16 '19 at 09:49
  • Presenting actual server progress on a long-running task to a web browser user is a notoriously complex programming task, sorry to say. iframes! or AJAX requests! service endpoints on your webserver delivering progress data! That's why you find many real-life applications using spinners or continuously animated (fake) progress bars. – O. Jones Mar 16 '19 at 12:48

0 Answers0