0

I'd like to show a progress image loader only when the user clicks on submit on my html form but at the moment the progress image loader is displayed also when the user reloads the page... so I'd like to isolate the event only a clicked button (submit) without having the progress image loader displayed when the user reloads the page. I provide an example in order to show what I looking for in pure javascript.

Any help is appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <meta name="pragma" content="no-cache">
  <meta name="robots" content="noindex, nofollow">
  <title>BackUp</title>
  <link rel="stylesheet" type="text/css" href="backup.css">
  <script language="javascript" type="text/javascript">
  function StartProgress() {
    ProgressImage = document.getElementById('progress_image');
    document.getElementById("progress").style.display = "block";
    setTimeout("ProgressImage.src = ProgressImage.src", 100);
    return true;
  }
  </script>
</head>

<body onUnload="StartProgress()">

<div class="mainbox">
  <div class="box1">
    <span class="title">BackUp</span>
  </div>
  <div class="cleardiv"></div>
  <div class="box2">
    <form onSubmit="return StartProgress()" action="backup.php" method="post">
    <input class="backup_button" type="submit" name="submit" value="BackUp">
    </form>
  </div>
  <div class="cleardiv"></div>
  <div style="display: none" id="progress"><img id="progress_image" src="css/busy.gif" alt="BackUp in progress..."></div>
  <div class="cleardiv"></div>
</div>

</body>

</html>
Alessandro
  • 900
  • 12
  • 23

1 Answers1

1

You can try this:

change your form to be something like this:

<form id='form1' action="backup.php" method="post">
    <input type='button' onclick='submitForm()' value="BackUp" />
</form>

submitForm function:

function submitForm() {
    StartProgress();
    var form1 = document.getElementById('form1');
    form1.submit();
    //setTimeout(function(){
    //  form1.submit();
    //}, 1000);
}
Saleh Yusefnejad
  • 166
  • 4
  • `` I get backup.submit is not a function... where is wrong? – Alessandro Mar 01 '15 at 16:43
  • your code works but I get javascript error backup.submit is not a function... how to solve this issue? – Alessandro Mar 01 '15 at 16:45
  • `
    ` changing the name of input did solve the problem... thanks! http://stackoverflow.com/questions/833032/submit-is-not-a-function-error-in-javascript     – Alessandro Mar 01 '15 at 16:55