Question

我目前有一个发布文件的表单，但我想中断提交，所以我可以显示'loading'gif然后提交。这样，gif就可以作为较大文件的加载符号。我需要一种方法来改变css类属性，从display：none到display：all。有什么帮助吗？

我的代码：

 <html>
<head>
<title>Upload your media!</title>
<style type="text/css">
load {
display: none;

}

</style>
<script>
function validateForm()
{

var x=document.forms["mediaupload"]["title"].value;
if (x==null || x=="")
  {
  alert("Title must be filled out");
  return false;
  }

  var y=document.forms["mediaupload"]["info"].value;
if (y==null || y=="")
  {
  alert("Description must be filled out");
  return false;
  }
  var z=document.forms["mediaupload"]["file"].value;
  if (z==null || z=="")
  {
  alert("You need to select a file to upload");
  return false;
  }



}
</script>
</head>
<body>
<h1>TOOB</h1>

<form name="mediaupload" action="upload_file.php" onsubmit="return validateForm()" method="post"
enctype="multipart/form-data">
<fieldset>
<legend><h4>Upload</h4></legend>
Title:<input type="text" name="title"><br>
Description:<textarea rows="10" cols="30" name="info">Write your desiption here</textarea><br>
Anonymous:<input type="checkbox" name="anonymous"><br>
File Upload:<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="Submit">
</fieldset>
</form>

<load><img id="loading" src="sitemedia/loading.gif" ></load>
</body>
</html>

Answer 1

使用jQuery，删除默认提交并添加超时

$('form').submit(function(e)) {
    e.preventDefault();
    setTimeout(function() {
        this.submit();
    }, 5000);   // in milliseconds
}

Answer 2

$("#form_id").submit(function(e){
       e.preventDefault();

       //Code for displaying the image 
});

Answer 3

我能够在纯JavaScript中完成此操作。

<强> HTML

我将提交按钮更改为：

<input type="button" onclick="loadFunc()" name="submit" value="Submit">

并添加了此加载div：

<div id="loading" style="display:none">
<img src="sitemedia/loading.gif" />
</div>

<强>的JavaScript

function loadFunc() {
    document.getElementById("loading").style.display = "block";
    document.mediaupload.submit();
}

请参阅CodePen here。

如何中断表单提交和修改CSS类属性

3 个答案: