Disabling submit button after clicking once for card payments

Hi,
Is there a way I could disable the submit button once it has been pressed. I need to do this to avoid them pressing the button twice for submitting card information. Thank you

LVL 3
applekannaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

AcklenXCommented:
<input type="submit" onclick="this.disabled='disabled'" />
gamer_2055Commented:
<html>
<head>
<title>Selections</title>
</head>
<body>
<form name="xxx" onSubmit="window.document.xxx.sub.disabled='true';" action="xxx" method="POST">
<input type="submit" name="sub">
</form>
</body>
</html>
AcklenXCommented:
two things worth noting:

1. i set the value of the attribute disabled to a value of disabled instead of true because... setting the value back to false will not re-enable the button!

2. the mere presence of the attribute disabled attribute, no matter what the value, will disable the control.  to re-enable the control use OBJECT_REFERENCE.removeAttribute( 'disabled' )
Maximize Customer Retention with Superior Service

The IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more to help build customer satisfaction and retention.

Saqib KhanSenior DeveloperCommented:
I think it should be

<form name="xxx" onSubmit="this.button_name.disabled=true;" action="xxx" method="POST">

without Single quote around the true keyword.
Michel PlungjanIT ExpertCommented:
AcklenX: Why won't
document.forms[0].sub.disabled=false
reenable the button??? What browser is that???

You mean that
<input type="submit" name="sub" disabled>
will disable it, but
document.forms[0].sub.disabled=false
will for sure enable it again
AcklenXCommented:
wow, perhaps it's been a few( i just tried with ie6 )... i at least thought that i had seen that as of ie 5.5, but i could be mistaken there too.  in any event the example works just fine:

<input type="submit" onclick="this.disabled='disabled'" />

or you could change the disabled value (not that it matters, even for removing it later)

<input type="submit" onclick="this.disabled=true" />
jaysolomonCommented:
and if you want to change the value of the button onClick, you can do this

<input type="submit" onclick="this.disabled=true;this.value='Processing...';">
IldefonseCommented:
Actually, this.disabled=true will not work, as the button will get disabled but the form will no longer submit...
jaysolomonCommented:
this will work

<input type="button" value="Submit1" onclick="this.disabled=true;this.value='Processing...';this.form.submit();">


or this

<html>
<head>
<title></title>
<SCRIPT language='javascript'>
function disableButton(theButton)
{
  theButton.value="Processing...";
  theButton.disabled = true;
  theButton.form.submit();
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" target="_blank">
<INPUT TYPE="SUBMIT" VALUE="Submit" name="mySubmit" onclick="disableButton(this);">
</form>
</body>
</html>
dh-racerCommented:
none of the above worked when I tried them, this, however, definately does (in IE6 at very least!):

<form action="checklogin.asp" method="post" name="frm"  onsubmit="document.frm.submit.disabled=true;">
    <input type="text" name="sUsername">
    <input type="password" name="sPassword">
   
    <input type="submit" name="submit" value="Login">
</form>

- seb
jaysolomonCommented:
dh-racer

maybe you need to clean your cache.

The 2 that i submitted worked in NS7 and IE6
jaysolomonCommented:
BTW this is not good

<form action="checklogin.asp" method="post" name="frm"  onsubmit="document.frm.submit.disabled=true;">
   <input type="text" name="sUsername">
   <input type="password" name="sPassword">
   
   <input type="submit" name="submit" value="Login">
</form>

its like your trying to say document dot form dot submit the page dot disabled

You do not gove your submit but the name "SUBMIT"

Name it something else like btnSubmit, or whatever, not SUBMIT.
dh-racerCommented:
i normally name it submit1 actually, my mistake.

My cache is just fine, and I know and use ctrl+f5 anyway.  Your one-line solution definately doesn't work on my PC.  I didn't try the other one.
jaysolomonCommented:
hmm thats funny

because i just tested it again on three other PC's and both solutions work.

2 of the pc's i tested wer win 2000 with all service packs


1 was win xp pro up - to -date


so maybe you have some settings in your tools option on your browser set that should not be
Michel PlungjanIT ExpertCommented:
Jay: the second you posted may NOT have
  theButton.form.submit();
since it is a submit button already
Just remove that
AcklenXCommented:
did anybody have any problems with the first solution?
jaysolomonCommented:
michel

i see your point about the submit button.

<html>
<head>
<title></title>
<SCRIPT language='javascript'>
function disableButton(theButton)
{
 theButton.value="Processing...";
 theButton.disabled = true;
 theButton.form.submit();
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" target="_blank">
<INPUT TYPE="button" VALUE="Submit" name="mySubmit" onclick="disableButton(this);">
</form>
</body>
</html>
vallavanCommented:


         If you are going to work only on IE then you can go for the disabled option this will not work in the Netscape. I suggest  the following,


       Please have  a variable,say isSubmitted, which is initialised to "false" during the page load.
       Change the value to "true" on the button click or in the sumision of the form using the Javascript.

       Before changing the value to "ture" check that the value is "false". If not you can prompt that the form is already submitted.
       
<script>
                 var isSubmitted = "false";

                 function validate()
                 {
                                 if (! isSubmitted.equals("false"))
                                 {
                                       alert("form already submitted");
                                        return false;
                                  }

                                  isSubmitted="true";

                                  /*
                                           remaining coding
                                   */
                  }
</script>

<form action="ogin.jsp" method="post" name="frm"  onsubmit="reuturn validate();">
   <input type="text" name="user">
   <input type="password" name="pwd">
   
   <input type="submit" name="submit" value="Login">
</form>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.