I've got a form in which you can submit some data to a FileMakerPro server. Allot of times, users double-click the submit-button to submit their data (as they are used to in Windows....
). The server is not very robust, as it crashed when it receives these 2 requests when the submit-button is double-clicked<br />
<br />
Rather then making people NOT double-click the button OR debug the server, I would like to prevent the second submit to be send to the server, by recognizing that this second submit is very short to the first. What would be the solution ?<br />
<br />
Thanks, chouchou<!--content-->You could try this but I don't know about browser compatibility.<br />
<br />
<!-- m --><a class="postlink" href="http://www.webreference.com/js/tips/020201.html">http://www.webreference.com/js/tips/020201.html</a><!-- m --><!--content-->Note, however, that it could be written more shortly like this:<input type="submit" onclick="disabled=true;return true;" value="Submit" /><!--content-->Thanks, this should work. But now, with the onClick="disabled=true;return true;" added, the action of the form is not performed anymore, when I push the submit button
.<br />
<br />
Working on some other problem, I found a solution to it. I added the following attribuut to the submit button:<br />
<br />
onClick="disabled=true;this.form.submit();return true;"<br />
<br />
which does the trick.<br />
<br />
Furthermore, I want the button to be enabled again, when another text is entered, so I added <br />
<br />
onKeyPress="document.getElementById('-find').disabled=false;"<br />
<br />
to the text field.<br />
<br />
chouchou<!--content-->What I provided should've worked, but I hadn't tested it extensively hence the quirkyness you've found in it.<!--content-->Do not use submit button, but form onsubmit event.<br />
<br />
<form onsubmit="return verifyData(this)" ...<br />
<br />
<br />
function verifyData(myForm)<br />
{ /* Do your data verification here */<br />
/* If everything is ok and you are ready to submit */<br />
myForm.onsubmit = function()<br />
{ alert('How about some patience, huh? ;^)');<br />
return false;<br />
};<br />
return true;<br />
}<!--content-->Originally posted by Vladdy <br />
Do not use submit button, but form onsubmit event.Completely correct; can't believe I didn't think of that.<!--content-->Well I handle all of my forms server side but I log the time the button is posted and make sure the posted does not post again within 30 seconds, this also doubles as a sort of light spam protection.<!--content-->
). The server is not very robust, as it crashed when it receives these 2 requests when the submit-button is double-clicked<br /><br />
Rather then making people NOT double-click the button OR debug the server, I would like to prevent the second submit to be send to the server, by recognizing that this second submit is very short to the first. What would be the solution ?<br />
<br />
Thanks, chouchou<!--content-->You could try this but I don't know about browser compatibility.<br />
<br />
<!-- m --><a class="postlink" href="http://www.webreference.com/js/tips/020201.html">http://www.webreference.com/js/tips/020201.html</a><!-- m --><!--content-->Note, however, that it could be written more shortly like this:<input type="submit" onclick="disabled=true;return true;" value="Submit" /><!--content-->Thanks, this should work. But now, with the onClick="disabled=true;return true;" added, the action of the form is not performed anymore, when I push the submit button
.<br /><br />
Working on some other problem, I found a solution to it. I added the following attribuut to the submit button:<br />
<br />
onClick="disabled=true;this.form.submit();return true;"<br />
<br />
which does the trick.<br />
<br />
Furthermore, I want the button to be enabled again, when another text is entered, so I added <br />
<br />
onKeyPress="document.getElementById('-find').disabled=false;"<br />
<br />
to the text field.<br />
<br />
chouchou<!--content-->What I provided should've worked, but I hadn't tested it extensively hence the quirkyness you've found in it.<!--content-->Do not use submit button, but form onsubmit event.<br />
<br />
<form onsubmit="return verifyData(this)" ...<br />
<br />
<br />
function verifyData(myForm)<br />
{ /* Do your data verification here */<br />
/* If everything is ok and you are ready to submit */<br />
myForm.onsubmit = function()<br />
{ alert('How about some patience, huh? ;^)');<br />
return false;<br />
};<br />
return true;<br />
}<!--content-->Originally posted by Vladdy <br />
Do not use submit button, but form onsubmit event.Completely correct; can't believe I didn't think of that.<!--content-->Well I handle all of my forms server side but I log the time the button is posted and make sure the posted does not post again within 30 seconds, this also doubles as a sort of light spam protection.<!--content-->