www.webdeveloper.com
Results 1 to 2 of 2

Thread: when i submit two forms the two bars should move simultaneously

  1. #1
    Join Date
    Oct 2012
    Posts
    1

    when i submit two forms the two bars should move simultaneously

    <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. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    An an identifier must be unique ! Transform your second pwidget and progressnum to pwidget1 and progressnum1. Then transform your function to execute the two tasks...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles