Greetings experts,
We have been struggling with this issue now for over two years, yes, over two years.
On the below example code, before a user can submit a form, s/he is required to enter his/her ID to verify whether s/he has already sumbitted the form during a given timeframe or not.
If the user has not submitted the form within this given timeframe, s/he can then proceed to submit the form..
Otherwise, s/he is not allowed to submit the form again
This part works great.
The challenge we have had not for the last 2 years is when a user submits his/her form, sometimes the value of a form fieldname called txtEmpID gets stored in the database.
Sometimes, the value is blank.
The most confusing aspect of this problem is that sometimes, the SAME user submits the form and the value of txtEmpID is stored on the DB but sometimes, when the SAME user submits the same form, the value of txtEmpID is empty or blank.
This process of submitting a form is done once every year.
We have put all sorts of validations in place but this keeps happening but unfortunately, have tested this in a variety of ways but could not reproduce the problem.
Your expert assistance is greatly apprecited
The actual form fields are just a few. However, I have included all the css and js codes just in the case you may find the issue is from there.
//HTML
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Feedback Form</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge, IE=8, IE=9, IE=10, IE11,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="Content/bootstrap.cosmo.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0b1.js"></script>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link href="css/docs.min.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="~/images/favicon.ico" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script type="text/javascript" src="js/emailvalidate.js"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="js/jquery.alerts.js" type="text/javascript"></script>
<link href="css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/pglayouts.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
.ethics-tooltip + .tooltip > .tooltip-inner {background-color:#8bdc24; text-align: left; color:#000000; font-weight: bolder; }
.bs-example{
margin-left: 50px;
margin-top: 30px;
}
img {
position: relative;
top: 0; bottom:0px; left: 50px; right:0;
margin: auto;
}
</style>
<%--Validate Email --%>
<script type="text/javascript" src="js/emailvalidate.js"></script>
<%--Validate Form. Employeee cannot add another row until the first row is filled with data--%>
<script type="text/javascript" src="js/chkAmt.js"></script>
<script type="text/javascript">
function pageLoad() {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
}
</script>
<script type="text/javascript">
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
document.body.addEventListener('gesturestart', function () {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
</script>
<script type="text/javascript">
$(function () {
//Attach click event to each button in gridview
$("#Gridview1").find("input[type='submit']").click(function (event) {
var isValid = true;
//Find the selected button tablerow(tr)
var tr = $(this).closest("tr");
if (tr.length > 0) {
var emptyrows = (tr.find('input[type="text"]').filter(function () { return $(this).val() !== ''; }).length === 0);
//check if txtspousename textbox is empty or not
if (emptyrows === false) {
//Loop through other textboxes and check if its empty or not
tr.find('input[type="text"]').each(function () {
if ($.trim($(this).val()) == '') {
isValid = false;
}
});
//If empty then display the message
if (isValid == false) {
alert("Please enter values on other textboxes as well");
event.preventDefault();
}
}
}
})
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('br').append('<span style="height:0.02em"></span>');
});
</script>
<style type="text/css">
.waitingdiv {
background-color: #F5F8FA;
border: 1px solid #5A768E;
color: #333333;
font-size: 93%;
margin-bottom: 1em;
margin-top: 0.2em;
padding: 8px 12px;
width: 8.4em;
}
</style>
<style type ="text/css">
.tbh {
display: block;
margin: 0 auto;
}
.popintip {
background-color: lightgrey;
width: 700px;
border: 5px solid teal;
padding: 3px;
margin: 3px;
}
</style>
<style type="text/css">
.list1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 2.0em;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
background-color: #ffffff;
text-indent: 5px;
list-style-position: outside;
list-style-image: url(images/bullet.png);
padding: 0px;
margin: 0px;
margin-left: 45px;
}
</style>
<script type="text/javascript">
function preventBack() { window.history.forward(); }
setTimeout("preventBack()", 0);
window.onunload = function () { null };
</script>
<script type="text/javascript">
var specialKeys = new Array();
specialKeys.push(8); //Backspace
$(function () {
$(".numeric").bind("keypress", function (e) {
var keyCode = e.which ? e.which : e.keyCode
var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
if (ret) {
$(this).next().remove();
} else {
if (!$(this).next().hasClass("error")) {
$(this).after("<span class = 'error' style='color:red'><br />* Only digits allowed. No characters, spaces or periods</span>");
}
}
return ret;
});
$(".numeric").bind("paste", function (e) {
return false;
});
$(".numeric").bind("drop", function (e) {
return false;
});
});
</script>
<%-- Do not allow empty spaces when entering badge number--%>
<script type="text/javascript">
$(document).ready(function () {
$("#txtEmpID").on("keyup", function (e) {
$(this).val($(this).val().toString().replace(" ", ""));
});
});
</script>
</head>
<body>
<form class="form a" id="survey_form" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function BeginRequestHandler(sender, args) {
var state = document.getElementById('loadingdiv').style.display;
if (state == 'block') {
document.getElementById('loadingdiv').style.display = 'none';
} else {
document.getElementById('loadingdiv').style.display = 'block';
}
args.get_postBackElement().disabled = true;
}
</script>
<script type="text/javascript">
function nospaces(t) {
if (t.value.match(/\s/g)) {
t.value = t.value.replace(/\s/g, '');
}
}
</script>
<script type="text/javascript">
function blink_text() {
$('.blink').fadeOut(500);
$('.blink').fadeIn(500);
}
refreshIntervalId = setInterval(blink_text, 1500);
setTimeout(function () {
clearInterval(refreshIntervalId);
}, 10000)
</script>
<script type="text/javascript">
function BtnClick() {
var val = Page_ClientValidate();
if (!val) {
var i = 0;
for (; i < Page_Validators.length; i++) {
if (!Page_Validators[i].isvalid) {
$("#" + Page_Validators[i].controltovalidate)
.css("border-color", "red");
}
}
}
return val;
}
</script>
<style type="text/css">
.blink {
color: red;
font-size: 26px;
display: none;
}
</style>
....
....
<div class="table-responsive">
<tablecccc>
<tr>
<td>
<div class="form-group">
<div class="bd-callout bd-callout-danger" style="width:70%;">
<span class="blink">Please read carefully!</span><span style="font-size: 26px;"> Enter your Employee ID (Badge ID) below to begin*. If you do not have an Employee ID, use the First Initial of first name + first initial of Last Name + date of birth in the format of MMDDYYYY. (For example, John Doe born January 1, 1900 will be, JD01011900)</span></div>
<asp:TextBox ID="txtEmpID" maxlength="10" placeholder="Enter Badge ID here..." Style="width: 150px;" class="form-control"
runat="server" AutoPostBack="true" OnTextChanged="txtEmpID_TextChanged"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" SetFocusOnError="true" runat="server" Style="color:red;font-size:medium;" ErrorMessage="RequiredFieldValidator"
ControlToValidate="txtEmpID">Badge number is mandatory </asp:RequiredFieldValidator> <br />
<asp:RegularExpressionValidator style="font-size:medium;" SetFocusOnError="true" ID="RegularExpressionValidator2" runat="server"
ControlToValidate="txtEmpID" ErrorMessage="A minimum of 5 digits is required" ForeColor="Red"
ValidationExpression="^.{5,11}$" EnableClientScript="true">A minimum of 5 digits is required</asp:RegularExpressionValidator>
<br />
</div>
</td>
<td>
<div class="bd-callout bd-callout-danger" id="dprocessed" style="width:90%;" runat="server" visible="false">
<div id="checkusername" runat="server" visible="false" style="white-space:nowrap">
<asp:Label ID="lblStatus" style="font-size:16px;font-weight:bold" runat="server"></asp:Label>
<asp:Image ID="imgstatus" runat="server" Width="17px" Height="17px" />
</div>
</div>
<div class="waitingdiv" id="loadingdiv" style="display:none;margin-left:5.3em">
<img src="images/ajax-loader.gif" alt="Loading" />Please wait...
</div>
</td>
</tr>
</tablecccc>
</div>
<div class="table-responsive">
<table class="table">
<tr>
<td>
<div class="form-group">
<label id="lblEname"><span style="font-weight:bold;font-size:16px;color:#000000;">Employee Name</span><span style="color:#ff0000">*</span></label>
<asp:TextBox ID="txteName" TabIndex="1" placeholder="Employee Name (e.g, Jane Doe)" style="width:205px;" class="form-control" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator id="RequiredFieldValidator2" Font-Bold="true"
SetFocusOnError="true" runat="server"
ErrorMessage="*" ControlToValidate="txteName" /><br />
</div>
</td>
<td>
<div class="form-group">
<label id="lblTitle"><span style="font-weight:bold;font-size:16px;color:#000000;">Your title</span><span style="color:#ff0000">*</span></label>
<asp:TextBox ID="txttitle" TabIndex="2" placeholder="Employee title..." style="width:195px;" class="form-control" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator id="RequiredFieldValidator3" Font-Bold="true"
SetFocusOnError="true" runat="server"
ErrorMessage="*" ControlToValidate="txttitle" />
</div>
</td>
<td>
<div class="form-group">
<label id="lblEmail"><span style="font-weight:bold;font-size:16px;color:#000000;">Your email address</span><span style="color:#ff0000">*</span></label>
<asp:TextBox ID="txtemail" TabIndex="3" placeholder="Employee email..." style="width:200px;" class="form-control" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtemail"
ForeColor="Red" ValidationExpression="^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$"
Display = "Dynamic" ErrorMessage = "Invalid email address"/>
<asp:RequiredFieldValidator id="RequiredFieldValidator4" Font-Bold="true"
SetFocusOnError="true" runat="server"
ErrorMessage="*" ControlToValidate="txtemail" />
</div>
</td>
</tr>
</table>
</div>
...
...
</body>
</html>
VB:
Dim employeeID As Integer = 0
Dim cmd1 As New SqlCommand("usp_InsertEmployees", conn)
cmd1.CommandType = CommandType.StoredProcedure
cmd1.Parameters.AddWithValue("@ename", txteName.Text)
cmd1.Parameters.AddWithValue("@title", txttitle.Text)
cmd1.Parameters.AddWithValue("@email", txtemail.Text)
cmd1.Parameters.AddWithValue("@empID", txtEmpID.Text)
Dim eID As SqlParameter = cmd1.Parameters.Add("@employeeID", SqlDbType.Int)
eID.Direction = ParameterDirection.Output
cmd1.ExecuteNonQuery()
employeeID = eID.Value
Stored proc:
ALTER PROCEDURE [dbo].[usp_InsertEmployees]
@ename varchar(50),
@title varchar(50),
@email varchar(50),
@empID varchar(50),
@employeeID int = 0 OUTPUT
AS
BEGIN
SET NOCOUNT ON;
BEGIN
INSERT INTO Employees(employeeName, empTitle, email, empID) Values (@ename, @title, @email, @empID)
SET @employeeID = SCOPE_IDENTITY()
END
END
