求js提交表单前的预览效果

menghuan0625 2012-12-29 04:09:02

表单中包含select，radio，checkbox，textarea和text，点击提交按钮会弹出一个提示框，上面是你所填的信息，请问如何实现这些效果？？？

...全文

486 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

menghuan0625 2013-01-04

打赏
举报

谢谢啦，你的代码给了我很大帮助

menghuan0625 2012-12-30

打赏
举报

引用 1 楼 ILOVE_ASPNET 的回复:

这个应该没有现成的吧，因为都靠你自己人工去拼，点击提交的把这些信息全部获取拼在一个层里面显示，然后当点击层上面的确认按钮的时候再提交表单就好了。

弹出层我已经弄出来了，就是不会获取表单里面的信息，还请帮忙解决一下

爱若如梦 2012-12-30

打赏
举报

引用 3 楼 menghuan0625 的回复:

引用 1 楼 ILOVE_ASPNET 的回复:这个应该没有现成的吧，因为都靠你自己人工去拼，点击提交的把这些信息全部获取拼在一个层里面显示，然后当点击层上面的确认按钮的时候再提交表单就好了。弹出层我已经弄出来了，就是不会获取表单里面的信息，还请帮忙解决一下

原始的js，但可用，将showDiv这个div放到你的弹出层就可以了，样式需要自己调整。


<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>

爱若如梦 2012-12-30