Solved

Safari having a spat with disable on submit code on website

Posted on 2013-02-02
4
255 Views
Last Modified: 2013-02-07
It seems that Safari (often on an iPad) and in some rare cases other browsers will not contime when on a web Submit button this code is present to stop users clicking submit repeatedly:
onclick='this.value = "Please wait..."; this.disabled = true'

Open in new window


Is there another more compatible way of doing it?
0
Comment
Question by:kiwistag
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 6

Accepted Solution

by:
nickinthooz earned 250 total points
ID: 38847438
true needs to be wrapped in quotes

<input type="submit"  onclick='this.value = "Please wait..."; this.disabled = "true"'>

Open in new window

Here it is in jsfiddle

http://jsfiddle.net/eZhAH/12/
0
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 150 total points
ID: 38847507
This was kind of interesting.  It would get locked on the "Please wait" if it submitted to itself.  If I made two copies of the file and had them submitting back and forth, it never got stuck.  But I did use a different method, an 'onsubmit' which gets called when you click on a submit button.  'submit-onclick-test.html' and 'submit-onclick-test2.html' differ only in the filename in the action attribute.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>submit onclick test</title>
<script type="text/javascript">
<!--
function check() {
x=document.getElementById("number");
x.value=x.value+1;
document.getElementById("submit").value = "Please wait...";
}
// -->
</script>
</head>
<body>
<h1>submit onclick test</h1>
<form action="submit-onclick-test2.html" method="get" onsubmit="return check();">
<input type="text" name="number" id="number" value="0" />
<input type="text" name="test" value="test" />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</body>
</html>

Open in new window

0
 
LVL 6

Author Closing Comment

by:kiwistag
ID: 38865972
Thanks - both seemed to do the trick although the "true" (in quotes) seemed the more efficient fix.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38866051
It might be more efficient but I'm not sure it gets called if the user presses 'Enter' instead of clicking on the submit button.  I know the 'onsubmit' does.
0

Featured Post

How To Reduce Deployment Times With Pre-Baked AMIs

Even if we can't include all the files in the base image, we can sometimes include some of the larger files that we would otherwise have to download, and we can also sometimes remove the most time-consuming steps. This can help a lot with reducing deployment times.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

635 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question