Jump to content
  • 0

Editing user entered numbers in a webform


David17
 Share

Question

10 answers to this question

Recommended Posts

  • 0

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

 

Link to comment
Share on other sites

  • 0

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. 

 

AU1DRZT.png

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. 

Link to comment
Share on other sites

  • 0

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>

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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.

minus values2.png

Link to comment
Share on other sites

  • 0

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>

 

Link to comment
Share on other sites

  • 0

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!

Link to comment
Share on other sites

  • 0
Posted (edited)
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 by David17
Link to comment
Share on other sites

  • 0

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. 

Link to comment
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...
 Share

×
×
  • Create New...