Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2018
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Progress Bar Javascript

    I want the progress bar working. On each input of the form the progress should go from 0% to 20%, 40%, 60%, 80%, 100%. if a input field is blank, for each input it will not add 20% from the progress. You can see the progress bar at top of the web page.

    HTML

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <link rel="stylesheet" type="text/css" href="style.css"/>
    
    <body>
    
    <div id="Black">
    
    <div id="Prog">
    <div id="Pro">0%</div>
    </div>
    
    <div id="White">
    
    <form action="http://www.freelancer.com" method="POST">
    
    <input type="text" placeholder=" First Name" id="FirstName"/>
    
    <input type="text" placeholder=" Last Name" id="LastName"/>
    
    <input type="text" placeholder=" Full Name" id="FullName"/>
    
    <input type="text" placeholder=" Type your password" id="PSW"/>
    
    <input type="text" placeholder=" Retype your password" id="MPSW"/>
    
    <input type="submit" value="Register" id="Register"/>
    
    </form>
    
    </div>
    
    <script>
    var prog=document.getElementById("Prog");
    
    var pro=document.getElementById("Pro");
    
    var fname=document.getElementById("FirstName");
    
    var lname=document.getElementById("LastName");
    
    var full=document.getElementById("FullName");
    
    var psw0=document.getElementById("PSW");
    
    var mpsw0=document.getElementById("MPSW");
    
    var firstname=document.getElementById("FirstName").value;
    
    var lastname=document.getElementById("LastName").value;
    
    var fullname=document.getElementById("FullName").value;
    
    var psw=document.getElementById("PSW").value;
    
    var mpsw=document.getElementById("MPSW").value;
    
    document.getElementById("FirstName").value="";
    
    document.getElementById("LastName").value="";
    
    document.getElementById("FullName").value="";
    
    document.getElementById("PSW").value="";
    
    document.getElementById("MPSW").value="";
    
    var width=0;
    
    var i;
    
    
    
    if(firstname=="" || lastname=="" || fullname=="" || psw=="" || mpsw==""){
    
    var percent=pro.style.width=0+"%";
    
    pro.innerHTML=percent;
    
    }
    
    if(!firstname=="" || !lastname=="" || !fullname=="" || !psw=="" || !mpsw==""){
    
    var percent=pro.style.width=20+"%";
    
    pro.innerHTML=percent;
    
    pro20.style.display="block";
    
    }
    
    
    
    if(!firstname=="" && !lastname=="" || !firstname=="" && !fullname=="" || !firstname=="" && !psw=="" || !firstname=="" && !mpsw=="" || !lastname=="" && !fullname=="" || !lastname=="" && !psw=="" || !lastname=="" && !mpsw=="" || !fullname=="" && !psw=="" || !fullname=="" && !mpsw=="" || !psw=="" && !mpsw==""){
    
    var percent=pro.style.width=40+"%";
    
    pro.innerHTML=percent;
    
    }
    
    if(!firstname=="" && !lastname=="" && !fullname=="" || !firstname=="" && !lastname=="" && !psw=="" || !firstname=="" && !lastname=="" && !mpsw=="" || !lastname=="" && !fullname=="" && !psw=="" || !lastname=="" && !fullname=="" && !mpsw=="" || !fullname=="" && !psw=="" && !mpsw==""){
    
    var percent=pro.style.width=60+"%";
    
    pro.innerHTML=percent;
    
    }
    
    if(!firstname=="" && !lastname=="" && !fullname=="" && !psw=="" || !firstname=="" && !lastname=="" && !fullname=="" && !mpsw=="" || !lastname=="" && !fullname=="" && !psw=="" && !mpsw==""){
    
    var percent=pro.style.width=80+"%";
    
    pro.innerHTML=percent;
    
    }
    
    if(!firstname=="" && !lastname=="" && !fullname=="" && !psw=="" && !mpsw==""){
    
    var percent=pro.style.width=100+"%";
    
    pro.innerHTML=percent;
    
    }
    </script>
    
    </div>
    
    </body>
    
    </html>
    CSS

    Code:
    *{margin:0; padding:0;}
    
    #Black{
           width:100%;
    	   height:100%;
    	   background:black;
    	   color:white;
    	   position:fixed;
    	  }
    
    #White{
           width:600px;
    	   height:auto;
    	   background:rgba(255,255,255,0.1);
    	   color:white;
    	   margin:100px auto;
    	  }	  
    	  
    #Prog{
          width:100%;
    	  height:20px;
    	  background:rgba(255,255,255,0.1);
    	  color:white;
    	 }
    	 
    #Pro{
         width:0%;
    	 height:20px;
    	 background:linear-gradient(to bottom, rgba(33,150,243,1) 50%, rgba(33,150,243,0.9) 50%);
    	}
    	
    #FirstName::selection, #LastName::selection, #FullName::selection, #PSW::selection, #MPSW::selection{
                                                                                                         background:white;
    		                                                                                             color:black;
    		                                                                                            }
    	
    #FirstName, #LastName, #FullName, #PSW, #MPSW{
                                                  width:400px;
    	                                          height:auto;
    	                                          padding:20px;
    	                                          background:black;
    	                                          color:white;
    	                                          outline:none;
    	                                          margin:20px 80px;
    	                                          border:2px solid white;
    	                                         }
    	
    #FirstName::placeholder, #LastName::placeholder, #FullName::placeholder, #PSW::placeholder, #MPSW::placeholder{
                                                                                                                   user-select:none;
    																											  }
    	
    #Register{
              width:200px;
    		  height:auto;
    		  padding:20px;
    		  background:black;
    		  color:white;
    		  outline:none;
    		  border:2px solid white;
    		  margin-left:200px;
    		  margin-bottom:20px;
    		  cursor:pointer;
    		 }
    		 
    #Register:hover{
                    background:linear-gradient(to bottom, rgba(33,155,243,1) 50%, rgba(33,155,243,0.9) 50%);
    				color:white;
    				border:2px solid white;
    			   }

  2. #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,412
    Thanks
    3
    Thanked 594 Times in 580 Posts
    Hi there al.rahat,

    I would suggest that you drop that idea.
    Instead, focus your attention more on accessibility.

    Start by getting rid of the "arty-farty" nonsense that is the placeholder attribute.

    Further reading:-


    Don't waste your energy on a progress bar.
    Instead use HTML's built in validation - the required attribute.

    HTML
    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>Login form</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    </head>
    <body>
    
    <form id="login" action="#" method="post">
     <h1>Login</h1>
      <fieldset>
       <label for="firstname">First Name</label>
       <input type="text" id="firstname" name="firstname" required>
       <label for="lastname">Last Name</label>
       <input type="text" id="lastname" name="lastname" required>
       <label for="fullname">Full Name</label>
       <input type="text" id="fullname" name="fullname" required>
       <label for="psw">Password</label>
       <input type="password" id="psw" name="psw" required>
       <label for="mpsw">Retype Password</label>
       <input type="password" id="mpsw" name="mpsw" required>
       <input type="submit" value="Register">
      </fieldset>
    </form>
    
    </body>
    </html>
    CSS
    Code:
    
    body {
        margin: 0;
        background-color: #000;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
     
    #login {
        max-width: 37.5em;
        padding: 1.25em 0;
        margin: auto;
        background-color: rgba( 255, 255, 255, 0.2 );
        color: #fff;
     }
     
    h1 { 
        font-size: 1.5em;
        text-align: center;
     }
     
    #login fieldset {
        border: 0;
     }
     
    #login  label {
        display: block;
        width: 66.6%;
        margin: auto;
     }
     
    #login input {
        display: block;
        width: 66.6%;
        padding: 0.5em;
        margin: 1.25em auto;
        border: 1px solid #fff;
        background-color: #000;
        color: #fff;
     }
    
    #login input[type="submit"]{
        width: 33.3%;
        cursor: pointer;
     }
    		 
    #login input[type="submit"]:hover{
        background-image: linear-gradient( to bottom, rgba(33,155,243,1) 50%, rgba(33,155,243,0.9) 50% );
     }
    

    coothead
    Last edited by coothead; Jul 1st, 2018 at 08:24 PM.
    ~ the original bald headed old fart ~

  3. #3
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,194
    Thanks
    6
    Thanked 1,345 Times in 1,314 Posts
    Quote Originally Posted by coothead View Post
    Instead use HTML's built in validation - the required attribute.
    But then again, don’t rely on it as only means of validation. You must employ server-side validation, otherwise anyone could alter the HTML source code (e. g. through the built-in developer console) and bypass validation (e. g. by just removing the “required” attributes).

  4. #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,412
    Thanks
    3
    Thanked 594 Times in 580 Posts
    Quote Originally Posted by VIPStephan View Post
    But then again, don’t rely on it as only means of validation.
    You must employ server-side validation....
    That, of course, is very true.

    The HTML validation that I suggested was just the
    sensible alternative to the O.P's desire for some kind
    of javascript form filling progress bar.

    coothead
    ~ the original bald headed old fart ~

  5. #5
    New Coder
    Join Date
    Sep 2017
    Posts
    41
    Thanks
    5
    Thanked 3 Times in 3 Posts
    For the sake of practice, here is some material to go through:
    https://www.w3schools.com/howto/howt...rogressbar.asp


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •