在form表单里有多个div，判断隐藏与显示

在form表单里有多个div只有把第一个div中的内容填完可点击下一步才显示下一个隐藏的div继续填写，以此类推，怎么来判断让隐藏的div显示呢。贴点代码最好。谢谢了。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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>
  <title></title>
  <meta name="gENERATOR" content="eDITpLUS">
  <meta name="aUTHOR" content="">
  <meta name="kEYWORDS" content="">
  <meta name="dESCRIPTION" content=""> </head> <body>
<form name="form1" action="" method="POST" onsubmit="return check()">
  <div id="div_01" style="display: block;">
  <input type="text" name="car_no" id='car_no' />
  <input type="text" name="car_no" id='car_no' />
  <input TYPE="button" value="下一步" onClick="next('div_01','div_02')" >
  </div>
  <div id="div_02" style="display: none;">
  <input type="text" name="car_no" id='car_no' />
  <input type="text" name="car_no" id='car_no' />
  <input TYPE="submit" value="下一步" >
  </div>
</form>
</body>
   <script>
function next(div_01,div_02)
{
var inps = document.getElementById(div_01).getElementsByTagName('input'),
is_true = true;

for(var i = 0; i < inps.length; i++){
if(!inps[i].value){
is_true = false;
}
}

if(is_true){
document.getElementById(div_02).style.display = 'block';
}
}
  </script>
</html>
<!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>
  <title></title> </head> <body>
<form name="form1" action="" method="POST" onsubmit="return check()">
  <div id="div_01" style="display: block;">
  <input type="text" name="car_no" id='car_no' />
  <input type="text" name="car_no" id='car_no' />
  <input TYPE="button" value="下一步" onClick="next('div_01','div_02')" >
  </div>
  <div id="div_02" style="display: none;">
  <input type="text" name="car_no" id='car_no' />
  <input type="text" name="car_no" id='car_no' />
  <input TYPE="button" value="下一步" onClick="next('div_02','div_03')" >
  </div>
  <div id="div_03" style="display: none;">
  <input type="text" name="car_no" id='car_no' />
  <input type="text" name="car_no" id='car_no' />
  <input TYPE="submit" value="下一步" >
  </div>
</form>
</body>
   <script>
function next(div_01,div_02)
{
    var inps = document.getElementById(div_01).getElementsByTagName('input'),
    is_true = true;

    for(var i = 0; i < inps.length; i++){
        if(!inps[i].value){
            is_true = false;
        }
    }

    if(is_true){
        document.getElementById(div_02).style.display = 'block';
    }
}
  </script>
</html>多个写法，看好onclick方法传的参数，当前div的ID和下一个div的ID。还有如果不是最后一个按钮的话，把按钮的type改成button。
<!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>
  <title></title> </head> <body>
<form name="form1" action="" method="POST" onsubmit="return check()">
  <div id="div_01" style="display: block;">1
  <input type="text" name="car_no" id='car_no' />
  <input type="text" name="car_no" id='car_no' />
  <input TYPE="button" value="下一步" onClick="next('div_01','div_02')" >
  </div>
  <div id="div_02" style="display: none;">2
  <input type="text" name="car_no" id='car_no' />
  <input type="text" name="car_no" id='car_no' />
  <input TYPE="button" value="下一步" onClick="next('div_02','div_03')" >
  </div>
  <div id="div_03" style="display: none;">3
  <input type="text" name="car_no" id='car_no' />
  <input type="text" name="car_no" id='car_no' />
  <input TYPE="submit" value="下一步" >
  </div>
</form>
</body>
   <script>
function next(div_01,div_02)
{
    var inps = document.getElementById(div_01).getElementsByTagName('input'),
    is_true = true;

    for(var i = 0; i < inps.length; i++){
        if(!inps[i].value){
            is_true = false;
        }
    }

    if(is_true){
document.getElementById(div_01).style.display = 'none';
        document.getElementById(div_02).style.display = 'block';
    }
}
  </script>
</html>这个~·
你最后一个按钮不是提交表单吗？你想弹出一个弹出框alert是吗？
<!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>
  <title></title> </head> <body>
<form name="form1" action="" method="POST" onsubmit="return check()">
  <div id="div_01" style="display: block;">1
  <input type="text" name="car_no" id='car_no' />
  <input type="text" name="car_no" id='car_no' />
  <input TYPE="button" value="下一步" onClick="next('div_01','div_02')" >
  </div>
  <div id="div_02" style="display: none;">2
  <input type="text" name="car_no" id='car_no' />
  <input type="text" name="car_no" id='car_no' />
  <input TYPE="button" value="下一步" onClick="next('div_02','div_03')" >
  </div>
  <div id="div_03" style="display: none;">3
  <input type="text" name="car_no" id='car_no' />
  <input type="text" name="car_no" id='car_no' />
  <input TYPE="button" value="下一步" onClick="next('div_02','div_03',function(){alert('提示的话')})" >
  </div>
</form>
</body>
   <script>
function next(div_01,div_02,fun)
{
    var inps = document.getElementById(div_01).getElementsByTagName('input'),
    is_true = true;

    for(var i = 0; i < inps.length; i++){
        if(!inps[i].value){
            is_true = false;
        }
    }

    if(is_true){
document.getElementById(div_01).style.display = 'none';
        document.getElementById(div_02).style.display = 'block';
    }

if(fun){
fun();
}
}
  </script>
</html>看看是这意思吗》？
在提交之后提示提交成功的显示的提示相当于又加了个div。可是提交成功后就又显示到了第一个了。