求js提交表单前的预览效果
表单中包含select，radio，checkbox，textarea和text，点击提交按钮会弹出一个提示框，上面是你所填的信息，请问如何实现这些效果？？？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<body>
<div>
<p><span>包间类型:</span><select id="roomType"><option value=0>8桌连台（2楼）</option><option value=1>16桌连台（2楼）</option></select></p>
<p><span>包间数量:<select id="roomNum"><option value='0'>9间</option><option value = '1'>10间</option></select></p>
<p><span>菜品:</span><input type = "checkbox" id="cool"/><lable for="cool">凉菜</label> <input type = "checkbox" id="warm"/><lable for="warm">热菜</label> <input type = "checkbox" id="seafood"/><lable for="seafood">海鲜</label></p>
<p><span>打折:</span><input type ="radio" name="cut" value="1" id="cut1"><label for="cut1">8.8折</label><input type ="radio" name="cut" value="1" id="cut2"><label for="cut2">9折</label> <input type ="radio" name="cut" value="1" id="cut3"><label for="cut3">7.5折</label></p>
<p><span>其他:</span><textarea id="other"></textarea></p>
<p><span>姓名:</span><input type ="text" id="name"/></p>
</div>
<input type="button" value="预览" onclick ="preSubmit()"/>
<div id="showDiv"></div>
</body>
<script type="text/javascript">
function preSubmit()
{
testHtml="";
document.getElementById("showDiv").innerHTML ="";//清空
var typeSelect = document.getElementById("roomType");
addOneLine("包间类型",typeSelect.options[typeSelect.options.selectedIndex].text);
var numSelect = document.getElementById("roomNum");
addOneLine("包间数量",numSelect.options[numSelect.options.selectedIndex].text);
var dish = [];
if(document.getElementById("cool").checked)
{
dish[dish.length] = '凉菜';
}
if(document.getElementById("warm").checked)
{
dish[dish.length] = '热菜';
}
if(document.getElementById("seafood").checked)
{
dish[dish.length] = '海鲜';
}
addOneLine("菜品", dish.join(",")) ;
var cutText = "";
if(document.getElementById("cut1").checked)
{
cutText = "8.8折";
}
else if(document.getElementById("cut2").checked)
{
cutText = "9折";
}
else
{
cutText = "7.5折";
}
addOneLine("打折", cutText);
addOneLine("其他",document.getElementById("other").value);
addOneLine("姓名",document.getElementById("name").value);
document.getElementById("showDiv").innerHTML = testHtml;
}
var testHtml ="";
function addOneLine(key,value)
{
testHtml += "<p>";
testHtml += key+":";
testHtml +=value;
testHtml += "<p>";
}
</script>
</html>
