Jump to content
  • 0

Prevent form submission


Question

4 answers to this question

Recommended Posts

  • 0

Hi @vinebath,

You need additional JavaScipt code to hide the button when none of the checkboxes are checked.

On the "Web Form Wizard - Configure Fields"  screen of the Submission form create a Footer element. Uncheck "Enable HTML editor" on the Advanced tab of the Footer,  switch to the Standard tab and put the following  code there:
 

<script>
document.addEventListener("DataPageReady", function() {
    let btnSubmitContainer = document.getElementsByClassName("cbSubmitButtonContainer")[0];
    btnSubmitContainer.classList.add("is-disabled");

    let ErrMes = document.getElementById("ErrorMessage");
    ErrMes.classList.remove("is-disabled");

    let chboxArr = [
        document.getElementById('cbParamVirtual1'),
        document.getElementById('cbParamVirtual2'),
        document.getElementById('cbParamVirtual3'),
        document.getElementById('cbParamVirtual4')
    ];


    for (let el of chboxArr) el.onchange = changeEventHandler;

    function changeEventHandler(event) {
        if (chboxArr[0].checked || chboxArr[1].checked || chboxArr[2].checked || chboxArr[3].checked) {
            btnSubmitContainer.classList.remove("is-disabled");
            ErrMes.classList.add("is-disabled");
        } else {
            btnSubmitContainer.classList.add("is-disabled");
            ErrMes.classList.remove("is-disabled");
        }
    }
});
</script>

<style> 
   .is-disabled{
      display:none !important;
}
</style>


The  "cbParamVirtual1" is the id of the checkbox element. It should be replaced with the id of the element on your datapage.

Also, you need to create an HTML block, click on the Source button and put the following code there:  

<div id="ErrorMessage"><span style="color:#FF0000;">Error. At least one checkbox needs to be checked.</span></div> 

 This is a code for the error message and its container. The error message and its styling can be changed.

 

Link to post
Share on other sites
  • 0

Hello,

 

While Alison's answer will hide the submit button when none of the checkboxes are checked, I believe the form can still be submitted if the user presses "Enter" on clicks "Submit" on their virtual keyboard (e.g. mobile).

 

If you want to refer to all checkboxes, paste this code snippet in your Footer (Disable HTML Editor from the advanced tab).

<script>

document.addEventListener('BeforeFormSubmit', function() {

  var allowSubmit = 0

  var fields = document.querySelectorAll(`[action*="[@cbAppkey]"] input[type=checkbox]`);

  for(var idx in fields) {
    if (fields[idx].checked == true) {
      allowSubmit = 1;
      break;
    }
  }

  if (!allowSubmit) {
    event.preventDefault();
    alert("Check at least one checkbox!");
  }

})


</script>

 

 

Else, if you want to define which checkboxes needed to be checked, use this one. 

<script>

document.addEventListener('BeforeFormSubmit', function() {

  var allowSubmit = 0

  var fields = ["InsertRecordField1", "cbParamVirtual1", "cbParamVirtual2"];

  fields = fields.map( function(elem) {
    return document.querySelector(`[action*="[@cbAppkey]"] [id*=${elem}]`);
  })

  for(var field of fields) {
    if (field.checked == true) {
      allowSubmit = 1;
      break;
    }
  }

  if (!allowSubmit) {
    event.preventDefault();
    alert("Check at least one checkbox!");
  }

})


</script>

 

Hope this helps.

 

-DN31337

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...