Page 1 of 1

Prefill form data only in case of a failure return state

Posted: Sat Feb 08, 2020 2:15 pm
by martin.mattel
This description may help to prefill form data with previous entered values in case a submit fails.
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)
Please also see https://www.wysiwygwebbuilder.com/forum ... 26&t=87685 for handling checkmark and submit buttons

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);
    }
}
contact.php
Add the following scripts between the head /head tags.

Load script

Code: Select all

<script src="./scripts/check_storageAvailable.js">
</script>
Write the form data to session storage when pressing the submit button

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>
Check success state based on from which page originated (error, success) and handle data, triggered when returning to this page

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>
success.php
Add the following scripts between the head /head tags.

Load script

Code: Select all

<script src="./scripts/check_storageAvailable.js">
</script>
Write the success to sessionStorage

Code: Select all

<script>
  document.addEventListener('DOMContentLoaded', function () {
    if (storageAvailable('sessionStorage')) {
      sessionStorage.setItem("contactSent", "1");
    }
  }, false);
</script>
error.php
Add the following scripts between the head /head tags.

Load script

Code: Select all

<script src="./scripts/check_storageAvailable.js">
</script>
Write the error to sessionStorage

Code: Select all

<script>
  document.addEventListener('DOMContentLoaded', function () {
    if (storageAvailable('sessionStorage')) {
      sessionStorage.setItem("contactError", "1");
    }
  }, false);
</script>
Optional create a Back button and link this button with Javascript to this function
Simulate pressing browser back

Code: Select all

<script>
  function goBack(){
    window.history.back();
  }
</script>
Note
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.