Forum Moderators: open
On a web form screen, the user clicks the Enter or Update or Send button, and most of the time it will Enter or Update or Send and redirect to the proper screen.
But sometimes, the browser will sit there and spin and do nothing. If they click the button again, it will send a duplicate post. If they refresh the screen (I have since hid the button upon clicking) it will show a duplicate post.
But only on Safari and only sometimes.
HAs anyone had any experience with this?
Thanks.
I took a closer look and see a few things that might be an issue:
the form has an action of "#" which I usually don't use, preferring instead the actual page name. I'll change that.
I do have an onSubmit routine which validates the input fields and returns either true or false.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<LINK REL=StyleSheet HREF="nscripts/styles.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript" src="nscripts/newscripts.js"></script>
<script type="text/javascript" >
function setPriority(){
for ( i=0; i<document.form1.priority.options.length; i++) {
if (document.form1.priority.options[i].value == document.form1.hidpriority.value) {
document.form1.priority.selectedIndex = i;
}
}
}
function valRep(){
if (document.form1.dateent.value == "") {
alert("Please enter a date for the Date Entered field");
document.form1.dateent.style.background = "yellow";
return false;
}
if (document.form1.priority.value == "") {
alert("Please select a priority for this repair.");
document.form1.priority.focus();
return false;
}
if (document.form1.descr.value == "") {
alert("Please enter a brief description of the repairs.");
document.form1.descr.focus();
return false;
}
if (document.form1.estcost.value == "") {
alert("Please enter the estimated cost for this repair.");
document.form1.estcost.focus();
document.form1.estcost.style.background = "yellow";
return false;
}
document.form1.repairchoice.style.display = 'none';
return true;
}
function valUpd(f){
if (f.daterep.value == "") {
alert("Please enter the date of the repair");
f.daterep.focus();
return false;
}
if (f.actcost.value == "") {
alert("Please enter the actual cost of the repair");
f.actcost.focus();
return false;
}
document.form1.repairchoice.style.display = 'none';
return true;
}
function calE()
{
window.open('calDE.htm','',"toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=yes,width=220,height=220,top=150,left=150");
}
function calR()
{
window.open('calDR.htm','',"toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=yes,width=220,height=220,top=150,left=150");
}
</script>
<title>Charms Music Office Assistant - Inventory Repair Information</title>
</head>
<body style="background-image: url(../images/bursak3.gif)">
<script type="text/JavaScript" src="/alsx/vtrack.aspx"></script>
<table align="center" width="780" cellspacing="0" cellpadding="0" style="border:1px solid #0030D1; background-color:white">
<tr><td colspan="3" valign="top" height="45"><img src="../images/chlogo.gif" alt=""></td></tr>
<tr>
<td colspan="3" height="20" valign="top"><img src="nimages/adinvtab.gif" usemap="#MapS" border="0" alt=""><script type="text/javascript" src="/alsx/als.aspx"></script></td>
</tr>
<tr><td colspan="3" height="20" valign="top"><img src="nimages/blanksubnav.gif" alt="" border="0"></td></tr>
<tr>
<td height="400"> </td>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="40%" height="40" class="txt" align="left">Inventory Repair Information</td>
<td width="30%" class="smbtxt" valign="bottom"><form style="margin:0" name="scanform" action="distinvrepair.asp" method="post">BARCODE <input type="text" class="inputbox" name="scaninv" size="15"></form> </td>
<td width="30%" class="smbtxt" valign="bottom"><form style="margin:0" name="serform" action="distinvrepair.asp" method="post">SERIAL <input type="text" class="inputbox" name="serialnum" size="15"></form> </td>
</tr>
</table>
<form style="margin:0" name="form1" method="POST" action="#" onSubmit="return valRep()">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3%" > </td>
<td width="2%" align="right"> </td>
<td width="45%" align="left" valign="top">
</td>
<td width="50%" valign="top" align="left" >
<table width="97%" border="0" cellspacing="0" cellpadding="0" style="margin-top:0">
<tr>
<td height="22" colspan="2" class="txt" valign="top">Repair Information</td>
</tr>
<tr>
<td height="22" class="btxt"align="left">Date Entered</td>
<td><input type="text" class="inputbox" readonly value="10/13/2006" name="dateent" size="15"><img onClick="calE()" name = 'Image9' src='nimages/calendar.gif' alt='Calendar' border=0> </td>
</tr>
<tr>
<td width="40%" height="22" align="left"class="btxt">Priority</td>
<td width="60%" height="22">
<select class="inputbox" name="priority">
<option value="">Select Priority</option>
<option value="10">10-Sample Priority</option>
</select></td>
</tr>
<tr>
<td height="22" align="left"class="btxt">Description of Repairs</td>
<td><textarea class="inputbox" name="descr" rows="5" cols="25"></textarea></td>
</tr>
<tr>
<td height="22"align="left" class="btxt">Estimated Cost</td>
<td><input type="text" class="inputbox" value="" name="estcost" size="8"></td>
</tr>
<tr>
<td colspan="2" height="22" align="left"><input type="hidden" name="update" value="go"><input type="hidden" name="id" value="DAN244"><input type="hidden" name="schcode" value="makebelieveks"><input type="hidden" name="barcode" value="79784"><input type="hidden" name="invrrn" value="79784"><input type="hidden" name="repairrrn" value="0"><input type="submit" value="Enter" class="inputsubmit" name="repairchoice">
</td>
</tr>
</table></td></tr></table></form>
etc....
Thanks. I'm going to run it through the validator again also.
And I did validate the HTML and it comes up with no errors.
<form style="margin:0" name="form1" method="POST" action="#" onSubmit="return valRep()">
I would make two changes to this line (neither of which may fix it). Change the action to `action=""` and lowercase the `onsubmit`. An empty action="" causes the form to submit to itself.
Other than those changes, I don't see anything that jumps out at me as likely to cause trouble in any browser. :/ (It's definitely not a problem to use named submit buttons.)
Added: To prevent the double submissions, you may want to add an "onclick" to your submit buttons that disable the buttons. Then, in your valRep() function, enable the buttons if the form returns false.
I did write something to hide the button onClick in the validation JS.
I tried to use my favorite trick of disabling the button, but when you post back, you can't do that! It cancels the whole submit. It only works when you submit to another page.
The bizarre thing is that is happens only in Safari, and not every time.
