Avatar of padmasambhava
padmasambhava

asked on 

Enabling and disabling text input onclicking a radio button

Hi Experts,

I'm writing an admin page for a site and this particular bit allows an admin to set the text that will be displayed when the system is down.  It comes in two flavors, one for taking it down immediately and the other to give a warning and then take it down.  The default message is to take it down immediately.

I've got two radio buttons to allow selecting one or the other and some javascript that should enable and disablethe textarea message text.  When the page loads it defaults to the default message but clicking on the other radio button doesn't seem to run the javascript to enable the other textarea.

Thanks for any insight.
Peter



<fieldset><legend>Take the site up or down</legend><hr>
<form method="post" action="admin_site_availability.asp" name="site_availability_form">
<table width="100%">
  <tr>
    <td width="10%"><input type="radio" name="rbMsgSource" value="useDefault" checked onclick="enableDefault()"></td>
    <td width="90%">Use this default message when you are taking the system down immediately.</td>
  </tr>
  <tr>
    <td></td>
    <td><textarea name="txtDefaultMessage" rows="5" cols="35"><%= msgAvailabilityDefault %></textarea></td>
  </tr>
</table><hr>

<table width="100%"
  <tr>
      <td width="10%"><input type="radio" name="rbMsgSource" value="useCustom" onclick="enableCustom()"></td>
      <td width="90%">Use this warning message and announcement message when you want to schedule a maintenance window.  Remember you must still take the system down at the proper time, and also bring it back up.</td>
  </tr>
  <tr>
      <td width="10%"></td>
      <td><textarea name="txtCustomWarning" rows="5" cols="35" disabled="true"><%= msgAvailabilityWarning %></textarea></td>
  </tr>
  <tr>
      <td width="10%"></td>
      <td><textarea name="txtCustomMessage" rows="5" cols="35" disabled="true"><%= msgAvailabilityCustom %></textarea></td>
  </tr>
  <tr>
    <td><input type="submit" value="Submit"></td>
  </tr>
</table>
</form>
</fieldset>

<script type="text/javascript">
function enableDefault() {
  document.site_availability_form.txtDefaultMessage.disabled=false;
  document.site_availability_form.txtCustomWarning.disabled=true;
  document.site_availability_form.txtCustomMessage.disabled=true;
  }
function enableCustom() {
  document.site_availability_form.txtDefaulMessage.disabled=true;
  document.site_availability_form.txtCustomWarning.disabled=false;
  document.site_availability_form.txtCustomMessage.disabled=false;
  }
</script>
JavaScript

Avatar of undefined
Last Comment
padmasambhava
Avatar of fre77
fre77

You missed a 't'. It should be:
function enableCustom() {
///t here
  document.site_availability_form.txtDefaultMessage.disabled=true;
  document.site_availability_form.txtCustomWarning.disabled=false;
  document.site_availability_form.txtCustomMessage.disabled=false;
  }
Avatar of padmasambhava

ASKER

Hey fre77,  I don't see where I'm missing a t.  Probably just looking at it too long.  <g>
Avatar of Si_Hibbard
Si_Hibbard
Flag of United States of America image

Set ID's for the textareas. Use getElementById. Here:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<fieldset><legend>Take the site up or down</legend><hr>
<form method="post" action="admin_site_availability.asp" name="site_availability_form">
<table width="100%">
  <tr>
    <td width="10%"><input type="radio" name="rbMsgSource" value="useDefault" checked onclick="enableDefault()"></td>
    <td width="90%">Use this default message when you are taking the system down immediately.</td>
  </tr>
  <tr>
    <td></td>
    <td><textarea name="txtDefaultMessage" id="txtDefaultMessage" rows="5" cols="35"><%= msgAvailabilityDefault %></textarea></td>
  </tr>
</table><hr>

<table width="100%"
  <tr>
      <td width="10%"><input type="radio" name="rbMsgSource" value="useCustom" onclick="enableCustom()"></td>
      <td width="90%">Use this warning message and announcement message when you want to schedule a maintenance window.  Remember you must still take the system down at the proper time, and also bring it back up.</td>
  </tr>
  <tr>
      <td width="10%"></td>
      <td><textarea name="txtCustomWarning" id="txtCustomWarning" rows="5" cols="35" disabled="true"><%= msgAvailabilityWarning %></textarea></td>
  </tr>
  <tr>
      <td width="10%"></td>
      <td><textarea name="txtCustomMessage" id="txtCustomMessage" rows="5" cols="35" disabled="true"><%= msgAvailabilityCustom %></textarea></td>
  </tr>
  <tr>
    <td><input type="submit" value="Submit"></td>
  </tr>
</table>
</form>
</fieldset>

<script type="text/javascript">
function enableDefault() {
 
  document.getElementById('txtDefaultMessage').disabled = false;
  document.getElementById('txtCustomWarning').disabled = true;
  document.getElementById('txtCustomMessage').disabled = true;
  }
function enableCustom() {

  document.getElementById('txtDefaultMessage').disabled = true;
  document.getElementById('txtCustomWarning').disabled = false;
  document.getElementById('txtCustomMessage').disabled = false;
 
  }
</script>
<body>
</body>
</html>
Avatar of fre77
fre77

It is in the line that says:
  document.site_availability_form.txtDefaulMessage.disabled=true;

right after
function enableCustom() {
ASKER CERTIFIED SOLUTION
Avatar of fre77
fre77

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of fre77
fre77

Thanks for the points :)
Avatar of padmasambhava

ASKER

No problem!  & Thanks...
JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo