CODEWITHSUNDEEP
javascriptjqueryhtmlformstextarea
Liam-FD
Liam-FD

Reputation: 67

Javascript disable submit unless all text areas filled

I have varied textareas in a form that I wish to be completed before the submit button is activated. I have researched into this and already found how to specify particular textareas/inputs however dependent on the user group will be dependent on how many text areas are shown so I need a blanket javascript to just check that any textareas shown on the page are filled before the submit button is activated.

I have looked at this: http://jsfiddle.net/qKG5F/641/ however have not managed to successfully implement it myself. 

(function() {
$('form > input').keyup(function() {

    var empty = false;
    $('form > input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('#register').attr('disabled', 'disabled');
    } else {
        $('#register').removeAttr('disabled');
    }
});   
 })()

Could this be because of how I have created my textareas? As shown below

<textarea name="i_2" id="i_2" class="input-block-level"></textarea>

Instead of using <input> as the JSFiddle example does above.

Is there any way to disable the submit button if not all textareas have been filled (without specifying each textarea)? I have edited my submit button accordingly with the JSFiddle example.

Upvotes: 0

Views: 90

Answers (2)

Alexander R.
Alexander R.

Reputation: 1756

Why do you think that textarea is an input? Here is the code for the situation when you have inputs and textareas in one form, and you want the button to be disabled if one of the inputs or textareas is empty. Input and textarea are different html elements! You can't select textarea with "input".

(function() {
    $('form > input, form > textarea').keyup(function() {

        var empty = false;
        $('form > input, form > textarea').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
})()

For only textareas use:

$('form > textarea')

Better approach is to use class name, for example "must_be_filled" and assign this class to any html element.

The you can select elements by:

$('form > .must_be_filled')

Try this:

http://jsfiddle.net/g0m79p81/

Upvotes: 0

Chris
Chris

Reputation: 113

In HTML5 you can actually use a very simple "required" command to make any form elements a required field before the submit button is activated. It removes the need for any unnecessary JavaScript. 

<textarea name="i_2" id="i_2" class="input-block-level" required></textarea>

give it a try :) stuff like this is why I love HTML5

Upvotes: 1

Related Questions