简明现代魔法 -> web设计理念 -> 如何不刷新提交表单

如何不刷新提交表单

2011-03-12

做网站真的会遇到各种各样的问题,特别是难缠的用户,老是提出各种各样需求,这时会让人抓狂。比如提交表单这么简单的事情,也会有非常折腾的时候。首先需要先选择提交到哪个栏目,然后再有一个页面去接受这个提交栏目的表单。问题是,提交栏目的表单一旦执行了提交动作,页面会随之刷新,这个提交页面与接收页面需要在同一个页面。

如果按照常规的表单提交方法,提交后页面会进行转向,如果希望页面无刷新,可以通过ajax方法,也可以简单的通过iframe的方法。

这个时候,可以将表单提交到框架中。大概模式如下:放个隐藏的 iframe,给表单指定 target。提交后会刷新这个隐藏的 iframe。

<iframe style="width:0; height:0;" name="myFrame" src="about:blank"></iframe>
<form name="input3" method="post" action="save.asp" target="myFrame"> 
<input type="submit" value="提交"> 
</form>

下面是我的方法:

<form name="classid" id="classid" method="post" action="AddInfo.php" target="myFrame">
<select name="ClassSelector_Type:dbl_Class" id="ClassSelector_Type_dbl_Class" class="input" onchange="ResetClassItem()">
	<option value="58_1">房地产信息</option>
	<option value="61_1">教育培训</option>
	<option value="64_1">人才市场</option>
	<option value="67_1">生活信息</option>
	<option value="70_1">吃喝玩乐</option>
	<option value="73_1">交友征婚</option>
	<option value="75_1">本土商城</option>
	<option value="76_1">车辆买卖</option>
	<option value="85_1">家用电器/通讯数码</option>
	<option value="86_1">装饰/家居/建材</option>
	<option value="87_1">金融商务</option>
</select>

<select name="ClassSelector_Type:dbl_ClassItem" id="ClassSelector_Type_dbl_ClassItem" class="input" onchange="ResetClassTypeTradeType(); document.classid.submit();">
</select>

<div style="display:none;">
	<input name="ClassSelector_Type:txt_ClassId" type="text" value="58" id="ClassSelector_Type_txt_ClassId" />
	<input name="ClassSelector_Type:txt_TypeId" type="text" value="58_59" id="ClassSelector_Type_txt_TypeId" />
	<input name="ClassSelector_Type:txt_TradeType" type="text" value="2" id="ClassSelector_Type_txt_TradeType" />
</div>
</form>

<script type="text/javascript">
	//分类
	var classList = {
		"58":["房地产信息",
				[["58_59", "-选择子栏目-"],
				["58_59", "房产租售"], 
				["58_60", "求购住宅"], 
				["58_78", "写字楼"], 
				["58_79", "厂房"], 
				["58_80", "商铺"], 
				["58_81", "其它"]
				]],

		"61":["教育培训",
				[["61_62", "-选择子栏目-"],
				["61_62", "招生培训"], 
				["61_63", "外语培训"], 
				["61_82", "IT培训"], 
				["61_83", "艺术培训"], 
				["61_84", "健身培训"], 
				["61_88", "武术培训"], 
				["61_89", "早教中心"], 
				["61_90", "驾驶培训"],
				["61_91", "幼稚园"],
				["61_92", "家教"],
				["61_93", "成人高等教育"],
				["61_94", "中小学招生"],
				]],

		"64":["人才市场",
				[["64_65", "-选择子栏目-"],
				["64_65", "经营管理"], 
				["64_66", "销售/技工"], 
				["64_95", "行政/人事"], 
				["64_96", "物流/运输"], 
				["64_97", "文职/秘书"], 
				["64_98", "医疗/护理"], 
				["64_99", "业务/客服"], 
				["64_100", "电子/通讯"], 
				["64_101", "计算机/网络"]
				]],

		"67":["生活信息",
				[["67_68", "-选择子栏目-"],
				["67_68", "跳蚤市场"], 
				["67_69", "搬家"], 
				["67_102", "家政保洁"], 
				["67_103", "管道疏通"], 
				["67_104", " 维修"], 
				["67_106", "婚庆服务"], 
				["67_107", "美容保健"], 
				["67_108", "物品交换"], 
				["67_109", "设计印刷"], 
				["67_110", "艺术收藏"], 
				["67_111", "书籍音像"], 
				["67_112", "快递物流"]
				]],

		"70":["吃喝玩乐",
				[["70_71", "-选择子栏目-"],
				["70_71", "特色饭店"], 
				["70_72", "娱乐"], 
				["70_113", "足浴"], 
				["70_114", "酒店"], 
				["70_115", "酒吧"], 
				["70_116", "电影院"], 
				["70_117", "KTV"], 
				["70_118", "健身中心"], 
				["70_119", "旅行社"]
				]],

		"73":["交友征婚",
				[["73_74", "-选择子栏目-"],
				["73_74", "男士征婚"], 
				["73_120", "女士征婚"], 
				["73_121", "兴趣交友"], 
				["73_122", "同乡会"], 
				["73_123", "同城活动"], 
				["73_124", "公益活动"]
				]],

		"75":["本土商城",
				[["75_123", "-选择子栏目-"],
				["75_123", "珠宝"], 
				["75_126", "礼品"], 
				["75_127", "日用百货"], 
				["75_128", "服装鞋帽"], 
				["75_129", "体育用品"], 
				["75_130", "文具"], 
				["75_131", "茶叶"], 
				["75_132", "家具"]
				]],

		"76":["车辆买卖",
				[["76_133", "-选择子栏目-"],
				["76_133", "新车优惠"], 
				["76_134", "二手车转让"], 
				["76_135", "二手车求购"], 
				["76_136", "自行车"], 
				["76_137", "电动车"], 
				["76_138", "汽车美容"], 
				["76_139", "驾校"], 
				["76_140", "维修保养"], 
				["76_141", "车辆违章办理"]
				]],

		"85":["家用电器/通讯数码",
				[["85_142", "-选择子栏目-"],
				["85_142", "电脑设备"], 
				["85_143", "电冰箱"], 
				["85_144", "洗衣机"], 
				["85_145", "音响音箱"], 
				["85_146", "空调风扇"], 
				["85_147", "厨卫电器"], 
				["85_148", "手机/对讲机"], 
				["85_149", "PDA/随身听"], 
				["85_150", "MP3/MP4"], 
				["85_151", "数码相机"], 
				["85_152", "防盗监控"]
				]],
				
		"86":["装饰/家居/建材",
				[["86_153", "-选择子栏目-"],
				["86_153", "装饰品牌"], 
				["86_154", "家具厨卫"], 
				["86_155", "防蚊纱窗"], 
				["86_156", "木业地板"], 
				["86_157", "陶瓷"]
				]],
				
		"87":["金融商务",
				[["87_158", "-选择子栏目-"],
				["87_158", "信息咨询"], 
				["87_159", "担保贷款"], 
				["87_160", "法律咨询"], 
				["87_161", "商标专利"], 
				["87_162", "招商合作"], 
				["87_163", "工商注册"], 
				["87_164", "翻译"], 
				["87_165", "保险"]
				]]
	}

	//重设子类
	function ResetClassItem(){
		var classObj = document.getElementById('ClassSelector_Type_dbl_Class');


		var classTradeType = classObj.options[classObj.selectedIndex].value;
		var classId = classTradeType.substring(0, classTradeType.indexOf("_"));
		var tradeType = classTradeType.substring(classTradeType.indexOf("_")+1);
		var classItemObj = document.getElementById('ClassSelector_Type_dbl_ClassItem');
		classItemObj.options.length = 0; //清空子类
		var classItemList = classList[classId][1];

		for(var i = 0; i < classItemList.length; i++){
			var subClass = classItemList[i];
			classItemObj.options.add(new Option(subClass[1], subClass[0]));
		}

		ResetClassTypeTradeType();
	}

	//重设各分类值
	function ResetClassTypeTradeType(){
		var classObj = document.getElementById('ClassSelector_Type_dbl_Class');
		var classTradeType = classObj.options[classObj.selectedIndex].value;
		var classId = classTradeType.substring(0, classTradeType.indexOf("_"));
		var tradeType = classTradeType.substring(classTradeType.indexOf("_")+1);
		var classItemObj = document.getElementById('ClassSelector_Type_dbl_ClassItem');
		var typeId = classItemObj.options[classItemObj.selectedIndex].value;

		document.getElementById('ClassSelector_Type_txt_ClassId').value = classId;
		document.getElementById('ClassSelector_Type_txt_TypeId').value = typeId;
		document.getElementById('ClassSelector_Type_txt_TradeType').value = tradeType;
		
		//if(classItemObj.onchange)
		//{
			//document.classid.submit();
		//}
		//alert(typeId);
	}
	
	function PostValue(){
		document.classid.submit();
	}

	//加载
	function InitClassSelectItem(){
		var classObj = document.getElementById('ClassSelector_Type_dbl_Class');
		var classItemObj = document.getElementById('ClassSelector_Type_dbl_ClassItem');
		var classId = document.getElementById('ClassSelector_Type_txt_ClassId').value;
		var typeId = document.getElementById('ClassSelector_Type_txt_TypeId').value;
		var tradeType = document.getElementById('ClassSelector_Type_txt_TradeType').value;

		if (classId.length == 0 || classId == "0"){
			classId = "140001";
			document.getElementById('ClassSelector_Type_txt_ClassId').value = classId;
		}

		if (typeId.length == 0 || typeId == "0"){
			typeId = "14000101";
			document.getElementById('ClassSelector_Type_txt_TypeId').value = typeId;
		}

		if (tradeType.length == 0 || tradeType == "0"){
			tradeType = "2";
			document.getElementById('ClassSelector_Type_txt_TypeId').value = tradeType;
		}

		//alert(classId + "  " + typeId + "  " + tradeType);
		var _tempClassTradeType, _tempClassId, _tempTradeType;
		for (var i = 0; i < classObj.options.length; i++)
		{
			var _tempClassTradeType = classObj.options[i].value;
			var _tempClassId = _tempClassTradeType.substring(0, _tempClassTradeType.indexOf("_"));
			var _tempTradeType = _tempClassTradeType.substring(_tempClassTradeType.indexOf("_")+1);

			if (_tempClassTradeType == (classId+"_"+tradeType)){
				classObj.selectedIndex = i;
				//alert(_tempClassTradeType);
				break;
			}
		}

		//ResetClassItem();

		var classItemList = classList[classId][1];
		for(var i = 0; i < classItemList.length; i++){
			var subClass = classItemList[i];
			classItemObj.options.add(new Option(subClass[1], subClass[0]));
		}

		for (var i = 0; i < classItemObj.options.length; i++){
			if (classItemObj.options[i].value == typeId){
				classItemObj.selectedIndex = i;
				//alert(typeId + "  " + document.getElementById('ClassSelector_Type_txt_TypeId').value);
				break;
			}
		}

		//alert(typeId);
	}

	InitClassSelectItem();
</script>

<iframe style="width:600px; height:600px; border:none;" name="myFrame" src="AddInfo.php?mid=8&enews=MAddInfo&classid=59&Submit=提+交" scrolling="no"></iframe>

二次开发帝国CMS的提交页面,改一个信息分类网站时遇到的应用。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们