Form submit

Dev Shed Forums Sponsor:

October 26th, 2012, 05:25 AM

cvaraprasad

Registered User

Join Date: Oct 2012

Posts: 2

Time spent in forums: 15 m 5 sec
Reputation Power: 0

Form submit

HTML4Strict Code:

Original - HTML4Strict Code

<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>

<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>

When i select drop down and submit only one progress bar is moving.Help me out with two bars should woth submit button.

Last edited by Winters : October 26th, 2012 at 10:52 AM. Reason: Added highlighting

October 26th, 2012, 09:36 AM

paulh1983

Contributing User

Join Date: Dec 2004

Posts: 2,224

Time spent in forums: 2 Weeks 1 Day 9 h 15 m 9 sec
Reputation Power: 201

1. Javascript issue not PHP
2. use [code] tags for code..

Developer Shed Advertisers and Affiliates