How to disable the enter key on submission form

[MarkMayhrai]

Hello,

I have an auto submit submission form which will add the record based on a calculated field.

However, I must also check weather the record exists to prevent duplicates.

Apparently, even though I have the auto submit java code running on the change of a virtual field, if the user presses enter (even though the submit button is hidden) the form submits.

How to prevent this?

[KlisaN137]

Hi @MarkMayhrai,

In order to prevent submission you may check the following Forum Post:

 

As the autosubmit part, I'm guessing you are using JS from the page:

To prevent submission if there is an error in Form, you may use this code instead:

<script type="text/javascript"> 

document.addEventListener('DataPageReady', function (event) {
           const error = document.querySelector('div[data-cb-name="HeaderErrorMsg"]');
           if(!error){
                if(document.getElementById("caspioform")) {
                document.getElementById("caspioform").style.display = 'none';
                setTimeout('document.forms["caspioform"].submit()',1000); } 
           }    
});

</script>

I'm not sure how are you checking if the entry is a duplicate? What is the indication that some record is duplicate?

[MarkMayhrai]

Here's how the duplication is checked; the Virtual7 field is a calculated field which performs the lookup.

The thing is, if the use presses enter before the lookup has a chance to return a value the entry will submit.

<script>
document.querySelector('input[name="InsertRecordWayBillID"]').addEventListener('change', function (event) {
 
var check = document.querySelector('input[name="InsertRecordWayBillID"]').value;
if (check.length>0){
var MarkUp = document.getElementsByName('cbParamVirtual7')[0].value;
var Msgtocheck = "WayBill already scanned, duplicates not allowed";
if (MarkUp == Msgtocheck) {
 
  event.preventDefault();
        } else   {
              setTimeout('document.forms["caspioform"].submit()',0); 
 } 
}

});
</script>

 

[KlisaN137]

Hi @MarkMayhrai,

 

In order to prevent users from submitting by pressing Enter, you may want to add another EventListener on 'BeforeFormSubmit':

document.addEventListener('BeforeFormSubmit', function(event) {
      event.preventDefault();
});

Actually, by using event.preventDefault() in the fist event listener nothing is achieved, because the 'event' here is not submission, but changing of value in 'WayBillID' field.

The whole code should be then something like this:

<script>

document.querySelector('input[name="InsertRecordWayBillID"]').addEventListener('change', function (event) {
 
   var check = document.querySelector('input[name="InsertRecordWayBillID"]').value;
   if (check.length>0){
   var MarkUp = document.getElementsByName('cbParamVirtual7')[0].value;
   var Msgtocheck = "WayBill already scanned, duplicates not allowed";
       if (MarkUp != Msgtocheck) {
           event.preventDefault();
       } 
   }

});

document.addEventListener('BeforeFormSubmit', function(event) {
   event.preventDefault();
});
</script>

 

[ianGPT]

Hi,

You can try the script below.

1.) Add header & footer field

In the header:
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

In the footer:
 

<script type="text/javascript">

function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}

document.unsafe = stopRKey;

$('body').on('keydown', 'input, select', function(e) {
if (e.which === 13) {
var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
focusable = form.find('input').filter(':visible');
next = focusable.eq(focusable.index(this)+1);
if (next.length) {
next.focus();
}
return false;
}
});
</script>