dkirk Posted December 14, 2007 Share Posted December 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> Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted December 14, 2007 Share Posted December 14, 2007 <script language="javascript"> function mySubmit() { document.getElementById('submitButton').style.display = "none"; document.getElementById('progressBar').style.display = "block"; } </script> <form action=""> <div id="submitButton"> <input type="button" value="submit" onclick="mySubmit()"> </div> <div id="progressBar" style="display:none"> <img src="progressbar.gif"> </div> </form> Quote Link to comment Share on other sites More sharing options...
dkirk Posted December 14, 2007 Author Share Posted December 14, 2007 This works but my form does not get submitted?? Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted December 14, 2007 Share Posted December 14, 2007 change your input type from "button" to "submit" currently is: <div id="submitButton"> <input type="button" value="submit" onclick="mySubmit()"> </div> would need to be: <div id="submitButton"> <input type="submit" value="submit" onclick="mySubmit()"> </div> Quote Link to comment Share on other sites More sharing options...
dkirk Posted December 14, 2007 Author Share Posted December 14, 2007 finally got it straight with a different approach but thanks for the help. <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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.