Databases
StackOverflow2013
Postsdbo
POJQuery for changes in a form
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery for changes in a form
    text
    copied!<p>I'm using JQuery to handle changes in unsaved form data, user enters the page, edits the data, tries to leave the page without saving and it sort of works since I'm getting the dialog when I've changed the form: <img src="https://i.stack.imgur.com/zo0k0.png" alt="enter image description here"></p> <p>Above says: "Do you want to leave this page? You have unsaved data, do you want to conitnue without saving your changes?"</p> <p>It works well and is a lot of functionality in very little code:</p> <pre><code>&lt;script&gt; $(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; } &lt;/script&gt; </code></pre> <p>Compared to what I'm using, the above looks like something much better to work on than my current combination of Java + JS that uses a hidden form variables for whether the form data was changed and then tests on both Java and JS to enable the warning which is according to my specification:</p> <p><img src="https://i.stack.imgur.com/g1rFm.png" alt="enter image description here"></p> <p>The above is the way it should look like. Thing is, I want the user to be able to change the form and submit it to the page without getting the warning and I'd also like to exclude the searchbox "fastseach" from the warning so is it possible to exclude components? And how do I change the display of the dialog to my own? My own dialog is drawn like this:</p> <pre><code> // 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 = "&lt;div style=\"position:absolute; z-index:1000001; left:15%; top:75%; font-size: 70% \"&gt;&lt;input id=\"dialogaterga\" style=\"font-family:calibri; width:70px; float:right; margin-right:35px;\" type=button onclick=\"javascript:" + funcNo + "\" value=\"Återgå\" /&gt;&lt;/div&gt;"; showDialog(title, msg + s); } else if (title == 'Varning') { var v = "&lt;div style=\"position:absolute; z-index:1000001; left:15%; top:75%\"&gt;&lt;input style=\"font-family:calibri; width:70px\" type=button onclick=\"javascript:" + funcNo + "\" value=\"Nej\" /&gt;&lt;/div&gt;&lt;div style=\"position:absolute; left:70%; top:75%\"&gt;&lt;input id=\"dialogwarnyes\" style=\"font-family:calibri; width:70px\" type=button onclick=\"javascript:doSubmit('" + action + "','" + command + "'); \" value=\"Ja\" /&gt;&lt;/div&gt;"; showDialog(title, msg + v); } else if (title == 'Information') { var i = "&lt;div style=\"position:absolute; z-index:1000001; left:70%; top:75%\"&gt;&lt;input type=button class=\"dialogbuttonlink\" id=\"dialogstang\" onclick=\"javascript:hideDialog()\" value=\"St&amp;auml;ng\" /&gt;&lt;/div&gt;"; showDialog(title, msg + i, true); } else if (title == 'Fel2') { title = 'Fel'; var s2 = "&lt;div style=\"position:absolute; z-index:1000001; left:15%; top:75%; font-size: 70% \"&gt;&lt;input id=\"dialogaterga\" style=\"font-family:calibri; width:70px; float:right; margin-right:35px;\" type=button onclick=\"javascript:" + funcNo + "\" value=\"OK\" /&gt;&lt;/div&gt;"; 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"; } } </code></pre> <p>The component I'd like to exclude could be the "update" button since pressing "update" should not activate the warning, only leaving the page. Can you help me?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload