简明现代魔法 -> web设计理念 -> 在iframe里对父级页面进行表单验证

在iframe里对父级页面进行表单验证

2011-03-20

我们有时候需要在iframe里面对父级的表单进行验证,这其实也很简单,在iframe中使用parent关键字来调用父级页面的javascript函数即可。下面是我在项目遇到的一个实际问题,为了以后使用方便,记录下。如果能对大家也有用,那就最好了。

iframe表单设计:

<form name="add" method="POST" enctype="multipart/form-data" action="ecms.php" onsubmit="return chkinput(this);">
	<input type=hidden value=<?=$enews?> name=enews> <input type=hidden value=<?=$classid?> name=classid> 
	<input name=id type=hidden id="id" value=<?=$id?>> <input type=hidden value="<?=$filepass?>" name=filepass> 
	<input name=mid type=hidden id="mid" value=<?=$mid?>>
<?php
  @include($modfile);
?>
	<input type="submit" name="addnews" value="发 布" class="login_button">
</form>

在iframe里写上下面的验证父级页面的代码:

<script type="text/javascript">
function chkinput(form)
{
	//parent.CheckField();
	return parent.CheckField();
}
</script>

父级页面的表单:

<form name="classid" id="classid" method="post" action="AddInfo.php" target="myFrame" onsubmit="return CheckChangeClass();">
<select name="ClassSelector_Type:dbl_Class" id="ClassSelector_Type_dbl_Class" class="input" onchange="ResetClassItem()">
	<option value="50_0">请选择大栏目</option>
	<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="50" id="ClassSelector_Type_txt_ClassId" />
	<input name="ClassSelector_Type:txt_TypeId" type="text" value="50_0" id="ClassSelector_Type_txt_TypeId" />
	<input name="ClassSelector_Type:txt_TradeType" type="text" value="2" id="ClassSelector_Type_txt_TradeType" />
</div>
(请选择栏目,以便信息容易审核通过)
</form>

父级页面的表单验证代码:

<script language="JavaScript">   
function aa() {   
	alert("Ok!");   
	return false;
}

function CheckField()
{
	var form_class_id = document.getElementById("ClassSelector_Type_txt_ClassId");
	//alert(form_class_id.value);
	if(form_class_id.value == '50' || form_class_id.value=='')
	{
		alert("请选择栏目");
		return false;
	}
	return true;
}
</script>  
随机文章推荐
网站分类


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

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


 

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

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