页面验证iframe中input后 iframe中的页面会从新加载

Question

主页面
<div class="selectedDiv" id="content_tb" style="border:solid 0px red">            <iframe width="980px" scrolling="auto" height="510" frameborder="0"           src=""      name="reportInfoIframe" id="reportInfoIframe"></iframe>  
</div> <script type="text/javascript">
$(function(){
var tableType=$("#reportId").val();
if(tableType==0){
$("#reportInfoIframe").attr({"src":"tableIndex.jsp"});
}else if(tableType==1){
$("#reportInfoIframe").attr({"src":"table_01.jsp"});
}else if(tableType==2){
$("#reportInfoIframe").attr({"src":"table_02.jsp"});
}
        此方法为判断主页面iframe到底加载哪个子页面

$("#reportId").change(function(){
var type=$(this).val();
$.ajax({
url:'/Cyedu/Upload/UploadReport',
type:'post', 
dataType:'json',
data :{'ddate':$("#dataDate").val(),'rid':$("#reportId").val()},
success:function(){}
})
if(type==0){
$(".tab > div").removeClass("selectedDiv");
$("#content_tb").addClass("selectedDiv");
$("#reportInfoIframe").attr({src:"tableIndex.jsp"});
}else if(type==1){
$(".tab > div").removeClass("selectedDiv");
$("#content_tb").addClass("selectedDiv");
$("#reportInfoIframe").attr({src:"table_01.jsp"});
}else if(type==2){
$(".tab > div").removeClass("selectedDiv");
$("#content_tb").addClass("selectedDiv");
$("#reportInfoIframe").attr({src:"table_02.jsp"});
}
        });  
        此方法是主页面有一个下拉框，根据下拉框选择主页面的iframe到底链接到哪个子页面

$("#submitBtn").click(function(){//提交按钮

var tt = $(window.frames["reportInfoIframe"].document).find("#submit_btn");//找到iframe的页面中submit_btn按钮。
tt.click();
});

})</script>子页面 
table_01.jsp
html
<table  id="table" class="staTable" width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th colspan="3" rowspan="2">&nbsp;</th>
        <th width="12%" rowspan="2">校数</th>
        <th width="12%" rowspan="2">班数</th>
        <th colspan="2">在校生数</th>
        <th colspan="2">教职工数</th>
      </tr>
      <tr>
        <th width="12%">正式生数</th>
        <th width="12%">借读生数</th>
        <th width="12%">合计</th>
        <th width="12%">其中：教师</th>
      </tr>
             
      <tr>
        <th width="2%" rowspan="9" class="tdCol01">普通中学</th>
        <th colspan="2">合计</th>
        <td id="4r4c"><input type="text" id="4row4col" name="4row4col" value="${tbmap['4row4col']}" class="inp_text"/></td>
        <td id="4r5c"><input type="text" id="4row5col" name="4row5col" value="${tbmap['4row5col']}" class="inp_text"/></td>
        <td id="4r6c"><input type="text" id="4row6col" name="4row6col" value="${tbmap['4row6col']}" class="inp_text"/></td>
        <td id="4r7c"><input type="text" id="4row7col" name="4row7col" value="${tbmap['4row7col']}" class="inp_text"/></td>
        <td id="4r8c"><input type="text" id="4row8col" name="4row8col" value="${tbmap['4row8col']}" class="inp_text"/></td>
        <td id="4r9c"><input type="text" id="4row9col" name="4row9col" value="${tbmap['4row9col']}" class="inp_text"/></td>
      </tr>
      <tr>
        <th rowspan="4">教育部门办学校</th>
        <th>高级中学</th>
        <td id="5r4c"><input type="text" id="5row4col" name="5row4col" value="${tbmap['5row4col']}" class="inp_text"/></td>
        <td id="5r5c"><input type="text" id="5row5col" name="5row5col" value="${tbmap['5row5col']}" class="inp_text"/></td>
        <td id="5r6c"><input type="text" id="5row6col" name="5row6col" value="${tbmap['5row6col']}" class="inp_text"/></td>
        <td id="5r7c"><input type="text" id="5row7col" name="5row7col" value="${tbmap['5row7col']}" class="inp_text"/></td>
        <td id="5r8c"><input type="text" id="5row8col" name="5row8col" value="${tbmap['5row8col']}" class="inp_text"/></td>
        <td id="5r9c"><input type="text" id="5row9col" name="5row9col" value="${tbmap['5row9col']}" class="inp_text"/></td>
      </tr>
</table>
此tbmap是在servlet中session中的值，为一个HashMap集合js
$("#submit_btn").click(function(){
     var obj = $("input[type*='text']").toArray();
     var count=0;
     var count1=0;
     $.each(obj,function(){
if($(this).val().length==0){
$(this).addClass("inp_text_error");
count1++;
}
if(isNaN($(this).val())){
$(this).addClass("inp_text_error");
count++;
}
     });

    if(count>0){
 alert("请输入数字！谢谢。");
 return false;
    }
    if(count1>0){
 alert("空白处请填写0！谢谢。");
 return false;
    }
     ..............
     ..............
});现在的问题是在主页面里提交table_01.jsp的表单时 验证没问题，如果没通过验证会弹出alert框，
但是table_01.jsp页面里所有的input type=text都没了，感觉是table_01.jsp页面自动刷新了。
可是我table_01.jsp页面里的元素值是存在session中的，怎么也读不出来，太困惑了。求解

Answer 1

补充一下
这个问题的意思就是主页面能控制iframe链接到哪个子页面。并能提交iframe中的表单。
子页面验证时，如果return false，那么子页面里所有input type=text的value都会自动清空。
这个问题困扰好几天了。悲催

Answer 2

$("#submitBtn").click(function(){//提交按钮
    var tt = $(window.frames["reportInfoIframe"].document).find("#submit_btn");//找到    iframe的页面中submit_btn按钮。
    tt.click();
    return false;
});点了提交按钮以后form提交了，导致页面刷新，添加return false不让提交就可以了。

Answer 3

谢谢楼上的大师，功能实现了。追问下，这个return false;是无论是否通过验证都不提交表单。
如果我要是验证通过，确认提交呢？

Answer 4

主页面的submit_btn按钮是input type=button

Answer 5

是的。要是想要你的那个效果的话，要在子页面里验证成功后，在父页面添加一个变量，告知父页面，验证是否通过。
$("#submit_btn").click(function(){
     var obj = $("input[type*='text']").toArray();
     var count=0;
     var count1=0;
     $.each(obj,function(){
if($(this).val().length==0){
$(this).addClass("inp_text_error");
count1++;
}
if(isNaN($(this).val())){
$(this).addClass("inp_text_error");
count++;
}
     });    if(count>0){
 alert("请输入数字！谢谢。");
 return false;
    }
    if(count1>0){
 alert("空白处请填写0！谢谢。");
 return false;
    }
    parent.canSubmit = true;
});$("#submitBtn").click(function(){//提交按钮
    var tt = $(window.frames["reportInfoIframe"].document).find("#submit_btn");//找到    iframe的页面中submit_btn按钮。
    tt.click();
    if(!canSubmit)return false;
});

Answer 6

$("#submitBtn").click(function(){//提交按钮
    var tt = $(window.frames["reportInfoIframe"].document).find("#submit_btn");//找到    iframe的页面中submit_btn按钮。
    tt.click();
    if(!canSubmit){
        camSubmit = undefined;//重置这个变量，否则点一下不通过，再点一下就直接通过了
        return false;
    }
});