Hide/Show Disable/Enable Form Fields & Submit Buttons

[devine]

Hi All,

I have a form with a drop-down list where the User will select No or Yes.
If Yes is selected, I would like a text input box to be shown and one of my submit buttons to be enabled, whilst another submit button will automatically become disabled.

I am very new to this and have trawled the net looking for simple, easy-to-understand code and believe this can only be done with Javascript? So apologies if this is in the wrong forum.

My code snippets are:

<tr><td width="199" bgcolor="#260063">
<font color="#FFFFFF" face="Sky InfoText Bd">Emergency?: </font> </td>
<td width="17">&nbsp;</td>
<td width="360"><select name="emergency">
<option value="No" show="none">No</option>
<option value="Yes" show="justification">Yes</option>
</select>
</td></tr>
<tr relation="justification"><span class="accessibility"> If Yes:</span><td width="199" bgcolor="#260063">
<font color="#FFFFFF" face="Sky InfoText Bd">PROVIDE JUSTIFICATION FOR EMERGENCY CHANGE: </font> </td>
<td width="17">&nbsp;</td>
<td width="360"><textarea name="emergency_justification" rows="3" size="150" cols="38"></textarea></td></tr>


When I view the page, the PROVIDE JUSTIFCATION FOR EMERGENCY CHANGE input box is shown irrespective of whether Yes or No is selected.

So somewhere I have messed up the code.

Additionally, once YES is selected, I would like my "Submit to Change Control" button disabled and my "Submit Emergency Change" button to become enabled.

<input type="submit" name="Submit" value="Submit to Change Control">
<input type="submit" name="Submit1" value="Submit Emergency Change" disabled=true>


Would some simple SQL IF THEN statements deal with this?

Thanks in advance for any assistance,
Lynn

[lmf232s]

This is javascript but you could do it server side but that would require a post back.
Ill just some you some basics and then see what you cant do.
If you need specific help then post back.

using just html you can set an element to readonly or disabled.
readonly - The user is unable to edit the field but it allows you to still request the field value on a post back Request.Form("Name")

Disabled - will grey/disable the element. If say its a text box it will still display on the screen and will show the text in the textbox but it will be greyed out. This method will not give you access to the value of the textbox on a postback.

Correct me if im wrong guys but i believe thats the way it works.

I usually use readonly to keep users from entering data or changing the data in a textfield, etc but use disabled on my buttons.

Here is some code that will show you how to enable, hide, and show.
Dont pay much attention to the hidView hidden field. I just used this as a way to toggle between the 2 views. That could of been done a couple of ways. If you comment out the dine for the display, then you will see that button get disabled instead.
block = show
none = hide

<script language="javascript">
function toggleview(){
if(document.form1.hidView.value == '1'){
document.form1.cmdButton1.disabled = false;
document.form1.cmdButton2.disabled = true;
document.form1.cmdButton2.style.display = 'none';
document.form1.txtFName.disabled = true;
document.form1.hidView.value = '0';
}else{
document.form1.cmdButton1.disabled = true;
document.form1.cmdButton2.disabled = false;
document.form1.cmdButton2.style.display = 'block';
document.form1.txtFName.disabled = false;
document.form1.hidView.value = '1';
}
}
</script>

<form name="form1">
<input type=hidden name=hidView value="1">
<input type="text" name="txtFName" value=""><br>

<input type="button" name="cmdButton1" value="Button1" disabled><br>
<input type="button" name="cmdButton2" value="Button2"><br>

<input type="button" name="cmdChangeView" value="Toggle Button" onclick="toggleview();">
</form>

[devine]

Hi lmf232s,
Many thanks for your detailed code (it's made me realise that I don't know that much about programming at all!! or at least JS, which i why I was finding this very hard).
I'm going to give it a go and will be back if I need further assistance.
Once again, many thanks for the code - it's very appreciated :)