Editing user entered numbers in a webform

[David17]

The table contains a field of type number and it is a text field on a datapage form. We want to be able to flag it if the user enters a negative number or a letter on the form. Is there javascript to do this or any other way to do this?

[Vitalikssssss]

Hi @David17,

You can use the following JavaScript snippet that does not allow input of negative numbers of letters into the field.

Place below code into the Footer of Submission Form Datapage:

<script>

document.addEventListener('DataPageReady', checkNegative);

function checkNegative(){

    let input = document.getElementById('InsertRecordYOUR_FIELD_NAME'); //change this according to the name of your field
    input.type = "number";
    input.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
  }
}

</script>

Make sure that you disable HTML editor prior inserting the code.

Hope this helps.

Regards,

vitalikssssss

 

[CoopperBackpack]

Hello @David17,

The Caspio forms validate the data in a certain way when a user clicks the Submit button. 

 

If the data type of the entered data is incompatible with the data type in the table, the error message appears. 

 

However, you may add custom JavaScript to the Footer section of the Submission Form.

The solution that is already suggested should work. Also you may try this code as well. Replace the YOUR_FIELD_NAME with your local field name.

<script>

document.addEventListener('DataPageReady', checkInput);

function checkInput(){

    let input = document.getElementById('InsertRecordYOUR_FIELD_NAME'); 
    input.min = "0";
    input.type = "number";
    input.setAttribute("oninput", "validity.valid || (value='')");
  
}

</script>

 

Feel free to update this thread if you have further questions. 

[David17]

Thanks for the information. I don't know javascript so i am flying blind. I couldn't quite get it to work. Here's what I did:

I put this code in the footer. I turned off the HTML editor before entering this. The name of the field I am trying to edit is adults.

<script>
document.addEventListener('DataPageReady',checkInput);
function checkInput(){
let input = document.getElementById('InsertRecordadults');
input.min = "0";
input.type = "number";
input.setAttribute("oninput","validity.valid ||value='')");
}
</script>

[CoopperBackpack]

Hello @David17,

Both solutions work on my side on the Submission form.

I can assume that you have another type of the DataPage.

In case you have not a Submission form, but Single Record Update or Details DataPage, then please use  EditRecordField_name instead of the InsertRecordField_name

let input = document.getElementById('EditRecordYOUR_FIELD_NAME'); 

Hope this helps.

[David17]

Hi;

Very strange that mine doesn't work. I didn't create the form but when I edit it the first page it  highlights submission form. Not sure if that indicates it is a submission form or not. But I also tried the alternate code. Should this display an error message on a minus entry? Everything goes fine but it puts the -value into my table. Attached is how I defined the adults field on the form.

[CoopperBackpack]

Hi @David17,

Thank you for the screenshot. It looks like the cause of the issue is related to the element name(the Adults field).

As I see on your screenshot, the exact name of the field is Adults, so the first letter is capitalized.

Please make sure that you added the element name in the code as 'InsertRecordAdults', but not 'InsertRecordadults'.

The exact field name matters. So, it looks like the code does not work, since it does not find the element with the name 'InsertRecordadults'.

Please try this code in the Footer section:

<script>

document.addEventListener('DataPageReady', checkInput);

function checkInput(){

    let input = document.getElementById('InsertRecordAdults'); 
    input.min = "0";
    input.type = "number";
    input.setAttribute("oninput", "validity.valid || (value='')");
  
}

</script>

Or another version:

<script>

document.addEventListener('DataPageReady', checkNegative);

function checkNegative(){

    let input = document.getElementById('InsertRecordAdults'); 
    input.type = "number";
    input.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
  }
}

</script>

 

[David17]

Amazing! It worked! I had no idea it was case sensitive. I see that it works by preventing the entry of a negative number when the form is being filled out. I thought the footer was only activated at submit time. Anyway thank you very much for all your help!

[David17]

On 12/25/2020 at 5:31 AM, Vitalikssssss said:

Hi @David17,

You can use the following JavaScript snippet that does not allow input of negative numbers of letters into the field.

Place below code into the Footer of Submission Form Datapage:

<script>

document.addEventListener('DataPageReady', checkNegative);

function checkNegative(){

    let input = document.getElementById('InsertRecordYOUR_FIELD_NAME'); //change this according to the name of your field
    input.type = "number";
    input.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
  }
}

</script>

Make sure that you disable HTML editor prior inserting the code.

Hope this helps.

Regards,

vitalikssssss

 

 

On 12/25/2020 at 5:31 AM, Vitalikssssss said:

Hi @David17,

You can use the following JavaScript snippet that does not allow input of negative numbers of letters into the field.

Place below code into the Footer of Submission Form Datapage:

<script>

document.addEventListener('DataPageReady', checkNegative);

function checkNegative(){

    let input = document.getElementById('InsertRecordYOUR_FIELD_NAME'); //change this according to the name of your field
    input.type = "number";
    input.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
  }
}

</script>

Make sure that you disable HTML editor prior inserting the code.

Hope this helps.

Regards,

vitalikssssss

 

Now that I have the other code working I would like to try this code on another field. I imagine I would just insert this at the end of the other code and change the field name. How would I call this function to edit a 3rd field too?

Tried to post this to Vitalikssssss but I don't think it worked!

Edited January 2, 2021 by David17

[David17]

One last question: Can you tell me how to call this function, if possible, with another field called Age18to24 to prevent minus numbers being entered?

[CoopperBackpack]

Hi @David17,

I am glad that solution works for you now.

If you need to add this code for several fields, please use this code

<script>

document.addEventListener('DataPageReady', checkInput);

function checkInput(){

    let numberFirst = document.getElementById('InsertRecordField_1_name'); //declare first variable
    let numberSecond = document.getElementById('InsertRecordField_2_name'); //declare second variable

    numberFirst.min = "0";
    numberSecond.min = "0";

    numberFirst.type = "number";
    numberSecond.type = "number";

    numberFirst.setAttribute("oninput", "validity.valid || (value='')");
    numberSecond.setAttribute("oninput", "validity.valid || (value='')");
  
}

</script>

So, we save the input fields to the variables.

And in the code below we add attributes to this variables.