Check multiple textarea fields for value using jquery and then perform a function

Question

Basically what I'm trying to accomplish is I want to check multiple dynamic forms on a page. Then if All textareas are empty OR have the default value, perform a function. Otherwise if any of them are not empty without the default value, cancel the function.

I know how to get the total count of the divs/forms or go through each one, sorta. Just can't put it together. I want it to check them all first before doing anything.

if (jQuery("div[id^='statuscontainer_']:last").length == 0){

}

I don't think this would get quite what I need to do. Or either I not sure how to form it into the function I need. Thanks

Answer 1

You could take this approach

1. Give each input a similar class, in my example, inputBox

2. Create a script to add the total of each inputBox length. If that total == 0, take whatever approach, otherwise continue with the script

   $('#show').click(function() {
       var total = 0;
       $('.inputBox').each(function() {
           total += this.value.length;
       });
       if (total == 0) {
           // Do whatever if it's empty
       } else {
           // Do whatever if its not
       }
   });
   

3. ???
4. Profit

Try it

http://jsfiddle.net/kLnHC/

Edit

Though, in your application, you'd probably want to change the event that triggers it to $('#yourForm').submit(function() { rather than a click function.

Answer 2

use total += $(this).val(); instead of total += this.value.length; will check if there is only a " " and/or a "\n" in your textarea