• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1185
  • Last Modified:

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
0
Samijf
Asked:
Samijf
  • 5
  • 4
1 Solution
 
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;
}
0
 
SamijfAuthor 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.
0
 
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.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
SamijfAuthor 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
0
 
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.
0
 
SamijfAuthor 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?
0
 
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").
0
 
SamijfAuthor Commented:
You are right it's my fault; finally it's achieved thanks to you.
Best Regards.
0
 
SamijfAuthor Commented:
Your help is highly appreciated sir
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now