Hide Submit Button if Calculated Field Contains Negative Value

[DaveC2019]

I have a datapage that is a submission form. There is a calculated field called "balance". I am trying to come up with a solution that will hide the "submit" button when the value in the "balance" field is a negative number.  My goal is to keep a user from submitting the form if the balance is below zero.  Any help would be greatly appreciated. Thanks

[MayMusic]

Let's say you have a field to enter a value on your form which is called Number1 and Number2 is the calculated value which does the calculation. In the footer you can have:

 

<script>
document.addEventListener('DataPageReady', function (event){


document.getElementById('InsertRecordNumber1').onchange = function (){
if (document.getElementsByName('InsertRecordNumber2')[0].value < 0) {
document.getElementsByName('Submit')[0].style.display = 'none';
} else {
document.getElementsByName('Submit')[0].style.display ='inline';
}
};



});
</script>

 

[DaveC2019]

MayMusic. I tried the solution you provided and it did not work. But I think that if I provide you with additional information it might make a difference. After reviewing what you sent as a solution I am curious as to why the script does not focus on the field "balance" which is a calculated field. If the number in this field is less than zero then the button should be disabled. Your solution referenced a field where the value is entered and I'm not sure why, but you are more familiar with Caspio than I. Anyway I did enter the field where the value is entered. This field is named "amount_given".  What did I do wrong or what am I missing? This is how the script looked when I replaced the values per your instructions:

<script>
document.addEventListener('DataPageReady', function (event){


document.getElementById('InsertRecordamount_given').onchange = function (){
if (document.getElementsByName('InsertRecordbalance')[0].value < 0) {
document.getElementsByName('Submit')[0].style.display = 'none';
} else {
document.getElementsByName('Submit')[0].style.display ='inline';
}
};



});
</script>

I did not receive an error message and the button did not disappear when the balance field was negative. I placed the script in the footer. I really appreciate your help. Thank you!

[DaveC2019]

Here is a link to the datapage: https://c6fot106.caspio.com/dp/acef60003eb60d3f84474c488495

[TsiBiRu]

15 hours ago, DaveC2019 said:

Here is a link to the datapage: https://c6fot106.caspio.com/dp/acef6000848fd64207f94f3a9c65

Hi @DaveC2019,

I've tried accessing your DataPage using the deployed URL that you have provided, and it is asking for some login credentials. Is it possible to create test credentials that we can use to help you sort this out?   You can just remove this afterward.  

Regards,

TsiBiRu

[DaveC2019]

Sorry. The user ID is "johndoe" and the password is "qwe123qwe".  The receivers username is "clarkkent@tippytv". Thanks for looking into this for me.

[TsiBiRu]

Hi @DaveC2019,

It seems like I can no longer access the DataPage using the link that you have provided above, but I was able to create a validation that will  prevent the user in submitting /completing the transaction if there balance is not enough. Kindly try to use the code below

<script>
document.querySelector('#caspioform').onsubmit = function(e) {
    e.preventDefault();

var balance= document.getElementsByName('InsertRecordbalance')[0].value;


if(balance<0) 
 {
 alert('Not enough Balance!');
 }
else
{
 this.submit();
}

}
</script>

If the name of your calculated field is different, just update the  'InsertRecordbalance' in my code above with the name of your calculated field. I've tested this solution on my end, and I can confirm that it is working.

I hope this helps.

Regards,

TsiBiRu

[DaveC2019]

Thank you. This worked for me. Greatly appreciated!

[bbeshlian]

Hi TsiBiRu

I came your script to hide the Submit button. I modified it (see below) to hide the Submit button if Invalid is returned. The Submit button is still showing what could I have missed?

Thanks,

Bill

<script>
document.querySelector('#caspioform').onsubmit = function(e) {
    e.preventDefault();

var amount = document.getElementsByName('Virtual2')[Invalid].value;

if(amount == 'Invalid') 
 {
 alert('Total Installment Payments Does Not Equal Bonus Amount');
 }
else
{
 this.submit();
}

}
</script>

[kpcollier]

@bbeshlian Try changing "Virtual2" to "cbParamVirtual2".

[bbeshlian]

@kpcollier

I changed Virtual2 to cbParamVirtual2 and the "Submit" button is still present...

[TsiBiRu]

On 4/1/2019 at 1:56 PM, bbeshlian said:

Hi TsiBiRu

I came your script to hide the Submit button. I modified it (see below) to hide the Submit button if Invalid is returned. The Submit button is still showing what could I have missed?

Thanks,

Bill

<script>
document.querySelector('#caspioform').onsubmit = function(e) {
    e.preventDefault();

var amount = document.getElementsByName('Virtual2')[Invalid].value;

if(amount == 'Invalid') 
 {
 alert('Total Installment Payments Does Not Equal Bonus Amount');
 }
else
{
 this.submit();
}

}
</script>

1

Hi @bbeshlian,

Can you point me to the forum post where I've provided this code, please?
And you can also provide us the direct URL of the DataPage that you are currently working so that we can make the necessary adjustment to make the code work.

I'm guessing that we just need to update the this line 'var amount = document.getElementsByName('Virtual2')[Invalid].value;'

Regards,

TsiBiRu

[bbeshlian]

TsiBiRu,

The original post title is, Hide Submit Button If Calculated Field Contains A Negative Value. The URL is, https://forums.caspio.com/topic/8308-hide-submit-button-if-calculated-field-contains-negative-value/#comment-26250 

 

[TsiBiRu]

Hi @bbeshlian,

The code below does not hide the submit button, but it will prevent the user from submitting the form until the entered value is valid. 

For this solution to work, the value of the Virtual 2 (Which is a calculated field ) should be positive

So basically, the code below will get the value of  'Virtual2' field and if the value is negative it will prevent the form from being submitted until the value of this field is a positive number.

<script>
document.querySelector('#caspioform').onsubmit = function(e) {
    e.preventDefault();

var balance= document.getElementsByName('cbParamVirtual2')[0].value;


if(balance<0) 
 {
 alert('Not enough Balance!');
 }
else
{
 this.submit();
}

}
</script>

I think you can use the code as it is, you will just need to update the name of the field that we are basing or validation (This line ' var balance= document.getElementsByName('NameOfyourField')[0] .value ; ' )

To get the name of your field, you can follow the steps that I've provided here, but instead of getting the ID, you will be getting the name of the field on Step 3

I've attached the exported copy of the Datapage that I've worked with so that you can import it to your account and see how it works (Kindly see the attached file).

If you are still having an issue in making this work, kindly provide us the deployed URL of your Datapage and we will make the necessary adjustment to make this solution work.

Kind regards,

TsiBiRu

CaspioData_2019-Apr-03_1826.zip