Member Avatar for cholleti.varaprasad 
<html>
<head>
<style type="text/css">
/*#pwidget
{
  background-color:lightgray;
  width:254px;
  padding:2px;
  -moz-border-radius:3px;
  border-radius:3px;
  text-align:left;
  border:1px solid gray;    
}*/
#progressbar
{
  width:30px;
  padding:1px;
  background-color:white;
  border:1px solid black;
  height:10px;
}
#indicator
{
  width:0px;
  background-image:url("shaded-green.png");
  height:10px;
  margin:0;
}
/*#progressnum
{
  text-align:center;
  width:250px;
}*/
</style>
<script type="text/javascript">
function disp_text()
{
    var w = document.myform.mylist.selectedIndex;
    //alert(w);
    var selected_text = document.myform.mylist.options[w].value;
    return selected_text;

}

function disp_text1()
{
    var x = document.myform1.mylist1.selectedIndex;
    //alert(x);
    var second_selected_text = document.myform1.mylist1.selectedIndex;
    //alert(second_selected_text);
    return second_selected_text;
}


var maxprogress = 30 ;   // total to reach
var actualprogress = 0;  // current value
var itv = 0;  // id to setinterval  
function prog()
{

    var val = disp_text();
    var temp = val;
    val = maxprogress;
    maxprogress = temp;
if(actualprogress >= maxprogress) 
   {
    clearInterval(itv);     
    return;
   }

  var progressnum = document.getElementById("progressnum");
  var indicator = document.getElementById("indicator");
  actualprogress += 1;  
  indicator.style.width=actualprogress + "px";
  progressnum.innerHTML = actualprogress;
  if(actualprogress == maxprogress) clearInterval(itv);   
}
</script>
</head>
<body>

<table width="100%">
  <tr>
    <td width="117"><div id="progressbar">
        <div id="indicator"></div>
      </div></td>
    <td width="78"><div id="pwidget">
        <div id="progressnum">0</div>
      </div></td>
    <td width="288">&nbsp;
      <FORM NAME="myform">
        <SELECT NAME="mylist" onChange="disp_text()" class="foo">
          <OPTION VALUE="">Select</OPTION>
          <OPTION VALUE="30">Raghu</OPTION>
          <OPTION VALUE="45">Vara</OPTION>
          <OPTION VALUE="60">Sashi</OPTION>
        </SELECT>
      </FORM></td></tr><tr>
        <td width="117"><div id="progressbar">
        <div id="indicator"></div>
      </div></td>
    <td width="78"><div id="pwidget">
        <div id="progressnum">0</div>
        </div></td><td>
        <FORM NAME="myform1">
        <SELECT NAME="mylist1" onChange="disp_text1()" class="foo">
          <OPTION VALUE="">Select</OPTION>
          <OPTION VALUE="30">Raghu</OPTION>
          <OPTION VALUE="45">Vara</OPTION>
          <OPTION VALUE="60">Sashi</OPTION>
        </SELECT>

            </FORM>

            <input type="button" name="Submit" value="Start the progression" onClick="itv = setInterval(prog, 70)" />
    </td>
    <td width="520">&nbsp;<input type="button" name="Submit2" value="Stop" onClick="clearInterval(itv)" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
  • 2 Contributors
  • 2 Replies
  • 158 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by cholleti.varaprasad
Member Avatar for AleMonteiro

This should help you:

<!DOCTYPE html>
<html>

<body>
    <script>
    var ProgressBar = function(max, objButton, objText) {
        this.max = max;
        this.text = objText;
        this.current = 0;
        this.button = objButton;

        this.text.value = this.current;

        this.started = false;

        var _self = this;

        this.button.onclick = function() {
            if ( _self.started === true ) {
                _self.stop();
            }
            else {
                _self.start();
            }
        }
    }

    ProgressBar.prototype.start = function() {
        this.started = true;
        var _self = this;
        this.button.innerText = "Stop";
        this.interval = setInterval(function() {
            _self._tick();
        }, 70);
    };

    ProgressBar.prototype.stop = function() {
        this.started = false;
        clearInterval(this.interval);
        this.button.innerText = "Start";
    };

    ProgressBar.prototype._tick = function() {
        this.current++;
        if ( this.current == this.max ) {
            this.stop();
        }
        this.text.value = this.current;
    };

    window.onload = function() {
        new ProgressBar(100, get("btnStart1"), get("txtProgress1"));
        new ProgressBar(100, get("btnStart2"), get("txtProgress2"));
        new ProgressBar(100, get("btnStart3"), get("txtProgress3"));
    };

    function get(id) {
        return document.getElementById(id);
    }

    </script>

    <button id="btnStart1" type="button">Start</button>
    <input id="txtProgress1" type="text" value="0"/>

    <br/>

    <button id="btnStart2" type="button">Start</button>
    <input id="txtProgress2" type="text" value="0"/>

    <br/>

    <button id="btnStart3" type="button">Start</button>
    <input id="txtProgress3" type="text" value="0"/>

    <br/>
</body>
Member Avatar for cholleti.varaprasad

Thanks for the code.But i need only one submit button and it should apply to all three bars.When i click on submit the three values shoulb be increased.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.