My ASP.Net form was submitting just fine until I added bootstrap validation with AJAX to submit the form.
Suddenly, it is no longer submitting. When I click the submit button, it appears like it was going to submit but doesn't.
I believe as usual that I am missing something. The name of the file I am posting here is called policies.aspx.
I have been bogged down by this since yesterday evening.
Thanks for your help in advance.
<form id="form1" runat="server" class="form-inline"><asp:ScriptManager ID="ScriptManager1" runat="server" /><fieldset><!-- Form Name --><legend> Personal Information </legend><div class="envelope"><asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline"><ContentTemplate><asp:Label style="font-weight:bold;font-size:16px;" ID="Label1" Runat="Server"></asp:Label><div style="margin-top:2px;margin-left:112px;"><asp:Label ID="txtaffirmation" runat="server"> </asp:Label></div><br /><br /><div style="margin-left:200px;"><div class="form-group"><label>Employee Name</label><div class="inner-addon left-addon"><i class="glyphicon glyphicon-user"></i><asp:Textbox id="txtFullName" required="true" runat="server" class="form-control" style="text-transform:uppercase;" /></div></div><div class="form-group"><label>Employee ID</label><div class="inner-addon left-addon"><i class="glyphicon glyphicon-camera"></i><asp:Textbox id="txtUserName" required="true" runat="server" class="form-control" /></div></div><div style="margin-left:-100px;"><div class="col-xs-4"><div class="form-group"><label>Employee Email</label><div class="inner-addon left-addon"><i class="glyphicon glyphicon-envelope"></i><asp:Textbox id="txtEmail" required="true" runat="server" placeholder="Your email address..." /></div></div></div><div class="col-xs-4"><div class="form-group"><label>Employee Signature</label><div class="inner-addon left-addon"><i class="glyphicon glyphicon-unchecked"></i><asp:Textbox id="txtSignature" required="true" runat="server" placeholder="Your signature..." /></div></div></div><div class="col-xs-4"><div class="form-group"><label>Date</label><div class="inner-addon left-addon"><i class="glyphicon glyphicon-calendar"></i><asp:Textbox id="txtDate" required="true" runat="server" /></div></div></div></div></div><asp:Button ID="btnAdd" class="btn btn-warning" style="margin-left:250px;" runat="server" CausesValidation="false" Text="Submit and Close" OnClick="Insert" /></ContentTemplate> </asp:UpdatePanel><asp:Panel ID="PleaseWaitMessagePanel" runat="server" CssClass="modalPopup" Height="60px" Width="125px"> Please wait<br /> <img src="images/loader.gif" alt="Please wait" /> </asp:Panel> <asp:Button ID="HiddenButton" runat="server" CssClass="hidden" Text="Hidden Button" ToolTip="Necessary for Modal Popup Extender" /><cc1:ModalPopupExtender ID="PleaseWaitPopup" BehaviorID="PleaseWaitPopup" runat="server" TargetControlID="HiddenButton" PopupControlID="PleaseWaitMessagePanel" BackgroundCssClass="modalBackground"> </cc1:ModalPopupExtender></div></fieldset></form><script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script><script type="text/javascript">$(document).ready(function () {$('#form1').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
txtEmail: {
validators: {
notEmpty: {
message: 'Please supply your email address'
},
emailAddress: {
message: 'Please supply a valid email address'
}
}
},
txtSignature: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your signature'
}
}
},
}
})
.on('success.form.bv', function (e) {
$('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...$('#form1').data('bootstrapValidator').resetForm();
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function (result) {
console.log(result);
}, 'json');
});
});</script><script type="text/javascript">$("#txtDate").datepicker();$("#txtDate").datepicker("setDate", new Date());</script><style type="text/css">
.ui-datepicker-today {
background: green !important;
}</style></body>