用户点提交按钮之后,我想在页面中显示一张图片,几秒钟之后再提交:
<form method="post" action="index.php?ac=exchange" name="exchangefrm" onsubmit="return check_exchange(this);"><script type="text/javascript">
function check_exchange(form) {
form = document.exchangefrm;
if(form.linkman.value.trim() == '') {
alert('未填写联系人。');
return false;
}
else {
if( confirm('您确定联系方式正确并抽取此礼品吗?') ){
document.getElementById('loading').style.display='block';
document.getElementById('message').style.display='none';
setTimeout(function(){ form.submit();}, 5000);
}
else
{
return false;
}
}
</script>
现在的问题是,loading 图片根本没显示5秒,刷一下就过去了
<form method="post" action="index.php?ac=exchange" name="exchangefrm" onsubmit="return check_exchange(this);"><script type="text/javascript">
function check_exchange(form) {
form = document.exchangefrm;
if(form.linkman.value.trim() == '') {
alert('未填写联系人。');
return false;
}
else {
if( confirm('您确定联系方式正确并抽取此礼品吗?') ){
document.getElementById('loading').style.display='block';
document.getElementById('message').style.display='none';
setTimeout(function(){ form.submit();}, 5000);
}
else
{
return false;
}
}
</script>
现在的问题是,loading 图片根本没显示5秒,刷一下就过去了
else
{
return false;
}
}改成:
return false;则可以正常显示loading 5秒,但是提交不正常,没有正常提交,只看到地址栏变成了:index.php?ac=exchange
setTimeout(function(){ form.submit();}, 10000);能感觉超过5秒,感觉不够,就加长时间……
function check_exchange(form) {
form = document.exchangefrm;
if(form.linkman.value.trim() == '') {
alert('未填写联系人。');
return false;
}
else {
if( confirm('您确定联系方式正确并抽取此礼品吗?') ){
document.getElementById('loading').style.display='block';
document.getElementById('message').style.display='none';
setTimeout(function(){ form.submit();}, 10000);
return false;
}
else
{
return false;
}
}
改成
<form method="post" action="index.php?ac=exchange" id="exchangefrm" name="exchangefrm">
<input type="button" onclick="return check_exchange(document.getElementById('exchangefrm'));"/>
onsubmit是在提交时触发,而你在onsubmit里又提交了一次,已经提交的不能提交
<script type="text/javascript">
function check_exchange(form) {
alert("3")
form = document.exchangefrm;
if(form.linkman.value.trim() == '') {
alert('未填写联系人。');
alert("2")
return false;
}
else {
alert("1")
if(confirm('您确定联系方式正确并抽取此礼品吗?')){
document.getElementById('loading').style.display='block';
document.getElementById('message').style.display='none';
setTimeout(function(){alert("a"); form.submit(); return;}, 5000);
}else{
return false;
}
}
}
</script>
无法执行到if或者else里面去
<script type="text/javascript">
var breturn=1;
function check_exchange(forms){
form = document.exchangefrm;
if(form.linkman.value== '') {
alert('未填写联系人。');
breturn=1;
return false;
}else {
if(breturn){
if(confirm('您确定联系方式正确并抽取此礼品吗?')){
document.getElementById('loading').style.display='block';
document.getElementById('message').style.display='none';
setTimeout(function(){breturn=0;form.submit();}, 5000);
return false;
}else{
breturn=1;
return false;
}
}else{
return true;
}
}
}
</script>form.linkman.value.trim()
这个不知道你有没有trim()这个方法,默认是没有所以我的代码里面取消了,不然我代码有问题。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<form method="post" action="index.php?ac=exchange" id="exchangefrm" name="exchangefrm" onsubmit="return check_exchange(this.form);">
<div id="loading" style="display:none">loading</div>
<div id="message">message</div>
<input type="text" name="linkman" id="linkman" />
<input type="button" value="2222222222" />
<input type="submit" name="btnsubmit" id="btnsubmit" />
</form>
<script type="text/javascript">
var breturn=1;
function check_exchange(forms){
form = document.exchangefrm;
if(form.linkman.value== '') {
alert('未填写联系人。');
breturn=1;
return false;
}else {
if(breturn){
if(confirm('您确定联系方式正确并抽取此礼品吗?')){
document.getElementById('loading').style.display='block';
document.getElementById('message').style.display='none';
setTimeout(function(){breturn=0;form.submit();}, 5000);
return false;
}else{
breturn=1;
return false;
}
}else{
return true;
}
}
}
</script>
</body>
</html>