Home » Jquery » javascript – Validating dynamically added select fields using JQuery (ASP.NET WebForms with MasterPage)

javascript – Validating dynamically added select fields using JQuery (ASP.NET WebForms with MasterPage)

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have this ASP.NET WebForm that has a group of select tags with the option to add more (dynamically).

My question is: how would I validate this type of form? My first attempt was to create a JQuery code that disables the button that submits the data, until all the dropdown fields have been filled in. The problem is the code that I’m using doesn’t seem to fire the function that enables the button.

This here is the code for the WebForm, this content placeholder is inside the Form tag on the masterpage:

    <asp:Content ID="PageContentBody" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
            <div class="container mt-3 bg-white form-group fieldGroup">
        <div class="input-group">
            <select name="selectType" class="form-control">
            <option value="0">-- SELECT TYPE --</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectDesc" class="form-control">
            <option value="0">-- SELECT DESCRIPTION --</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectPPE" class="form-control">
            <option value="0">-- SELECT PPE #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectAsset" class="form-control">
            <option value="0">-- SELECT ASSET #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectSerial" class="form-control">
            <option value="0">-- SELECT SERIAL #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
            <div class="input-group-addon"> 
                <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> +</a>
            </div>
        </div>
    </div>

        <asp:Button ID="Button1"  ClientIDMode="Static" CssClass="btn btn-primary" runat="server" Text="Save" OnClick="Button1_Click" />
</asp:Content>

Here is the part of the code that I use to dynamically generate fields, basically it’s a hidden div. My JQuery “copies” this to generate new row of fields to the form and potentially the source of the problem:

<asp:Content ContentPlaceHolderID="BodyScripts" runat="server">
       <!-- copy of input fields group -->
    <div class="container mt-3 bg-white form-group fieldGroupCopy" style="display: none;">
        <div class="input-group">
            <select name="selectType" class="form-control">
            <option value="0">-- SELECT TYPE --</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectDesc" class="form-control">
            <option value="0">-- SELECT DESCRIPTION --</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectPPE" class="form-control">
            <option value="0">-- SELECT PPE #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectAsset" class="form-control">
            <option value="0">-- SELECT ASSET #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
        <select name="selectSerial" class="form-control">
            <option value="0">-- SELECT SERIAL #--</option>
            <option value="1">2</option>
            <option value="2">3</option>
            <option value="3">4</option>
            <option value="4">5</option>
        </select>
            <div class="input-group-addon"> 
                <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> -</a>
            </div>
        </div>
    </div>

Here is the code that I use to copy/generate the additional select fields, and also probably another source of my problem, so I’m putting this here:

 $(document).ready(function(){
        //group add limit
        var maxGroup = 10;
        var ctr = 0

        //add more fields group
        $(".addMore").click(function(){
            if($('body').find('.fieldGroup').length < maxGroup){
                var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
                $('body').find('.fieldGroup:last').after(fieldHTML);
            }else{
                alert('Maximum '+maxGroup+' groups are allowed.');
            }
        });

        //remove fields group
        $("body").on("click",".remove",function(){ 
            $(this).parents(".fieldGroup").remove();
        });
    });

And finally, the validation method that I’m using. This disables the button IF each select tag in the page has a value of 0. Otherwise if each select tag has a value other than 0, then enable the button:

        function buttonState(){
    $("select").each(function(){
        $('#Button1').attr('disabled', 'disabled');
        if($(this).val() == "0" ) return false;
        $('#Button1').attr('disabled', '');
    })
}

$(function(){
    $('#Button1').attr('disabled', 'disabled');
    $('select').change(buttonState);
})

What am I doing wrong? Is there any better approach for this?

How to&Answer: