您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

表单提交onsubmit触发onbeforeunload事件解决之道

发布时间：2015-04-04 18:46:28编辑：雪饮阅读（）

 在一个项目中需要做一个患者预约的表单，需要实现的功能是：

患者填写一切信息后可以通过js处理患者信息整理后便于医院相关人员一目了然的信息，并发送到指定医院的qq邮箱中。

该功能一切都已经ok了，可以提交信息到指定邮箱了，可问题出现了：

由于网站使用了一款商务通的js，而该js会在网页刷新、重载、关闭时弹出提示框。而我的表单需要提交，大家都知道在表单提交的过程就相当于载入一个新的网页那么势必会触发网页关闭的事件（onbeforeunload），这样显然与商务通相冲下面雪饮个人博客将处理的相关核心代码贡献给大家：

                <script>

var list=new Array();

list[0]="访客姓名";

list[1]="访客年龄";

list[2]="联系电话";

list[3]="QQ";

list[4]="病情描述";

function check(){

for(i in list){

document.getElementById("l"+i).value=list[i]+" : "+document.getElementById("l"+i).value;

}

window.onbeforeunload=function (){return}

return true;

 

}

</script>

     

          <form action="/plus/mail.php"  method="post" name="mail" onsubmit="return check()">

 

            <table style="width:100%;" cellpadding="0" cellspacing="1">

 

              <tr>

 

                <td height="30" align="left" style='width:190px'>访客姓名：

 

                  <input type='text' name="0" id='l0' style='width:100px;height:15px;line-height:15px;'  class='intxt'/>

 

                    <font color="#FF0000"> *</font></td>

 

                <td height="30" align="left" style="width:190px"> 访客年龄：

 

                  <input type='text' name="1" id='l1' style='width:18px;height:15px;line-height:15px;'  class='intxt'/>

 

                    <font color="#FF0000"> *</font></td>

 

              </tr>

 

              <tr>

 

                <td height="30" align="left" style='width:190px'>联系电话：

 

                  <input type='text' name="2" id='l2' style='width:100px;height:15px;line-height:15px;'  class='intxt' />

 

                    <font color="#FF0000"></font></td>

 

                <td height="30" align="left" style='width:190px'>QQ：

 

                  <input type='text' name="3" id='l3' style='width:100px;height:15px;line-height:15px;'  class='intxt' />

 

                    <font color="#FF0000"> *</font></td>

 

              </tr>

 

              <tr></tr>

 

            </table>

 

            <div class="tw">

 

              <textarea name="4" id='l4' onclick="this.value=''" cols="" rows="3" class="que left">在此输入您想问的妇科问题，我们的专业医生会在第一时间做出回复！</textarea>

 

            </div>

 

            <p style="color:#F00;">*请放心填写，你的个人资料不会在网站展示。 </p>

 

            <div align='center' style='height:25px;padding-top:5px;'>

 

              <input type="submit" name="sub" value="" class='tijiaoa'/>

              <input type="reset" name="reset" value="" class='chongzhib' />

 

            </div>

 

          </form>

上面代码中，最核心的是window.onbeforeunload=function (){return}，该语句可以将网页关闭的方法注销掉，而我表单在提交的时候就执行了该语句所在的方法，那么也就是说在表单提交时顺便注销了网页关闭的方法，如此一来表单得以提交并且还可以不触发onbeforeunload网页关闭的商务通弹窗。

本文由雪饮个人博客提供，谢谢观看，希望能够给你带来帮助。