Jump to content
  • 0

how to set default value and min/max value for a textfield


aaronfreed
 Share

Question

i have a table with an integer field  called 'quantity'. 

in the form submission datapage for that table, i have a 'text field' form element to allow the user to specify the quantity. i need to do three things:

1. set a default of 1

2. set a minimum value of 1

3. set a maximum value. the maximum value may be fixed (e.g. '5') or it may have to be a calculated value (e.g. SELECT SUM(someField) FROM tbl.some_other_table WHERE....)

can you help? gracias!

 

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0
9 hours ago, aaronfreed said:

i have a table with an integer field  called 'quantity'. 

in the form submission datapage for that table, i have a 'text field' form element to allow the user to specify the quantity. i need to do three things:

1. set a default of 1

2. set a minimum value of 1

3. set a maximum value. the maximum value may be fixed (e.g. '5') or it may have to be a calculated value (e.g. SELECT SUM(someField) FROM tbl.some_other_table WHERE....)

can you help? gracias!

 

It needs JavaScript to force users to not be able to submit if it doesn't meet the criteria.

You can use Virtual Field > Calculated Value to check if those criteria are met.

Use the method here:

 

Link to comment
Share on other sites

  • 0

thanks, @TellMeWhy. i'll give it a shot. regrettably, i failed to mention that i need this to work for inline adds and inline edits in a tabular report, which complicates matters. do you or anyone else have thoughts only validating inputs on what would be multiple fields of the same class in different rows of the table? it's particularly a challenge since other fields in each row share the same class.

Link to comment
Share on other sites

  • 0
20 hours ago, aaronfreed said:

thanks, @TellMeWhy. i'll give it a shot. regrettably, i failed to mention that i need this to work for inline adds and inline edits in a tabular report, which complicates matters. do you or anyone else have thoughts only validating inputs on what would be multiple fields of the same class in different rows of the table? it's particularly a challenge since other fields in each row share the same class.

Ah, Inline, I don't really like going there, but, I guess this is pretty simple. 

Here's the Inline Insert Example

 for ALERT and then change the value to 1

<script>

document.addEventListener("DataPageReady", function fx(){ // Upon Load set value of FIELDNAME to 1


document.getElementById('InlineAddFIELDNAME').value ='1'; //change FIELDNAME to actual Field Name

document.addEventListener("input", function tx(){//check of any inputs being done
  
var field1=document.getElementById('InlineAddFIELDNAME'); //change FIELDNAME to actual Field Name

if(field1.value < 1 || field1.value > 5){

alert("Field cannot be less than 1 or greater than 5");

field1.value ='1';

}

if(isNaN(field1.value)== true){ //checks if the value is not a number
alert("Field should be a number");

field1.value ='1';
}

});



});
  
</script>

 


Here's the Inline Edit version

<script type="text/javascript">

document.addEventListener("click", function(event){
if(event.srcElement.getAttribute("data-cb-name") == 'InlineEdit'){ //checks if the clicked element is the Inline Edit Button

document.addEventListener('input', function(e){


var field1 = document.querySelector('input[name="InlineEditFIELDNAME"]');


if(field1.value < 1 || field1.value > 5){

alert("Field cannot be less than 1 or greater than 5");

field1.value ='1';

}
  
if(isNaN(field1.value)== true){ //checks if the value is not a number
alert("Field should be a number");

field1.value ='1';
}


});

}
});

</script> 

 

Link to comment
Share on other sites

  • 0

whelp @TellMeWhy,  i'm stumped.

first, what works:

<script>
document.addEventListener("DataPageReady", function fx(){ // Upon Load set value of FIELDNAME to 1
document.getElementById('InlineAddFIELDNAME').value ='1';
</script>

since caspio only gives us a text field to input numbers, i used the same method to change the input type:

<script>
  document.addEventListener("DataPageReady", function fx(){ // Upon Load set value of FIELDNAME to 1
  var el = document.getElementById('InlineAddFIELDNAME');
  el.setAttribute("type","number");
  el.value = 1;
</script>

and that works like a champ.

before trying your eventListener approach to validating the input, i tried setting "min" and "max" attributes using the metheod above, but that didn't work; i didn't get any HTML5 messages saying the input was out of limits.  and i couldn't get it to work either (i opted for the 'alert' version):

<script>
  document.addEventListener("input", function tx(){
  var field1=Number(document.getElementById('InlineAddFIELDDNAME').value);
  if(field1 < 1 || field1 > 5){
	alert("Field cannot be less than 1 or greater than 5");
    field1.value = '1';
</script>

acknowledging that the code changes slightly if i've redefined the input type as a number, i still couldn't get this to work. the 'input' event doesn't let me change anything; i am simply stuck with the default '1' and any attempt to change it results in an alert and reset to '1'.

so, my question now is: what other events might i use (and might you direct me to a resource showing me the types of events available on a caspio form, inline or otherwise)? or maybe this is a validation that can only occur upon clicking the 'add' button?

Link to comment
Share on other sites

  • 0

@aaronfreed You're missing closing parentheses and brackets. Can you try the code again? Instead of converting the field to a Number, we'll just check if it's NaN (not a Number) then, it alerts and sets the value to 1. Note that the DEFAULTING to 1 is OUTSIDE the input event listener, what's inside are just the conditions for validation

Link to comment
Share on other sites

  • 0

hi @TellMeWhy. no joy. using a direct paste of your code (having duly replaced FIELDNAME), the validation doesn't work; every time i try to input something, i get the alert message. it is as if the 'input' event is a little trigger happy and doesn't give me the chance to input anything. i have confirmed that there are no uncaught javascript errors on the page using the console, so at least we know the code is syntactically good. and ideas?

here is the code again:

<script>
//set input default to one
document.addEventListener("DataPageReady", function fx(){
var el = document.getElementById('InlineAddquantity');
el.setAttribute("type","number");
el.value = '1';
//el.setAttribute("min","1");
//el.setAttribute("max","5");

//check for value in range...alert and reset if not
document.addEventListener("input", function tx(){
var field1=document.getElementById('InlineAddquantity');
if(field1.value < 1 || field1.value > 5){
  alert("Field cannot be less than 1 or greater than 5");
  field1.value = '1';
  };
if(isNaN(field1.value)== true){
  alert("Field should be a number");
  field1.value ='1';
}
});
})
</script>

 

Link to comment
Share on other sites

  • 0
12 minutes ago, aaronfreed said:

hi @TellMeWhy. no joy. using a direct paste of your code (having duly replaced FIELDNAME), the validation doesn't work; every time i try to input something, i get the alert message. it is as if the 'input' event is a little trigger happy and doesn't give me the chance to input anything. i have confirmed that there are no uncaught javascript errors on the page using the console, so at least we know the code is syntactically good. and ideas?

here is the code again:

<script>
//set input default to one
document.addEventListener("DataPageReady", function fx(){
var el = document.getElementById('InlineAddquantity');
el.setAttribute("type","number");
el.value = '1';
//el.setAttribute("min","1");
//el.setAttribute("max","5");

//check for value in range...alert and reset if not
document.addEventListener("input", function tx(){
var field1=document.getElementById('InlineAddquantity');
if(field1.value < 1 || field1.value > 5){
  alert("Field cannot be less than 1 or greater than 5");
  field1.value = '1';
  };
if(isNaN(field1.value)== true){
  alert("Field should be a number");
  field1.value ='1';
}
});
})
</script>

 

Your code  works as expected on mine, what are you trying to input? you said mininum of 1, and max of 5, you can only input 1,2,3,4,5 there nothing else. Is the min and maximum length instead of value?Other Media

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...