Disabling and Enabling a form submit button

Question

I have been trying to create a bit of javascript that will disable a submit button that is a anchor tag when the page loads then when all the form inputs and textareas are filled in it will be enabled and the class of the button will also need to change when its enabled.

I have had a few unsuccessful of coding this and found a jquery way of doing it but that didn't work because im using a anchor tag instead of a input button

Answer 1

To disable any a tag:

$('a').click(function(event)
{
  event.preventDefault();
});

if you know id or class of the anchor tag then use $('#aId') o $('.aId') respectively

If you don't want to use jQuery:

var anchors = document.querySelectorAll('a');
for (var i = 0; i < anchors.length; i++ )
    anchors[i].onclick = function(event)
    {
     event.preventDefault();   
    }​​​

Answer 2

You have to prevent the triggering of the link click-event.

Using jQuery that would be something like:

$('a.disabled').on('click', function(event){
    event.preventDefault();
});

So when the form is ready to be submit you could run the following:

$('a.disabled').toggleClass('disabled enabled');

This causes the button to be enabled and now has the class .enabled

Answer 3

In jQuery, you can simply do that by return false

$("#disable_button").click(function(){
   //somethings you need
   return false;
});