Disabling buttons on forms

Question

I have 5 different forms where I am disabling the submit button when a valid form is submitted so the form can only be submitted once. I am using a hidden field on each form to get the form Id.

function OnSubmit(buttonId) {
var disableButton = false;

if ($('#formType').val() == 1) {
    if ($('#CreateEntityName').val() != "" && $('#newAccountGroup').val() != "") {
        disableButton = true;
    }
}
if ($('#formType').val() == 2) {
    if ($('#newAccount').val() != "" && $('#lastName').val() != "") {
        disableButton = true;
    }
}
if ($('#formType').val() == 3) {
    if ($('#select2-entityId').val() != 0 && $('#contact').val() != "") {
        disableButton = true;
    }
}
if ($('#formType').val() == 4) {
    if ($('#select2-entityId').val() != 0 && $('#contact').val() != "" && $('#need').val() != "" && $('#candidates').val() != 0) {
        disableButton = true;
    }
}
if ($('#formType').val() == 5) {
    if ($('#newAccount').val() != "" && $('#country').val() != "") {
        disableButton = true;
    }
}
if (disableButton == true) {
    $('#' + buttonId + '').attr("disabled", true);
}
}

@Html.Hidden("formType", 5)

Answer 1

I see a few things that can be done to tweak this:

• Cache your selectors instead of re-querying the DOM each time. Anything you use more than once should be cached.
• Since all of the form fields use ID's you can use the native getElementById for faster performance.
• Use strict equality when your are evaluating to reduce the chance of a gotcha.
• Use 'use strict;' if you aren't already.
• Surround your code by an IIFE, to encapsulate it and create a private scope.
• Namespace your code

`

(function($){
  'use strict';
  var validateForm = {};

  //shortcut functions to simplify code below
  function isEmpty(str) { return str === ''; }
  function isNotSelected(num) { return num === 0; }
  function id(str) { return document.getElementById(str).value+''; }
  function getNum(str) { return document.getElementById(str).value-0; }

  function onSubmit( buttonId ) {
    var disableButton = false;
    var formType = getNum('formType');

    //cache selectors below
    var contact= id('contact');
    var newAccount =  id('newAccount');
    //assuming this is a dropdown
    var el = document.getElementById('select2-entityId');
    var entityId = el.options[ el.selectedIndex ].value -0;

    switch( formType ) {
       case 1:
        if ( isEmpty(id('CreateEntityName')) && isEmpty(id('newAccountGroup')) ) {
          disableButton = true;
        }
        break;

       case 2:
        if ( isEmpty(newAccount) && isEmpty(id('lastName')) ) {
          disableButton = true;
        }
        break;

       case 3:
        if ( isNotSelected(entityId) &&  isEmpty(contact) ) {
          disableButton = true;
        }
        break;

       case 4:
        if ( isNotSelected(entityId) && isEmpty(contact) && isEmpty(id('need')) && isNotSelected(getNum('candidates')) ) {
          disableButton = true;
        }
        break;

       case 5:
        if ( isEmpty(newAccount) && isEmpty(id('country')) ) {
          disableButton = true;
        }
        break;
    }

    if ( disableButton ) {
      $('#' + buttonId + '').prop('disabled', true);
    }

    return disableButton;
  }

  validateForm.init = onSubmit;
  window.validateForm = validateForm;

  //document.ready if you need to do something else
  $(function(){
    if ( validateForm.init() ) {
      //do something here
    }  
  });

})( jQuery );

I am sure there are other things that can be done. Hope that helps!