I have a form with a few fields in it all present inside an update panel. I also have a save button which is present inside the update panel. On click I do some javascript validation to check in fields have values in them and if so postback and save to Database.
The javascript is calling fine but whether a success validation or not it is posting back to the server. If fields are missing it is displaying the error but immediately posting back.
Am I missing something with regards to updatepanels and javascript ?
Code:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<%-- <script src="Scripts-QTrack/DocumentValidation.js" type="text/javascript"></script>--%>
<link href="Styles-QTrack/MenuBarControl.css" rel="stylesheet" type="text/css" />
<%-- <script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
//Jquery Call
}
function EndRequestHandler(sender, args) {
//Jquery Call
}
</script>--%>
<script type="text/javascript">
function validate() {
// event.preventDefault();
var x = document.getElementById("<%=lblerr.ClientID %>");
var vDocCode = document.getElementById("<%=txtDocCode.ClientID %>").value;
var vDocTitle = document.getElementById("<%=txtDocTitle.ClientID %>").value;
var vDocName = document.getElementById("<%=txtDocName.ClientID %>").value;
var vRevNumber = document.getElementById('<%=txtRevNumber.ClientID %>').value;
var vMessage = document.getElementById('<%=txtMessage.ClientID %>').value;
var check;
var app = "";
if (vDocCode == "") {
check = false;
app = "Document Code can not be blank<br/>";
}
if (vDocTitle == "") {
check = false;
app += "Enter Document Title<br/>";
}
if (vDocName == "") {
check = false;
app += "Enter Document Name<br/>";
}
if (vRevNumber == "") {
check = false;
app += "Enter Revision Number<br/>";
}
if (vMessage == "") {
check = false;
app += "Enter Message<br/>";
}
else {
x.innerHTML = "data";
bool = true;
}
x.innerHTML = app;
return bool;
}
</script>
<%-- <script type="text/javascript">
function DocManValidation() {
var vDocCode;
vDocCode = document.getElementById("<%=txtDocCode.ClientID%>").value;
if (vDocCode == "") {
alert("Enter DocCode");
return false;
}
return true;
}
</script>--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="container">
<div class="row">
<div>
<uc1:MenuBarControl ID="MenuBarControl1" runat="server" />
</div>
</div>
<div class="row">
<div align="center">
<dx:ASPxTreeList ID="ASPxTreeList1" runat="server" Width="900px"
ondatabound="ASPxTreeList1_DataBound"
onfocusednodechanged="ASPxTreeList1_FocusedNodeChanged"
onselectionchanged="ASPxTreeList1_SelectionChanged">
</dx:ASPxTreeList>
</div>
<div>
</div>
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager >
<div align="center">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<div>
<dx:ASPxRoundPanel ID="ASPxRoundPanelDocument" runat="server"
HeaderText="Document" Width="900px">
<HeaderStyle HorizontalAlign="Left" />
<PanelCollection>
<dx:PanelContent runat="server" SupportsDisabledAttribute="True">
<div class="row">
</div> <div class="row">
<form class="form-inline" data-toggle="validator">
<div class="col-sm-2">
<div class="form-group">
<label for="exampleInputName2">Document Code</label>
<asp:TextBox ID="txtDocCode" runat="server" CssClass="form-control" placeholder="Code" ></asp:TextBox>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputName2">Document Title</label>
<asp:TextBox ID="txtDocTitle" runat="server" CssClass="form-control" placeholder="Title"></asp:TextBox>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputName2">Document Name</label>
<asp:TextBox ID="txtDocName" runat="server" CssClass="form-control" placeholder="Name"></asp:TextBox>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="exampleInputName2">Revision Number</label>
<asp:TextBox ID="txtRevNumber" runat="server" CssClass="form-control" placeholder="RevNumber"></asp:TextBox>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="exampleInputName2">Status</label>
<asp:DropDownList ID="ddlStatus" CssClass="form-control" runat="server" >
</asp:DropDownList>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="exampleInputName2">Standard</label>
<asp:DropDownList ID="ddlStandard" CssClass="form-control" runat="server">
</asp:DropDownList>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="exampleInputName2">Main Document</label>
<asp:DropDownList ID="ddlMainDoc" CssClass="form-control" runat="server">
</asp:DropDownList>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputName2" runat="server" id="lblReqBy">Requested By:</label>
<asp:TextBox ID="txtReqBy" runat="server" CssClass="form-control" placeholder="Requested By"></asp:TextBox>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputName2">Due Date:</label>
<%-- <input type="text" name="date" class="datepicker" id="dp" />--%>
<asp:TextBox ID="txtDueDate" runat="server" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="exampleInputName2">Upload Doc</label>
<asp:FileUpload ID="fupDocument" runat="server" CssClass="btn btn-default" />
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<%-- <asp:Label ID="lblRemarks" runat="server" Text="Message" CssClass="exampleInputName2"></asp:Label>--%>
<label for="exampleInputName2" runat="server" id="lblRemarks">Message:</label>
<asp:TextBox ID="txtMessage" runat="server" CssClass="form-control" placeholder="Message" TextMode="MultiLine" Rows="3" Columns="120"></asp:TextBox>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="exampleInputName2">Description of Change:</label>
<asp:TextBox ID="txtDescChange" runat="server" CssClass="form-control" placeholder="Desciption of Change" TextMode="MultiLine" Rows="3" Columns="120"></asp:TextBox>
</div>
</div>
<div class="col-lg-12" id="VerifyRemarks" runat="server">
<div class="form-group">
<label for="exampleInputName2">Verifiers Remarks:</label>
<asp:TextBox ID="txtVerifyRemarks" runat="server" CssClass="form-control" placeholder="Verifier Remarks" TextMode="MultiLine" Rows="3" Columns="120"></asp:TextBox>
</div>
</div>
<div class="col-lg-12" id="ApproverRemarks" runat="server">
<div class="form-group">
<label for="exampleInputName2">Approver Remarks:</label>
<asp:TextBox ID="txtApprovers" runat="server" CssClass="form-control" placeholder="Approvers Remarks" TextMode="MultiLine" Rows="3" Columns="120"></asp:TextBox>
</div>
</div>
<div class="col-lg-12" id="PublishRemarks" runat="server">
<div class="form-group">
<label for="exampleInputName2">Publishers Remarks:</label>
<asp:TextBox ID="txtPublisher" runat="server" CssClass="form-control" placeholder="Publishers Remarks" TextMode="MultiLine" Rows="3" Columns="120"></asp:TextBox>
</div>
</div>
</div>
</dx:PanelContent>
</PanelCollection>
</dx:ASPxRoundPanel>
</div>
<div>
</div>
<div align="center">
<div class="form-group">
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="return validate();" OnClick="btnSave_Click" CssClass="btn btn-default" />
</div>
<div class="btn-group" role="group">
<asp:Button ID="btnClear" runat="server" Text="Clear" OnClick="btnClear_Click" CssClass="btn btn-default" />
</div>
</div>
<div>
<asp:Label ID="lblerr" runat="server" ForeColor="Red" Font-Bold="true"></asp:Label>
</div>
</div>
</div>
</form>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSave" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
<div align="center">
<asp:Literal ID="ltEmbed" runat="server"></asp:Literal>
</div>
</div>
</div>
</asp:Content>
In your
JavaScript event handler, the variableboolonly get's initialised, if the input was correct. So, if the input is not correct, the function will returnundefinedand notfalse. But the postback of the button click only get's suppressed, if you returnfalsein theclick event handler. Also, you have to be sure, that you don't get any JavaScript errors, because they also might lead to a postback.So, to solve your problem, simply change the beginning of the
validatefunction to this:EDIT: Maybe you want to use the variable
checkto return if the input is correct, then you need to replace the two references toboolwithchecklike this: