Can we make inactive button in HTML ?

I have 2 buttons, one should be pressed before the second. The second button should process the result from the first one. Can I make the second one inactive until the first button pressed and then activate it. Or is there a solution to this problem. Thanks
nawafAsked:
Who is Participating?
 
jbrugmanConnect With a Mentor Commented:
<FORM NAME=formname>
<INPUT TYPE = HIDDEN VALUE="wait" NAME=button2>
<INPUT TYPE = BUTTON VALUE=one onClick="go_on()"
<INPUT TYPE = BUTTON VALUE=two onClick="go_no()"
</FORM>

<SCRIPT LANGUAGE="JavaScript">
function go_on() {
document.formname.wait.value=newvalue
}
function go_no() {
   if (document.formname.wait.value=="wait"){
   // donothing
   alert('press button 1 first!");
   else {
   alert('button 1 is pressed!");
   }
}
</SCRIPT>
0
 
GrdvCommented:
how does your code look like??
0
 
jbrugmanCommented:
Sorry, this one should work...

<FORM NAME=formname>
<INPUT TYPE = HIDDEN VALUE="wait" NAME=wait>
<INPUT TYPE = BUTTON VALUE=one onClick="go_on()">
<INPUT TYPE = BUTTON VALUE=two onClick="go_no()">
</FORM>

<SCRIPT LANGUAGE="JavaScript">
function go_on() {
document.formname.wait.value="newvalue"
}
function go_no() {
   if (document.formname.wait.value=="wait") {
   // do nothing
   alert("press button 1 first!");
   }
   if (document.formname.wait.value=="newvalue") {
   alert("button 1 is pressed!");
   }
}
</SCRIPT>
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
nawafAuthor Commented:
Her is the full code:
<HTML>

<HEAD>
<TITLE>slope</TITLE>
</HEAD>

<BODY BGCOLOR="#99ccff">

<FORM method=post ACTION="http://server/cgi-bin/slope.pl" >

<table cellpadding=0 cellspacing=0 border=0 width=750 bgcolor="#6666ff">

<tr><td>
<font face="GillSans, Ventana, Arial, Helv" size=4 align=center>Slop/Aspect finctions</font>
</tr></td>
<tr><td colspan=2>&nbsp;</td></tr>

 
<tr><td>
<font face="GillSans, Ventana, Arial, Helv">
<I>Input File  </I>
</font>

<SELECT NAME="inputs">
<OPTION value="affaosol">affaosol
<OPTION value="brazil2">brazil2
<OPTION value="brazil4">brazil4
<OPTION value="nrain">nrain
<OPTION value="water">water
<OPTION value="relief">relief
<OPTION value="prwater">prwater
<OPTION value="massland">massland
</SELECT>

</tr></td>

<tr><td colspan=2>&nbsp;</td></tr>


<tr><td>
<font face="GillSans, Ventana, Arial, Helv">
<I>Output File</I>
</font>

<INPUT TYPE="text" NAME="outputs" SIZE="10" MAXLENGTH="10">

</tr></td>

<tr><td colspan=2>&nbsp;</td></tr>


<tr><td>
<font face="GillSans, Ventana, Arial, Helv">
<I>functions:</I>
</font>

<INPUT NAME="slas" TYPE="radio" VALUE="slope" CHECKED> Slope
<INPUT NAME="slas" TYPE="radio" VALUE="aspect">Aspect

</font>
</tr></td>
<tr><td colspan=2>&nbsp;</td></tr>

<tr><td>
<!---         button 1 ----->
<input type="submit" value="Generate">
</tr></td>


<tr><td>
<!---         button 2----->
<input type="submit" value="Display">
</tr></td>




</table>
</form>
<dir>
<A HREF="javascript:history.back()"><img src="snowfl.gif" height=32 width=32 alt="Back" border=0></A>
</dir>

</BODY>

</HTML>
0
 
GrdvCommented:
jbrugman:
doesn't it occur to you that naming two different functions the same thing would be some problems.

nawaf:
how does two submitbuttons in the same form do different things, without any JS or anything...

0
 
GrdvCommented:
ooops sorry... jbrugman...
blind me... didn't see that no and on was different functions... sorry...
0
 
nawafAuthor Commented:
: Grdv

Yes yoy are right. I have to change this but UI dont know how. Do you have a solution and what is JS please thanks.
0
 
jbrugmanCommented:
Stay using <INPUT TYPE=BUTTON>
In the second function, use:
   if (document.formname.wait.value=="newvalue") {
   alert("button 1 is pressed!");
   document.form.submit();
   }
}


0
 
GrdvCommented:
what do you want the generate, and the display button to do??
0
 
nawafAuthor Commented:
generate run a program to generate an image.

Once the image is generated display to display it on the screen. Thats it.
0
 
jbrugmanCommented:
Why don't you pre cashe the images then?
0
 
nawafAuthor Commented:
jbrugman

>>> Why don't you pre cashe the images then?

How please ?
0
 
GrdvCommented:
all you need to do for the suggsetion jbrugman came up with is to add this in the head:
<script language="JavaScript">
<!--
var imgSrcArr=new Array(**arguments delimited by a comma**);
var imgArr=new Array();
var gImg;
function preImg(){
  for (i=0;i<ImgSrcArr.length;i++){
    imgArr[i]=new Image();
    imgArr[i].src=imgSrcArr[i];
  }
}
function genImg(){
  gImg = math.random * imgArr.length;
}
function dispImg(imgname){
  document.images[imgname].src = imgArr[gImg].srx;
}
// -->
</script>


then replace:
<tr><td>
      <!---         button 1 ----->
      <input type="submit" value="Generate">
      </tr></td>


      <tr><td>
      <!---         button 2----->
      <input type="submit" value="Display">
      </tr></td>

with:
<tr><td>
      <!---         button 1 ----->
      <input type="button" value="Generate" onClick="genImg();">
      </tr></td>


      <tr><td>
      <!---         button 2----->
      <input type="button" value="Display" onClick="dispImg("view");">
      </tr></td>


      <tr><td>
      <!---         image   ----->
      <img src=**whatever** height=**whatever** width=**whatever** name="view">
      </tr></td>

that makes the genImg generate a random image that when the displaybutton is pressed is displayed in the empty picturebox beneath...

all that's needed to be done then is to change **whatever** to the different attributes needed... and change **arguments delimited by a comma** to "imagename1.gif","imagename2.gif" or whatever the names of your pictures are...
0
 
GrdvCommented:
oops, left out th inactive part...

      function dispImg(imgname){
        document.images[imgname].src = imgArr[gImg].srx;
      }

should be changed to:

      function dispImg(imgname){
        if(gImg!=null){
          document.images[imgname].src = imgArr[gImg].srx;
        }
      }
0
 
jbrugmanCommented:
Make sure the images are all the same size though.
0
 
GrdvCommented:
well, actually, they don't have to be... but it does not look very nice if they're not... :)

// Grdv
0
 
nawafAuthor Commented:
Grdv:
=====
This is what  Jbrugman call pre cashing ?


jbrugman:
=======
You both helped how do I evaluate now ?
0
 
jbrugmanCommented:
Well the points don't really matter to me. If Grdv really wants them, reject the answer, and let grdv answer to evaluate. It is just nice to see someone learn to use the pc in an enhanced way.
So Grdv, let us know what you want.
Justus
0
 
GrdvCommented:
well, doesn't really matter to me... :)
jbrugman, or Justus as he seams to call himself originally came up with the idea...

but, I can't say I'm angry if I get the points, but the main point still is that your problem is solved...

// Grdv
(it's all up to you, nawaf)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.