Helpful in case you press the back button via the browser from the error page to correct the failing data.
Compared to the onBoard save to session in Forms which always brings back the data, this way only shows the data in case of failures.
This procedure is necessary, because there is more or less no way to identify the return state of a form submit when the submit procedure runs with php.
NOTE
This works with all browsers.
There is one exception condition.
Apple with IOS, only when browsing in private mode, even having this feature, does not provide any memory to write to.
You won't get an error by using this scripts, but you also won't get the functionality until Apple fixes this issue.
Tested up to IOS 13.3.1
Prerequisites
- A page (eg: contact.php) containing a form (eg: named contactLayoutGrid3) with elements like Name, eMail, a textArea and a submit button
- A error- and success page (eg: error.php, success.php)
Note
For page names and scripts / settings shown, adopt them according your needs
General script
Create a script in your preferred script location to include it into your pages (contact.php, error.php, success.php)
In this example it is named: scripts/check_storageAvailable.js
Code: Select all
function storageAvailable(type) {
// type: 'localStorage' or 'sessionStorage'
// returns true if supported by the browser
// see: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
var storage;
try {
storage = window[type];
var x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return e instanceof DOMException && (
// everything except Firefox
e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === 'QuotaExceededError' ||
// Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
(storage && storage.length !== 0);
}
}
Add the following scripts between the head /head tags.
Load script
Code: Select all
<script src="./scripts/check_storageAvailable.js">
</script>
Code: Select all
<script>
document.getElementById('contactLayoutGrid3').addEventListener('submit', function(){
if (storageAvailable('sessionStorage')) {
var na = document.getElementById("contactEditbox1").value;
var em = document.getElementById("contactEditbox2").value;
var ta = document.getElementById("contactTextArea1").value;
sessionStorage.setItem("Name", na);
sessionStorage.setItem("eMail", em);
sessionStorage.setItem("textArea", ta);
}
}, false);
</script>
Code: Select all
<script>
document.addEventListener('DOMContentLoaded', function () {
if (storageAvailable('sessionStorage')) {
var s = sessionStorage.getItem("contactSent");
var e = sessionStorage.getItem("contactError");
if (s !== null) {
sessionStorage.removeItem("Name")
sessionStorage.removeItem("eMail")
sessionStorage.removeItem("textArea")
sessionStorage.removeItem("contactSent");
}
if (e !== null) {
var na = sessionStorage.getItem("Name")
var em = sessionStorage.getItem("eMail")
var ta = sessionStorage.getItem("textArea")
document.getElementById("contactEditbox1").value = na;
document.getElementById("contactEditbox2").value = em;
document.getElementById("contactTextArea1").value = ta;
sessionStorage.removeItem("contactError");
}
}
}, false);
</script>
Add the following scripts between the head /head tags.
Load script
Code: Select all
<script src="./scripts/check_storageAvailable.js">
</script>
Code: Select all
<script>
document.addEventListener('DOMContentLoaded', function () {
if (storageAvailable('sessionStorage')) {
sessionStorage.setItem("contactSent", "1");
}
}, false);
</script>
Add the following scripts between the head /head tags.
Load script
Code: Select all
<script src="./scripts/check_storageAvailable.js">
</script>
Code: Select all
<script>
document.addEventListener('DOMContentLoaded', function () {
if (storageAvailable('sessionStorage')) {
sessionStorage.setItem("contactError", "1");
}
}, false);
</script>
Simulate pressing browser back
Code: Select all
<script>
function goBack(){
window.history.back();
}
</script>
Based on different browser behavior, adding the attribute autocomplete = "off" to a object in a form like the textArea object, may not do what you might expect. The attribute has to be added to the form definition to be active.
At the time of writing (WWB 15.2.3), a form object does not have a easy clickable element for the attribute autocomplete = "off" - this may change in a future release. Until then, follow the procedure described. Add the attribute it to the form with: right-click on the form -> "Object HTML" -> "Inside Tag" and add autocomplete = "off". Doing so, will not prefill the textArea by browsers when pressing page back and the browser does not overrule the script. This procedure is tested and works quite well.