JQuery导航警告以输入类型为条件

JQuery navigation warnings to be conditional on input types

本文关键字:类型 条件 输入 导航 警告 JQuery      更新时间:2023-09-26

我有一个脚本,当用户在保存任何更改之前试图离开页面时,它会警告用户。

然而,我希望它在从选择下拉菜单重定向到其他页面时忽略某些类的这一点,如果没有进行任何更改,但如果对其他输入字段进行了更改,并且他们试图通过此选择下拉菜单导航,则应显示警告。这是脚本:

$(document).ready(function () {
    var unsaved = false;
    $(":input").change(function(){
        unsaved = true;
    });
    $('.send').click(function() {
       unsaved = false;
    });
    function unloadPage(){ 
        if(unsaved){
            return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
        }
    }
    $(window).bind('beforeunload', function() {
       if(unsaved){
           return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
       }
    });
   //Monitor dynamic inputs
   $(document).on('change', ':input', function(){
       unsaved = true;
   });
   $(document).on('change', '.send1', function(){ 
       unsaved = false;
   });
  window.onbeforeunload = unloadPage;
});

这是一些html:

<select class="form-control send1" name="menus" onchange="location =   this.options[this.selectedIndex].value;"> 
    <option value="/pf" selected>Preferences</option>
    <option value="/pers">Personal</option>
/select>    
<input type="email" class="form-control" id="newsletter" name="newsletter" placeholder="Enter email" value="">
<input type="text" class="form-control" id="firstname" name="adminfirstname" value="" placeholder="First name">
<button type="submit" class="btn btn-sample btn-md reset send" id="send" name="commit"><b>Save</b></button>

那么,如果他们使用选择下拉菜单导航并填写了输入字段,那么警告怎么会出现呢?同样,如果没有填写输入字段,就不会出现警告?

我试过这样的东西,但我认为如果:input不是class = send1:,它就不会起作用

 $(document).on('change', '.send1', function(){ 
  if($(":input").not('.send1')){
    $(":input").change(function(){
      unsaved = true;
     });
    }
  });

您只需从您的select onchange中删除unsaved = false即可。