• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

JQuery更改表单

JavaScript 来源:Niklas Rosencrantz 3次浏览

我正在使用JQuery处理未保存的表单数据中的更改,用户输入页面,编辑数据,尝试离开页面而不保存,并且由于我收到对话框当我更改表格时: enter image description hereJQuery更改表单

上面说:“你想离开这个页面吗?你有没有保存的数据,你想不保存你的更改?

它运作良好,是非常少的代码了很多功能:

<script> 
    $(function() { 
     // Set the unload message whenever any input element get changed. 
     $(':input').on('change', function() { 
      setConfirmUnload(true); 
     }); 

     // Turn off the unload message whenever a form get submitted properly. 
     $('form').on('submit', function() { 
      setConfirmUnload(false); 
     }); 
    }); 

    function setConfirmUnload(on) { 
     var message = "Vill du gå vidare utan att spara eventuella ändringar?"; 
     window.onbeforeunload = (on) ? function() { return message; } : null; 
    } 
</script> 

相比,我使用的是什么,上面看起来像是好多比我当前的Java的结合上下工夫+使用表单数据是否改变了Java和JS一个隐藏的表单变量,然后测试,以使这是根据我的规格警告JS:

enter image description here

以上是应该的样子 喜欢。事情是,我希望用户能够更改表单并将其提交到页面而不会收到警告,并且我还希望从警告中排除搜索框“fastseach”,以便可以排除组件?如何将对话框的显示更改为我自己的?我自己的对话框得出这样的:

// is this necessary? 
    function doAsk(title, msg, action, command, actionNo, commandNo, search) { 
     document.getElementById("fastsearch").value = search; 
     document.actionForm.saveStatus.value = '' 
     var funcYes = 'doYes()'; 
     var funcNo = 'hideDialog()'; 
     if (title == 'Fel') { 
      var s = "<div style=\"position:absolute; z-index:1000001; left:15%; top:75%; font-size: 70% \"><input id=\"dialogaterga\" style=\"font-family:calibri; width:70px; float:right; margin-right:35px;\" type=button onclick=\"javascript:" 
        + funcNo + "\" value=\"Återgå\" /></div>"; 
      showDialog(title, msg + s); 
     } else if (title == 'Varning') { 
       var v = "<div style=\"position:absolute; z-index:1000001; left:15%; top:75%\"><input style=\"font-family:calibri; width:70px\" type=button onclick=\"javascript:" 
         + funcNo 
         + "\" value=\"Nej\" /></div><div style=\"position:absolute; left:70%; top:75%\"><input id=\"dialogwarnyes\" style=\"font-family:calibri; width:70px\" type=button onclick=\"javascript:doSubmit('" 
         + action + "','" + command + "'); \" value=\"Ja\" /></div>"; 
      showDialog(title, msg + v); 
     } else if (title == 'Information') { 
      var i = "<div style=\"position:absolute; z-index:1000001; left:70%; top:75%\"><input type=button class=\"dialogbuttonlink\" id=\"dialogstang\" onclick=\"javascript:hideDialog()\" value=\"St&auml;ng\" /></div>"; 
      showDialog(title, msg + i, true); 
     } else if (title == 'Fel2') { 
      title = 'Fel'; 
      var s2 = "<div style=\"position:absolute; z-index:1000001; left:15%; top:75%; font-size: 70% \"><input id=\"dialogaterga\" style=\"font-family:calibri; width:70px; float:right; margin-right:35px;\" type=button onclick=\"javascript:" 
        + funcNo + "\" value=\"OK\" /></div>"; 
      showDialog(title, msg + s2); 
     } 
     initFocus();  
    } 
function showDialog(title, message, autohide) { 
    //alert("showdialog"); 
    var type = 'prompt'; 
    var dialog; 
    var dialogheader; 
    var dialogclose; 
    var dialogtitle; 
    var dialogcontent; 
    var dialogmask; 
    var link1 
    var link2 

    if (!document.getElementById('dialog')) { 
     dialog = document.createElement('div'); 
     dialog.id = 'dialog'; 
     link2 = document.createElement('a'); 
     link2.id = 'modalFocusLink'; 
     link2.setAttribute('onclick', 'return false'); 
     link2.setAttribute('onblur', 'redirectFocus'); 
     link2.setAttribute('href', '#'); 
     dialog.appendChild(link2); 
     dialogheader = document.createElement('div'); 
     dialogheader.id = 'dialog-header'; 
     dialogtitle = document.createElement('div'); 
     dialogtitle.id = 'dialog-title'; 
     dialogclose = document.createElement('div'); 
     dialogclose.id = 'dialog-close' 
     dialogcontent = document.createElement('div'); 
     dialogcontent.id = 'dialog-content'; 
     dialogmask = document.createElement('div'); 
     dialogmask.id = 'dialog-mask'; 
     document.body.appendChild(dialogmask); 
     document.body.appendChild(dialog); 
     dialog.appendChild(dialogheader); 
     dialogheader.appendChild(dialogtitle); 
     dialogheader.appendChild(dialogclose); 
     dialog.appendChild(dialogcontent); 
     dialogclose.setAttribute('onclick', 'hideDialog()'); 
     dialogclose.onclick = hideDialog; 
     link1 = document.createElement('a'); 
     link1.id = 'modalBlurLink'; 
     link1.setAttribute('onclick', 'return false'); 
     link1.setAttribute('onfocus', 'redirectFocus'); 
     link1.setAttribute('href', '#'); 

     dialog.appendChild(link1); 

    } else { 
     dialog = document.getElementById('dialog'); 
     dialogheader = document.getElementById('dialog-header'); 
     dialogtitle = document.getElementById('dialog-title'); 
     dialogclose = document.getElementById('dialog-close'); 
     dialogcontent = document.getElementById('dialog-content'); 
     dialogmask = document.getElementById('dialog-mask'); 
     dialogmask.style.visibility = "visible"; 
     dialog.style.visibility = "visible"; 
    } 
    dialog.style.opacity = .00; 
    dialog.style.filter = 'alpha(opacity=0)'; 
    dialog.alpha = 0; 
    var width = pageWidth(); 
    var height = pageHeight(); 
    var left = leftPosition(); 
    var top = topPosition(); 
    var dialogwidth = dialog.offsetWidth; 
    var dialogheight = dialog.offsetHeight; 
    var topposition = 33;// top + (height/3) - (dialogheight/2); 
    var leftposition = width - dialogwidth - 30; // left + (width/2) - 
                // (dialogwidth/2); 
    dialog.style.top = topposition + "px"; 
    dialog.style.left = leftposition + "px"; 
    dialogheader.className = type + "header"; 
    dialogtitle.innerHTML = title; 
    dialogcontent.className = type; 
    dialogcontent.innerHTML = message; 
    var content = document.getElementById(WRAPPER); 
    dialogmask.style.height = content.offsetHeight + 'px'; 

    if (title == 'Information') { 
     dialog.alpha = 100; 
     dialog.style.opacity = (1.0); 
     dialog.style.filter = 'alpha(opacity=' + 100 + ')'; 
     dialog.style.visibility = "visible"; 
     dialogmask.style.visibility = "hidden"; 
     var fodi = document.getElementById("dialogstang"); 
     fodi.focus(); 
    } else { 
     if (title == 'Fel') { 
      var fo = document.getElementById("dialogaterga"); 
      fo.focus(); 
     } else if (title == 'Varning') { 
      var vafo = document.getElementById("dialogwarnyes"); 
      vafo.focus(); 
     } 
     dialog.timer = setInterval("fadeDialog(1)", TIMER); 

     if (autohide) { 
      dialogclose.style.visibility = "hidden"; 
      // window.setTimeout("hideDialog()", (autohide * 1000)); 
     } else { 
      dialogclose.style.visibility = "visible"; 
     } 
     if (title == 'invisible') 
      dialog.style.visibility = "hidden"; 
    } 

} 

我想排除可能是因为按“更新”中的“更新”按钮组件不应该激活警告,只留下页。你可以帮我吗?

===========解决方案如下:

没有办法改变浏览远离警告对话框的外观。这是浏览器提供的本地设施。事实上,在Firefox as of version 4你甚至无法通过提供自己的字符串作为返回值自定义消息,而它总是说是这样的:

“这页要求你确认你要离开 – 您输入的数据可能无法保存。“

至于从浏览外卖警告页面上除去各种组件,是不是你已经出现使用,你在你的用户事件禁用onbeforeunload事件扩展技术,简单的事处理程序?例如,当单击更新按钮或搜索按钮时,可以首先确保通过将onbeforeunload事件分配给null或非操作函数来“解除”onbeforeunload事件。顺便说一下,看看你正在做的所有原始DOM构建(所有appendChild()调用和setAttribute()调用等),我建议你看看一些客户端模板框架。 Here’s a decent-looking list of alternatives。谷歌的Angular.js也很酷,虽然不仅仅是一个模板系统本身。


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)