CODEWITHSUNDEEP
javascriptjquery
sab669
sab669

Reputation: 4104

How to check if all controls on the page are empty?

I have a method that is supposed to loop over all of the controls on my page and return false if any one of them has a value other than empty string / null. This gets called as part of an OnSaveValidation. If the form is empty, they should be able to save.

function IsFormEmpty()
{
    var ancestor = document.getElementById('PAIQIFunc'); //PAIQIFunc is the id of a div
    var descendents = ancestor.getElementsByTagName('*');

    var i = 0;
    for (i = 0; i < descendents.length; ++i)
    {
        var e = descendents[i];

        try
        {
            var eVal = $("#" + e).val();

            // just check to make sure eVal has *some* value
            if (eVal != '' || eVal != undefined || eVal != null)
                return false;
        }
        catch (err){
            //simply move on to next control...   
        }
    }

    return true;
}

In most cases, var eVal = $("#" + e).val(); throws an exception because it's a div or something like that. I'm only interested in the 108 drop down menus and 1 textbox on my form.

I set a breakpoint on my if statement and it was never hit. But descendents has like 1200 elements in it; I couldn't possibly step through it all trying to find what I'm looking for...

How else could I modify the code to check each control on the page?

EDIT: I should note that the web application is a C# / ASP.NET project using Razor views and we're using Telerik's Kendo web UI controls, not "vanilla" .NET controls if that makes a difference. So all of the controls are defined in the .cshtml file like so:

@(Html.Kendo().DropDownListFor(m => m.SomeProperty).HtmlAttributes(new { id = "cmbSomeProperty", @class = "k-dropdown-width-30", @tabIndex = "1", style = "width:60px" }).BindTo(ViewBag.SomePropertyDataSource).OptionLabel(" "))

Upvotes: 0

Views: 362

Answers (1)

Sandman
Sandman

Reputation: 2307

You could try the following:

var hasValue = false;
var div = document.getElementById('PAIQIFunc');

$(div).find('input')
    .each(function() { // iterates over all input fields found
        if($.trim($(this).val()).length != 0) {
            hasValue = true; // if field found with content
            break;
        }
    });

if(hasValue === false) {
    // save logic here
}

Hope this helps.

Upvotes: 2

Related Questions