nawaf
asked on
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
how does your code look like??
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.val
}
function go_no() {
if (document.formname.wait.va
// do nothing
alert("press button 1 first!");
}
if (document.formname.wait.va
alert("button 1 is pressed!");
}
}
</SCRIPT>
<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.val
}
function go_no() {
if (document.formname.wait.va
// do nothing
alert("press button 1 first!");
}
if (document.formname.wait.va
alert("button 1 is pressed!");
}
}
</SCRIPT>
ASKER
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> </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> </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> </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> </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.b
</dir>
</BODY>
</HTML>
<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> </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> </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> </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> </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.b
</dir>
</BODY>
</HTML>
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...
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...
ooops sorry... jbrugman...
blind me... didn't see that no and on was different functions... sorry...
blind me... didn't see that no and on was different functions... sorry...
ASKER
: 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.
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.
Stay using <INPUT TYPE=BUTTON>
In the second function, use:
if (document.formname.wait.va
alert("button 1 is pressed!");
document.form.submit();
}
}
In the second function, use:
if (document.formname.wait.va
alert("button 1 is pressed!");
document.form.submit();
}
}
what do you want the generate, and the display button to do??
ASKER
generate run a program to generate an image.
Once the image is generated display to display it on the screen. Thats it.
Once the image is generated display to display it on the screen. Thats it.
Why don't you pre cashe the images then?
ASKER
jbrugman
>>> Why don't you pre cashe the images then?
How please ?
>>> Why don't you pre cashe the images then?
How please ?
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].s
}
// -->
</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","imagenam
<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].s
}
// -->
</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","imagenam
oops, left out th inactive part...
function dispImg(imgname){
document.images[imgname].s
}
should be changed to:
function dispImg(imgname){
if(gImg!=null){
document.images[imgname].s
}
}
function dispImg(imgname){
document.images[imgname].s
}
should be changed to:
function dispImg(imgname){
if(gImg!=null){
document.images[imgname].s
}
}
Make sure the images are all the same size though.
well, actually, they don't have to be... but it does not look very nice if they're not... :)
// Grdv
// Grdv
ASKER
Grdv:
=====
This is what Jbrugman call pre cashing ?
jbrugman:
=======
You both helped how do I evaluate now ?
=====
This is what Jbrugman call pre cashing ?
jbrugman:
=======
You both helped how do I evaluate now ?
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
So Grdv, let us know what you want.
Justus
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)
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)