SQL Server administration and T-SQL development, Web Programming with ASP.NET, HTML5 and Javascript, Windows Phone 8 app development, SAP Smartforms and ABAP Programming, Windows 7, Visual Studio and MS Office software Kodyaz Development Resources
Development resources, articles, tutorials, samples, codes and tools for .Net, SQL Server, Windows, Windows Phone, SAP and ABAP, like SAP UI5, Screen Personas, etc.






How to Enable / Disable Submit Button using Javascript According to any CheckBox is Checked on a WEB Page


While developing your HTML code, you may want to control a submit button and enable or disable the submit button according to a checkbox on the web page. HTML developers can easily enable a submit button when a checkbox is checked and disable the submit button when the checkbox is unchecked or cleared. If you want to control the button due to the checked/unchecked status of a single checkbox, this is relatively easy and can be managed by Javascript coding and the onClick event of the Checkbox HTML control.

The Javascript code that programmers should develop will get confusing if you have to control a numerous checkboxes on the web page for the submit button to enable or disable.

If this is the case, you have a few alternative solutions for determining the state of the submit button.
On every OnClick event, developers can control every checkbox and if any of the checkboxes is checked then they can enable the submit button.
An other method can be keeping a list of checked checkboxes and on every OnClick event you can add the checkbox to the list if it is checked, or remove from the list if it is cleared. Then you can check the list and if the list has no items then disable the button and if the list has items you can enable the submit button.

I want to show the second method to control the enable or disable status of a button using javascript with keeping a list of checked checkbox items.









First, you should copy and paste the below javascript code with the js function named EnableDisableButton into the HTML code.

<script type="text/javascript">
  var idList = ";"
  document.getElementById('textbox1').value = idList;

  function EnableDisableButton(cb, id) {

    if (cb.checked == 1) {
      idList = idList + id + ";"
      document.getElementById('textbox1').value = idList;
    }

    if (cb.checked == 0) {
      var v;
      v = ";" + id + ";"
      idList = idList.replace(v, ";");
      document.getElementById('textbox1').value = idList;
    }

    if (idList == ";") {
      document.getElementById('button1').disabled = true;
    } else {
      document.getElementById('button1').disabled = false;
    }

  }

</script>

Second, you should add the EnableDisableButton() function to the onClick event of the checkbox control as follows:

onclick="javacript:EnableDisableButton(this,value);"

As you can see in the javascript source code, textbox1 html control is used to display the content of the idList variable which is used in the function to keep concatenated values of the checkbox items.
If a checkbox is checked, then the value of the related checkbox is added to the idList variable.
If the checkbox is cleared/unchecked then the value of the checkbox is removed by replacing its value using Javascript string object Replace method.
The last control is the idList variable control. If it has no value then the submit button is disabled. If there is a value in the idList variable then the submit button is enabled.






Javascript

Javascript Articles

Javascript Forums












Javascript Tutorials, Articles and Javascript Codes

Morris Number Sequence Puzzle Solution in Javascript
Javascript Array Puzzle: People with Sword Around a Circle
Sort Array in Random Order using Javascript Shuffle Function
Javascript MultiDimensional Array example codes
How many times a day a clock's hands overlap?
Javascript For Loop Sample Code
Use Javascript Replace Function Example to Replace Multi Space in a String with Single Space
Javascript String Trim with Javascript Trim Function Examples
Javascript String Split Function Example & Split Javascript Tutorial
Javascript Phone Format : Phone Number Format and Mask Telephone Numbers with Javascript
How to Enable / Disable Submit Button using Javascript According to any CheckBox is Checked on a WEB Page
Error Handling in JavaScript using Try...Catch Statement
How to display or unhide hidden table rows and hide or toggle a table row using Javascript functions
How to Replace All Occurrences of a String using Javascript Replace Function
How to autoformat and mask telephone numbers with Javascript
How to get key codes of characters using javascript code and key code list
Javascript Forums




Copyright © 2004 - 2017 Eralper YILMAZ. All rights reserved.
Community Server by Telligent Systems