jtcy
asked on
Prevent Multiple Click on Submit Button?
How can I prevent user to multiple click on the submit button?
Kiran Paul VJ
Disable the Submit button after the first click, After the requested task is done reenable it.
You could use Javascript to hide the button after it is clicked:
<input type="submit" name="submit" value="submit" onClick="this.style.displa
Or you could use a similar JS approach to replace the button with a "Please wait..." image, or some text, or anything you want after it is clicked.
<input type="submit" name="submit" value="submit" onClick="this.style.displa
Or you could use a similar JS approach to replace the button with a "Please wait..." image, or some text, or anything you want after it is clicked.
try this, this is a simple javascript example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
function SubmitMe(e)
{
      e.disabled = true;
      e.value = "Submitting the form.";
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
 <input type="submit" name="Submit" value="Submit" onclick="javascript:Submit
</form>
</body>
</html>
Enable the button after the form is submitted.
hope these helps
kiranvj
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
function SubmitMe(e)
{
      e.disabled = true;
      e.value = "Submitting the form.";
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
 <input type="submit" name="Submit" value="Submit" onclick="javascript:Submit
</form>
</body>
</html>
Enable the button after the form is submitted.
hope these helps
kiranvj
ASKER
Hi Kiranvj,
It works but the form doesnt get submitted. I use php to submit the form in Post Method. If I added that javascript onclick to the submit button, after its clicked, the page stays static there, doesnt posting info to php.
It works but the form doesnt get submitted. I use php to submit the form in Post Method. If I added that javascript onclick to the submit button, after its clicked, the page stays static there, doesnt posting info to php.
Hi jtcy,
Try this modified code, with some PHP tags for debuging
<?php
if($_POST)
{
      echo("Posted");
}
else
{
    echo("Not posted");
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
function SubmitMe()
{
   document.form1.btnSubmit.d
   document.form1.btnSubmit.v
       //alert("test");
   return true; // form is submitted only if the returned value is true
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="test.php" onSubmit="javascript:retur
  <input type="text" name="textfield">
  <input id="btnSubmit" type="submit" name="Submit" value="Submit"  />
</form>
</body>
</html>
hope this helps
kiranvj
Try this modified code, with some PHP tags for debuging
<?php
if($_POST)
{
      echo("Posted");
}
else
{
    echo("Not posted");
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
function SubmitMe()
{
   document.form1.btnSubmit.d
   document.form1.btnSubmit.v
       //alert("test");
   return true; // form is submitted only if the returned value is true
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="test.php" onSubmit="javascript:retur
  <input type="text" name="textfield">
  <input id="btnSubmit" type="submit" name="Submit" value="Submit"  />
</form>
</body>
</html>
hope this helps
kiranvj
Much better
You can shorten it like this:
function SubmitMe(theForm)
{
   theForm.btnSubmit.disabled
   theForm.btnSubmit.value = "Submitting the form.";
    //alert("test");
   return true; // form is submitted only if the returned value is true
}
.
.
onSubmit="return SubmitMe(this)">
You can shorten it like this:
function SubmitMe(theForm)
{
   theForm.btnSubmit.disabled
   theForm.btnSubmit.value = "Submitting the form.";
    //alert("test");
   return true; // form is submitted only if the returned value is true
}
.
.
onSubmit="return SubmitMe(this)">
i just included the full code, html and php tags to check if the form is submitted, so he need only to copy paste and check it.
That is not what I mean
Instead of  document.form1, pass the form in the onSubmit handler
and javascript: is only needed if there is client side vbscript on the same page
Instead of  document.form1, pass the form in the onSubmit handler
and javascript: is only needed if there is client side vbscript on the same page
yes, thats right , your code is more generic. So can be used with any form names, thanks :)
>>and javascript: is only needed if there is client side vbscript on the same page
actually i did not know that, or atleast dont bother to know. Usually i only use javascript in the page and i usually prefix javascript: . I thought it is for browser compatibility. Thanks for the info.
Kiranvj
>>and javascript: is only needed if there is client side vbscript on the same page
actually i did not know that, or atleast dont bother to know. Usually i only use javascript in the page and i usually prefix javascript: . I thought it is for browser compatibility. Thanks for the info.
Kiranvj
ASKER
Um....doesnt work, it doesnt do anything
<script>
var submitted = false;
</script>
<form onSubmit="if (submitted) { alert('Please only submit once'); return false };
submitted = true">
.
.
.
var submitted = false;
</script>
<form onSubmit="if (submitted) { alert('Please only submit once'); return false };
submitted = true">
.
.
.
<!-- Copied from kiranvj, but reworded -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
function SubmitMe(e)
{
   e.disabled = true;
   e.value = "Submitting the form.";
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
 <input type="submit" name="Submit" value="Submit" OnSubmit="javascript:Submi
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
function SubmitMe(e)
{
   e.disabled = true;
   e.value = "Submitting the form.";
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
 <input type="submit" name="Submit" value="Submit" OnSubmit="javascript:Submi
</form>
</body>
</html>
effx: There is no onSubmit event on a button - you mean onClick
Sorry i meant on the form tag
<form id="form1" name="form1" method="post" action="" OnSubmit="document.form1.g
 <input type="submit" name="Submit" id="gobutton" value="Submit" />
</form>
<form id="form1" name="form1" method="post" action="" OnSubmit="document.form1.g
 <input type="submit" name="Submit" id="gobutton" value="Submit" />
</form>
What is new about this post and why use the id in forms access???
If this works it works, but we have been told it does not
<form id="form1" name="form1" method="post" action="" OnSubmit="this.Submit.disa
 <input type="submit" name="Submit" value="Submit" />
</form>
If this works it works, but we have been told it does not
<form id="form1" name="form1" method="post" action="" OnSubmit="this.Submit.disa
 <input type="submit" name="Submit" value="Submit" />
</form>
why not, does it work, yes of course it does, so why be petty ? and also why is everyone tring to make this complicated the answer is simple. and it works so well that thousands of enterprise sites use the same thing, oh and btw using the ID allows you to have two submit buttons in the same form that do two entirely diffrent things.
Nothing to do with being petty
1. The script at #a19252436Â already did what you did and we were told it did not work so why post an identical solution
2. you are not using the ID correctly
either use DOM access or form access - that means either
document.getElementById('g
OR
document.form1.Submit.disa
ths.Submit.disabled=true
Someone should test this.
1. The script at #a19252436Â already did what you did and we were told it did not work so why post an identical solution
2. you are not using the ID correctly
either use DOM access or form access - that means either
document.getElementById('g
OR
document.form1.Submit.disa
ths.Submit.disabled=true
Someone should test this.
So this works in IE and FF
<form action="http://www.google.com/search" onSubmit="this.subbut.disa
<input type="text" name="q" onFocus="this.form.subbut.
<input type="submit" name="subbut" value="GO">
</form>
I added the onFocus in case you allow the user to go back and do another submit - if not, the button stays disabled in FF
<form action="http://www.google.com/search" onSubmit="this.subbut.disa
<input type="text" name="q" onFocus="this.form.subbut.
<input type="submit" name="subbut" value="GO">
</form>
I added the onFocus in case you allow the user to go back and do another submit - if not, the button stays disabled in FF
didnt you mean
this.Submit.disabled=true
A true coder would not make a stupid mistake like that, so stop trying to belittle me, and try and work with me, and as for looking at other comments that i have answered and posting your mediocre JavaScript solutions read the questions first.
this.Submit.disabled=true
A true coder would not make a stupid mistake like that, so stop trying to belittle me, and try and work with me, and as for looking at other comments that i have answered and posting your mediocre JavaScript solutions read the questions first.
Erm... cool it, please. Be professional and see that I changed the name of the button since Submit and especially submit is a bad name for a form element.
Mediocre... hmmm
Mediocre... hmmm
i did notice that you changed the name of the button but i guess you would not see that if you were in my situation, i was actually reffering to the bit in your code where you cant spell "this" its spelt "this" and not "ths"
and yes submit is a bad practice name for a button.
Ahh - yes, thanks for pointing out the spelling mistake in post 19258259
JavaScript in this situation is of course the correct method, and as for the answer to the orignal question mplungjan is correct with :
<form action="http://www.google.com/search" onSubmit="this.subbut.disa
<input type="text" name="q" onFocus="this.form.subbut.
<input type="submit" name="subbut" value="GO">
</form>
The onFocus would create a problem id the user was to click on the textbox before the process that you wanted to happen had been performed so me personally i would leave it out :
<form action="http://www.google.com/search" onSubmit="this.subbut.disa
<input type="text" name="q">
<input type="submit" name="subbut" value="GO">
</form>
But nevertheless that is the solution to your question "How can I prevent user to multiple click on the submit button?".
<form action="http://www.google.com/search" onSubmit="this.subbut.disa
<input type="text" name="q" onFocus="this.form.subbut.
<input type="submit" name="subbut" value="GO">
</form>
The onFocus would create a problem id the user was to click on the textbox before the process that you wanted to happen had been performed so me personally i would leave it out :
<form action="http://www.google.com/search" onSubmit="this.subbut.disa
<input type="text" name="q">
<input type="submit" name="subbut" value="GO">
</form>
But nevertheless that is the solution to your question "How can I prevent user to multiple click on the submit button?".
My suggestion with the focus is for Firefox only and only if the user is allowed to go back to the form since the button will stay disabled until the page has been reloaded from server of the button ans been otherwise enabled.
If the user wishes to play with the form to break the functionality by quickly clicking the field after submitting and then hitting submit again, then they are more or less asking for trouble
If the user wishes to play with the form to break the functionality by quickly clicking the field after submitting and then hitting submit again, then they are more or less asking for trouble
ASKER
So what is the answer???
 <form action="my-avatar.php" method="post" enctype="multipart/form-da
This would not work, it just disable the button and refresh. It does not post those elements to the handler.
 <form action="my-avatar.php" method="post" enctype="multipart/form-da
This would not work, it just disable the button and refresh. It does not post those elements to the handler.
ok, for disabling the button and to prevent multiple clicks you said my post worked fine.
Now we can find why its not working fine. Â Can you please give the full code you are using + the browser you are using.
Are you posting to the same page or someother page.
regards
kiran
Now we can find why its not working fine. Â Can you please give the full code you are using + the browser you are using.
Are you posting to the same page or someother page.
regards
kiran
If the page is refreshed, it seems you have another bug. Possibly a javascript bug elsewhere.
Perhaps you can show us an example of yourr code that does not work since our examples work on our computers
Perhaps you can show us an example of yourr code that does not work since our examples work on our computers
ASKER
 <form action="my-avatar.php" method="post" enctype="multipart/form-da
 <table width="500" border="0" cellspacing="0" cellpadding="5">
  <tr>
   <td width="173">Upload Avatar </td>
   <td width="307">
       <input type="hidden" name="MAX_FILE_SIZE" value="256000">
<input name="avatar" type="file" id="avatar"></td>
  </tr>
  <tr>
   <td>Caption</td>
   <td><input name="caption" type="text" id="caption" value="<?php if ($new) echo($_POST['caption']); else echo $record['caption']; ?>"></td>
  </tr>
  <tr>
   <td> </td>
   <td><input type="submit" name="submit" value="Upload" onclick="this.value = 'Processing...';">
</td>
  </tr>
 </table>
 </form>
 <table width="500" border="0" cellspacing="0" cellpadding="5">
  <tr>
   <td width="173">Upload Avatar </td>
   <td width="307">
       <input type="hidden" name="MAX_FILE_SIZE" value="256000">
<input name="avatar" type="file" id="avatar"></td>
  </tr>
  <tr>
   <td>Caption</td>
   <td><input name="caption" type="text" id="caption" value="<?php if ($new) echo($_POST['caption']); else echo $record['caption']; ?>"></td>
  </tr>
  <tr>
   <td> </td>
   <td><input type="submit" name="submit" value="Upload" onclick="this.value = 'Processing...';">
</td>
  </tr>
 </table>
 </form>
1. change name from name="submit" Â to name="subbut"
the word submit is reserved and will fail if you try
something.submit....
2. NOW use
 <form action="my-avatar.php" method="post" enctype="multipart/form-da
the word submit is reserved and will fail if you try
something.submit....
2. NOW use
 <form action="my-avatar.php" method="post" enctype="multipart/form-da
<form action="my-avatar.php" method="post" enctype="multipart/form-da
 <table width="500" border="0" cellspacing="0" cellpadding="5">
  <tr>
   <td width="173">Upload Avatar </td>
   <td width="307">
    <input type="hidden" name="MAX_FILE_SIZE" value="256000">
<input name="avatar" type="file" id="avatar"></td>
  </tr>
  <tr>
   <td>Caption</td>
   <td><input name="caption" type="text" id="caption" value="<?php if ($new) echo($_POST['caption']); else echo $record['caption']; ?>"></td>
  </tr>
  <tr>
   <td> </td>
   <td><input name="subbut" type="submit" id="subbut" onclick="this.value = 'Processing...';" value="Upload">
</td>
  </tr>
 </table>
 </form>
 <table width="500" border="0" cellspacing="0" cellpadding="5">
  <tr>
   <td width="173">Upload Avatar </td>
   <td width="307">
    <input type="hidden" name="MAX_FILE_SIZE" value="256000">
<input name="avatar" type="file" id="avatar"></td>
  </tr>
  <tr>
   <td>Caption</td>
   <td><input name="caption" type="text" id="caption" value="<?php if ($new) echo($_POST['caption']); else echo $record['caption']; ?>"></td>
  </tr>
  <tr>
   <td> </td>
   <td><input name="subbut" type="submit" id="subbut" onclick="this.value = 'Processing...';" value="Upload">
</td>
  </tr>
 </table>
 </form>
I was typing at at the same time as you mplungjan, sorry ;-)
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
onClick is performed before the onSubmit so the code will get executed but the form will not submit
SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.