Jump to content
  • 0
DaveC2019

Hide Submit Button if Calculated Field Contains Negative Value

Question

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

Share this post


Link to post
Share on other sites

13 answers to this question

Recommended Posts

  • 0

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>

 

Share this post


Link to post
Share on other sites
  • 0

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!

Share this post


Link to post
Share on other sites
  • 0
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

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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>

Share this post


Link to post
Share on other sites
  • 0
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

Share this post


Link to post
Share on other sites
  • 0

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. 

image.thumb.png.4efd39a0c105c9abf1b09e29f7452d14.png

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

image.png.51671a10c3813de7410746e611b72e49.png

image.png.44b7a7dd9f4a719b7543e4481917391d.png

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

Share this post


Link to post
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...

×
×
  • Create New...