How to enable/disable a button in a web form using java script

Dear Experts,

Please I need you help.
I have a web form contains three text boxes, two Radio buttons and a save button. I want enable or disable the save button using java script depending on the status of the Text Box (TextChange)  and the radio button (CheckedChange) events  so it will be only enabled when the user change any data in my web form otherwise the save button will be disabled.

Thank you
SamiDeveloper Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Luis PérezSoftware Architect in .NetCommented:
What you have to do is Disable the button at design time (property Enabled = false), or in page_Load (button.Enabled = false). Later, control by javascript when is a change made on any of the other controls and then enable the button.

How to do this:
On Page_Load:
Me.TextBox1.Attributes.Add("onpropertychanged", "EnableButton()")
Me.TextBox2.Attributes.Add("onpropertychanged", "EnableButton()")
Me.TextBox3.Attributes.Add("onpropertychanged", "EnableButton()")
Me.RadioButton1.Attributes.Add("onclick","EnableButton()")
Me.RadioButton2.Attributes.Add("onclick","EnableButton()")

And the javascript function:
function EnableButton() {
    var button = document.getElementById('<%=Me.Button1.ClientID%>');
    button.disabled = false;
}
SamiDeveloper Author Commented:
It did not work I'm sure I miss something but I don't know what?

What exactly I'm trying to accomplish is to make (New and Undo) buttons enabled by default and (Save - Undo) buttons are disabled.  When the user change anything in anyone of the text boxes or he change one of the radio buttons status I want Enable (Save, Undo) Buttons and Disable (New, Delete) buttons.

Notes:
II tried to attach a zip file which contains a sample web application but I get the following error:
(The extension of one or more files in the archive is not in the list of allowed extensions: EnableDisableButoons/EnableDisableButoons/Default.aspx)

Thank you for your help and support.
Luis PérezSoftware Architect in .NetCommented:
Ooops... I noticed when I was rewriting the code that maybe the error was in that the "onpropertychanged" attribute is if fact "onpropertychange", not "onpropertychanged". I apologyze for this.

Mmm... the behaviour presented is correct. Let's try with more complete code.

Supposing that the controls are name as this:
btnNew, btnUndo, btnSave, btnDelete
txtText1, txtText2, txtText3
radRadio1, radRadio2

Also renamed javascript function from EnableButton() to ControlChanges().

Protected Sub Page_Load(...)
    'New and Delete buttons enabled by default
    btnNew.Enabled = True
    btnDelete.Enabled = True
    'Save and Undo buttons disabled by default
    btnSave.Enabled = False
    btnUndo.Enabled = False
    'Add javascript attributes to control changes
    Me.txtText1.Attributes.Add("onpropertychange", "ControlChanges()")
    Me.txtText2.Attributes.Add("onpropertychange", "ControlChanges()")
    Me.txtText3.Attributes.Add("onpropertychange", "ControlChanges()")
    Me.radRadio1.Attributes.Add("onclick","ControlChanges()")
    Me.radRadio2.Attributes.Add("onclick","ControlChanges()")
End Sub

And now the javascript function:
function ControlChanges() {
    //When this function is called, the user has made a change in one
    //of the textboxes or the radiobuttons
    var btnNew = document.getElementById('<%=Me.btnNew.ClientID%>');
    var btnUndo = document.getElementById('<%=Me.btnUndo.ClientID%>');
    var btnSave = document.getElementById('<%=Me.btnSave.ClientID%>');
    var btnDelete = document.getElementById('<%=Me.btnDelete.ClientID%>');
    //Disable New and Delete
    btnNew.disabled = true;
    btnDelete.disabled = true;
    //Enable Save and Undo
    btnSave.disabled = false;
    btnUndo.disabled = false;
}

Hope that helps.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

SamiDeveloper Author Commented:
I followed your code and I run the application and I typed some text in the textbox but unfortunatly it's not working.

Code Behinde:
 
Page Load Event
If Not Me.Page.IsPostBack Then
   Me.btnNew.Enabled = True
   Me.btnDelete.Enabled = True
   Me.btnSave.Enabled = False
   Me.btnUndo.Enabled = False
   Me.TextBox1.Attributes.Add("onpropertychange", "ControlChanges()")
   Me.TextBox2.Attributes.Add("onpropertychange", "ControlChanges()")
   Me.RadioButton1.Attributes.Add("onclick", "ControlChanges()")
   Me.RadioButton2.Attributes.Add("onclick", "ControlChanges()")
End If
 
ASPX Code: Javascript
<script>
function ControlChanges() {
  var BtnNew = document.getElementById('<%=Me.BtnNew.ClientID%>');
  var BtnSave = document.getElementById('<%=Me.BtnSave.ClientID%>');
  var BtnDelete = document.getElementById('<%=Me.BtnDelete.ClientID%>');
  var BtnUndo = document.getElementById('<%=Me.BtnUndo.ClientID%>');
  BtnNew.disable = true;
  BtnDelete.disable = true;
  BtnSave.disable = false;    
  BtnUndo.disable = false;
}
</script> 

Open in new window

ScreenShot.JPG
Luis PérezSoftware Architect in .NetCommented:
I'm sure that code must be working. Let's see if the ControlChanges() javascript function is executing at any moment. In the first line inside the function, put this line:
alert('Hi, I'm here');
... and execute the code. Try writing on the textboxes, and if nothing happens try also clicking on the radio buttons. Then write back to tell me what happened.
SamiDeveloper Author Commented:
The alert show up when I typed text and also when I Checked the radio button but  (Save, Undo) buttons did not become enabled?
Luis PérezSoftware Architect in .NetCommented:
I checked your code. You wrote "disable" instead "disabled" for the disabled html property. If you copied your code from your page, then the source code is wrong, too.

Try this:
function ControlChanges() {
  var BtnNew = document.getElementById('<%=Me.BtnNew.ClientID%>');
  var BtnSave = document.getElementById('<%=Me.BtnSave.ClientID%>');
  var BtnDelete = document.getElementById('<%=Me.BtnDelete.ClientID%>');
  var BtnUndo = document.getElementById('<%=Me.BtnUndo.ClientID%>');
  BtnNew.disabled = true;
  BtnDelete.disabled = true;
  BtnSave.disabled = false;    
  BtnUndo.disabled = false;
}

(note that all the 4 *btnXXXX.disabled = $$$* now reads "disabled" instead "disable").

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SamiDeveloper Author Commented:
You are right it's my fault; finally it's achieved thanks to you.
Best Regards.
SamiDeveloper Author Commented:
Your help is highly appreciated sir
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.