如何中断表单提交和修改CSS类属性
如何中断表单提交和修改CSS类属性
提问于 2013-08-03 21:49:23
我目前有一个表单，正在张贴一个文件，但我想中断提交，以便我可以显示一个‘加载’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>回答 3
Stack Overflow用户
发布于 2013-08-03 21:58:38
为此使用jQuery，删除默认的提交并添加超时
$('form').submit(function(e)) {
e.preventDefault();
setTimeout(function() {
this.submit();
}, 5000); // in milliseconds
}Stack Overflow用户
发布于 2013-08-03 22:54:04
$("#form_id").submit(function(e){
e.preventDefault();
//Code for displaying the image
});Stack Overflow用户
发布于 2013-08-04 03:17:17
我可以用纯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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18033526
复制相关文章
相似问题
腾讯云开发者
