Disabling Link Button If Textarea Is Empty

I have basic button click that appends text a draggable div. In order for the button event to trigger, text has to be introduced to the textareafield. This is just a very basic way

Solution 1:

You can simply check for textarea value and prevent behaviour on #button click handler if textarea value is incorrect (for example, is empty).

Updated fiddle

$('#button').click(function (e)
{
    if ($('textarea').val() == "")
    {
        returnfalse;
    }
    ... other code

Solution 2:

Essentially all you should have to do is check the value of the textarea first, in your buttons event handler. You can do so like this:

var text = $('textarea').val();
if(text == ''){
    return;
}

Here is an updated fiddle: http://jsfiddle.net/0wbnud4k/57/

Edit: You could also replace the return; with a preventDefault();

Solution 3:

Here is a little something that may help you out, not just with the background functionality, also with the visual styling.

$(document).ready(function(){   
    functionchangeMyBTN(a) {
        if (a == false) {
            //Adds a Class name for the visual styling
            $('a[id="button"][role="button"]').addClass('aBTNdisabled');
            //Capture and prevents events to the BTN
            $('a[id="button"][role="button"][class="aBTNdisabled"]').click(function(e) { e.preventDefault();});
        } else {
            //Remove class name if BTN should be enabled
            $('a[id="button"][role="button"]').removeClass('aBTNdisabled');
        }
    }
    $('textarea').keyup(function (e){
        if ( $(this).val() != "" ) {
            //Enables BTNchangeMyBTN(true);
        } else {
            //Disables BTNchangeMyBTN(false);
        }
    });
    /* This captures the mouse event if BTN is enabled */
    $('a[id="button"][role="button"]:not([class="aBTNdisabled"])').click(function() {
        /* Create the event action when clicking the link btn *///document.location.href="http://www.google.com";alert($('textarea').val());
    });
    /* Sets the default state of the btn */changeMyBTN(false);

});