Conditional forms - Disable submit button

Ask the community
,
1

I have a form with a queryParameter (app.softr.com/foo/bar?deviceID=1337) that is a crucial part of my workflow. If there is no parameter, the submit button should be disabled.

I have solved this in simple form with this code snippet:

const deviceID = getParameterByName("deviceID");
const message = "Log service for " + deviceID;
let deviceElement = document.getElementById("deviceID");
let resultPara = document.createElement("p");
if (deviceID !== null) {
    //Append the result to an existing element with the ID "device ID"
    if (deviceElement) {
        resultPara.classList.add("h4");
        resultPara.textContent = message;
        deviceElement.appendChild(resultPara);
    }
} else {
    resultPara.classList.add("h4");
    resultPara.textContent = "This page can not be viewed without scanning QR code on device.";
    deviceElement.appendChild(resultPara);
}
window.addEventListener('load', function() {
    setTimeout(function() {
      const submitButtons = document.querySelectorAll('button[type="submit"]');

      submitButtons.forEach(button => {
        if (!deviceID && button.textContent.trim() === "Register service") {
            button.textContent = "You have to scan a QR code to log a a service";
            button.disabled = true;
        }
      });
    }, 500);
  });
</script>

This does not work (and I have tried many ways to use addEventListener and so on), the button is misbehaving…
So I either need a way to disable the submit button, or a way to use logic to say that the form is only visible if a queryParam is present conditional forms.

Skjermbilde 2024-11-25 kl. 23.03.15
Skjermbilde 2024-11-25 kl. 23.03.151850×1090 195 KB

2

Hi,

When people arrive on the page where the form is, there should always be this url param? Like really always?

If so, I might have an easy solution (code required but simple logic)

3

@matthieu_chateau Yes. The users scan a unique QR-code with the deviceID as a queryParameter. This parameter lets them register/log a service on a specific device.
Logging a service without a device makes no sense.

Coding is no problem…

4

Ok,

So first of all, add a cta block. let’s say its ID is #cta1.
This block will serve to indicate your users they need to scan the QR code if there is no url param or if the value of the url param is empty. Feel free to remove any buttons or to have some if this is better for the UX.

Then add this code in the custom code header:

<style>
#cta1 {
  display: none;
}

</style>

<script>
window.addEventListener('load', function() {
  setTimeout(function() {
    const form1 = document.querySelector('#form1');
    const cta1 = document.querySelector('#cta1');

    function getUrlParameter(name) {
      const urlParams = new URLSearchParams(window.location.search);
      return urlParams.get(name);
    }

    const deviceID = getUrlParameter('deviceID');

    if (!deviceID) {
      form1.style.display = 'none';
      cta1.style.display = 'block';
    }
  }, 500);
});
</script>

Explanation:
#cta1 is always hidden on page load. If there is no deviceID url param (or if the value of deviceID is empty) => #cta1 will show up and #form1 will disappear after half a second.

Results:

ezgif-7-43724901e7

1 Like
5

Wow! That works perfectly :star_struck:

I had to change document.querySelector(‘#form1’) to #form2, but I think that might have something to do with the new formtype?

1 Like
6

The form Id depends on what ID you give it, that’s only this. My form has the id #form1 and I forgot to say that it needs to be adapted.
Anyway, glad it worked!

1 Like