/    Sign up×
Community /Pin to ProfileBookmark

on submit, hide and show

Copy linkTweet thisAlerts:
Dec 14.2007

I have a form in which I am trying to hide the submit button once it has been clicked and replace it with a gif image. The code that I am trying is below but I cannot get it to work. Right now both elements show up at the same time. Please help!

<script type=”javascript”>
function onSubmit(){
document.getElementById(‘submitButton’).style.display = “none”;
document.getElementById(‘progressBar’).style.display = “block”;
}
</script>

<form action=”…” onSubmit=”return onSubmit()”>
…..
<div id=”submitButton”>
<input type=”button” value=”submit”>
</div>
<div id=”progressBar” style=”display: hidden”>
<img src=”progressbar.gif”>
</div>

</form>

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@Declan1991Dec 14.2007 — An HTML problem, not a Javascript one.

Do this instead.
<i>
</i>&lt;script type="javascript"&gt;
function onSubmit(){
document.getElementById('submitButton').style.display = "none";
document.getElementById('progressBar').style.display = "block";
return true;
}
&lt;/script&gt;

&lt;form action="..." onSubmit="return onSubmit();"&gt;
.....
&lt;input type="submit" value="submit" id="submitButton"&gt;
&lt;img src="progressbar.gif" id="progressBar" style="display:hidden;"&gt;
&lt;/form&gt;
Copy linkTweet thisAlerts:
@JMRKERDec 14.2007 — Change this:
[code=php]
<div id="progressBar" style="display: hidden">
[/code]
To this:
[code=php]
<div id="progressBar" style="display: none">
[/code]
Copy linkTweet thisAlerts:
@dkirkauthorDec 14.2007 — Thanks for the response but neither suggestions work?? my browser is IE7
Copy linkTweet thisAlerts:
@JMRKERDec 14.2007 — Try this:
[code=php]
<html>
<head>
<title>Submit Hider</title>

<script type="text/javascript">
function onSubmitButton(){
document.getElementById('submitButtonDiv').style.display = "none";
document.getElementById('progressBar').style.display = "block";
return false;
}
</script>
<body>
<form action="" onsubmit="return onSubmitButton()">
<div id="submitButtonDiv">
<input type="submit" value="submit">
</div>
<div id="progressBar" style="display:none">
<img src="progressbar.gif" alt="Progress Bar">
</div>

</form>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@SoreheadDec 14.2007 — I ran into a similar problem a while ago, following up from JMRKER's post, you will need to inject the img html into the element to get the animation to work in IE.

[CODE]
<html>
<head>
<title>Submit Hider</title>

<script type="text/javascript">
function onSubmitButton(){
document.getElementById("submitButtonDiv").style.display = "none";

if (navigator.appName == "Microsoft Internet Explorer") {
document.getElementById("progressBar").innerHTML = "";
document.getElementById("progressBar").style.display = "block";
document.getElementById("progressBar").innerHTML = "<img src='progressbar.gif' alt='Progress Bar'>";
} else {
document.getElementById("progressBar").style.display = "block";
}
}
</script>
<body>
<form action="" onsubmit="return onSubmitButton()">
<div id="submitButtonDiv">
<input type="submit" value="submit">
</div>
<div id="progressBar" style="display:none">
<img src="progressbar.gif" alt="Progress Bar">
</div>

</form>
</body>
</html


[/CODE]
Copy linkTweet thisAlerts:
@dkirkauthorDec 14.2007 — Hey JMRKER, your last post works for replacing the button with the gif file but now my form does not get submitted??
Copy linkTweet thisAlerts:
@dkirkauthorDec 14.2007 — perfect Sorehead, works perfect. Many Thanks
×

Success!

Help @dkirk spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...