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.");
}
});
}