Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

onSubmit, show/hide

Status
Not open for further replies.
dkirkdrei

dkirkdrei

Programmer
Dec 14, 2007
5
US
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>
 
Sort by date Sort by votes
I'm not an expert on Javascript, but maybe you can try this instead:

document.getElementById('submitButton').style.visibility = 'visible';
document.getElementById('progressBar').style.visibility = 'hidden';
 
Upvote 0 Downvote
also, I think you can do a conditional test beforehand.
(once again I am not a Javascript expert)

if((document.getElementById('submitButton').style.visibility != 'visible') && (document.getElementById('progressBar').style.visibility != 'hidden'))
{
document.getElementById('submitButton').style.visibility = 'visible';
document.getElementById('progressBar').style.visibility = 'hidden';
}

Or something like that (I don't think you need it though)
 
Upvote 0 Downvote
forgot to add on more to that:

function onSubmit()
{
if((document.getElementById('submitButton').style.visibility != 'visible') && (document.getElementById('progressBar').style.visibility != 'hidden'))
{
document.getElementById('submitButton').style.visibility = 'visible';
document.getElementById('progressBar').style.visibility = 'hidden';
}

else { document.getElementById('submitButton').style.visibility = 'hidden';
document.getElementById('progressBar').style.visibility = 'visible';
}

}


Hey, I'm learning just like anyone out there lol!
 
Upvote 0 Downvote
hey expertnovice, thanks for the response. I finally got it working, see below:

<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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
639
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
620
xwb
xwb
chrisjchrisj
  • Locked
  • Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
128
chrisjchrisj
chrisjchrisj
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
355
waubain
waubain
LyndonOHRC
  • Locked
  • Question
How do I Hide/Show options elements by class
Replies
1
Views
90
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top