Jquery Dropdowns Bind Event Are Firing Before Firing of Button Click Event

Viewed 29

I am having 3 dropdowns with textbox and hiddenfield & Submit BUtton. Dropdowns are binding with Sql DB using Jquery AJAX method on PageLoad. When I click on Button, the droppdowns bind Event again executes before Button Click event. I have used e.PreventDefault() method to avoid page postback too. How should I make button click event should fire on click.

html code:

<form id="form1" runat="server">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h3>Data Entry </h3><small class="float-right font-italic text-dark">Fields marked with <span class="font-weight-bolder text-danger">*</span> are mandatory</small>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <%--<div class="card-header"></div>--%>
                        <div class="card-body bg-light">
                            <div class="row">
                                <div class="col-lg-4">
                                    <label class="font-weight-bold">Current Year</label><br />
                                    <div id="currentqtr" class="bg-secondary text-white form-control"></div>
                                </div>
                                <div class="col-lg-4">
                                    <label class="font-weight-bold">Select Region <span class="text-danger font-weight-bold">*</span></label><br />
                                    <select class="form-control" id="ddlRegion"></select>
                                </div>
                                <div class="col-lg-4">
                                    <label class="font-weight-bold">Select Section <span class="text-danger font-weight-bold">*</span></label><br />
                                    <select class="form-control" id="ddlSection"></select>
                                </div>

                            </div>
                            <div class="row mt-3">
                                <div class="col-lg-4">
                                    <label class="font-weight-bold">Select Service<span class="text-danger font-weight-bold">*</span></label><br />
                                    <select class="form-control" id="ddlService"></select>
                                </div>
                                <div class="col-lg-8">
                                    <label class="font-weight-bold">Enter Comments<span class="text-danger font-weight-bold">*</span></label><br />
                                    <textarea class="form-control" height="250px" placeholder="Max 2000 Chars." id="txtComments"></textarea>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 text-center m-4">
                                    <button class="btn btn-dark" id="btnSubmit">Submit Comments</button>
                                </div>
                            </div>
                        </div>
                        <%--<div class="card-footer">Footer</div>--%>
                    </div>
                </div>
            </div>
        </div>
        <asp:HiddenField ID="HiddenFieldmid" runat="server" ClientIDMode="Static" />
        <asp:HiddenField ID="HiddenFieldQTRid" runat="server" ClientIDMode="Static" />
    </form>

JS:

$(document).ready(function () {
    FillDetails();
    FillRegion();
    FillSection();
    FillService();    
});


$(function () {
    $("#submitbutton").click(function (e) {
        e.preventDefault();
        //debugger;
        //alert('Hello');         
        SaveComments();

    });
});

function FillDetails() {
    //debugger;
    var d = "{Flag:'1'}";    

    $.ajax({
        type: "POST", //GET or POST or PUT or DELETE verb
        url: "../POC.asmx/fGetDetails",
        data: d,
        contentType: "application/json; charset=utf-8",
        dataType: "json", //Expected data format from server
        beforeSend: function () {
            //BlockUI();
        },
        success: function (Response, status, xhr) {//On Successfull service call
            if (Response.d[0].qtrdetails != '') {
                $('#currentqtr').text(Response.d[0].qtrdetails);
            }
            if (Response.d[0].qtrid != '') {
                //alert(Response.d[0].qtrid);
                $('#HiddenFieldQTRid').val(Response.d[0].qtrid);
            }
        },
        error: function (error) {
           // unBlockUI();
        },
        complete: function () {
           // unBlockUI();
        },
        failure: function () {
           // unBlockUI(); alert("Sorry, we were unable to find the records.");
        }

    });
}

function FillRegion() {
    //debugger;
    var d = "{Flag:'2',MudId:'" + $('#HiddenFieldmid').val() + "'}";

    $.ajax({
        type: "POST", //GET or POST or PUT or DELETE verb
        url: "../POC.asmx/fillRegion",
        data: d,
        contentType: "application/json; charset=utf-8",
        dataType: "json", //Expected data format from server        
        success: function (res) {
            //debugger;
            $.each(res.d, function (data, value) {
                $("#ddlRegion").append($("<option></option>").val(value.Region).html(value.Region));
            })
        },
        error: function (error) {
            // unBlockUI();
        },
        complete: function () {
            // unBlockUI();
        },
        failure: function () {
            // unBlockUI(); alert("Sorry, we were unable to find the records.");
        }

    });
}

function FillSection() {
    //debugger;
    var d = "{Flag:'3',MudId:'" + $('#HiddenFieldmid').val() + "'}";

    $.ajax({
        type: "POST", //GET or POST or PUT or DELETE verb
        url: "../POC.asmx/fillSection",
        data: d,
        contentType: "application/json; charset=utf-8",
        dataType: "json", //Expected data format from server        
        success: function (res) {
            //debugger;
            $.each(res.d, function (data, value) {
                $("#ddlSection").append($("<option></option>").val(value.Section).html(value.Section));
            })
        },
        error: function (error) {
            // unBlockUI();
        },
        complete: function () {
            // unBlockUI();
        },
        failure: function () {
            // unBlockUI(); alert("Sorry, we were unable to find the records.");
        }

    });
}

function FillService() {
    //debugger;
    var d = "{Flag:'4',MudId:'" + $('#HiddenFieldmid').val() + "'}";

    $.ajax({
        type: "POST", //GET or POST or PUT or DELETE verb
        url: "../POC.asmx/fillService",
        data: d,
        contentType: "application/json; charset=utf-8",
        dataType: "json", //Expected data format from server        
        success: function (res) {
            debugger;
            $.each(res.d, function (data, value) {
                $("#ddlService").append($("<option></option>").val(value.Service).html(value.Service));
            })
        },
        error: function (error) {
            // unBlockUI();
        },
        complete: function () {
            // unBlockUI();
        },
        failure: function () {
            // unBlockUI(); alert("Sorry, we were unable to find the records.");
        }
    });
}

function SaveComments() {
    debugger;
    var formData = JSON.stringify($("#form1").serializeArray());
    $.ajax({
        type: "POST", //GET or POST or PUT or DELETE verb
        url: "../POC.asmx/Savecomments",
        data: formData,
        contentType: "application/json; charset=utf-8",
        dataType: "json", //Expected data format from server        
        success: function (r) {
            debugger;
            if (parseInt(r.d) > 0) {
                alert("Data saved successfully");
            }
        },
        error: function (error) {
            // unBlockUI();
        },
        complete: function () {
            // unBlockUI();
        },
        failure: function () {
            // unBlockUI(); alert("Sorry, we were unable to find the records.");
        }
    });
}
0 Answers
Related