Hide 'Submit' button

[Scottster]

I have a datapage that is set to auto-submit if certain conditions are met. If the conditions are not met, though, the page does not auto-submit and it gives an error message. I have all the code working, except I need the 'Submit' button hidden so that the user cannot select it.

[Barbara]

Scott, I believe you have posted your question in a wrong forum, this is Express DB forum but I came across your question related to Caspio Bridge so your question may have left unanswered for a long time. To post questions related to Caspio Bridge go back to the Board index and below the Bridge How-To find the Ask Questions Read Answers.

To answer your question about hiding the submit button, this is doable using Java Script. See the sample code below:

<script>
document.getElementById("Submit").style.display = "none";
</script>

Cheers,

Barbara

[Scottster]

Thanks for the quick reply!

I entered the code, but it did not hide the 'Submit' button:

var cb_statusCheck = '[@field:status]';

if (cb_statusCheck == 'Booked')

{

document.write('

');

document.write('This time slot has already been booked!');

document.write('

');

document.write('Select A Different Time Slot');

}

else

{

setTimeout('document.getElementById("caspioform").submit()',0);

}

I tried entering it directly above "document.write('

');". This code exists in the footer.

[roelmagpoc]

Thanks! It worked on my page!

[MayMusic]

You can also hide the button in the style you are using for the page. Go to setting screen and under Forms/Details >> Buttons switch to Source tab and find .cbSubmitButton and add display:none;

 

Two notes: Create a copy of the current style before changes, hide the button and then use this style for your page AND make sure to enable Advanced Option (CSS Source) so you can get to Source tab.

[Jan]

Also you can use a condition.

For example, you can use the following code to hide the button, if a Virtual field 1 contains any value:

<script>
var check_field = document.getElementById("cbParamVirtual1").value;
if (check_field) { document.getElementById("Submit").style.display = "none"; }
</script>

[ingilizcekursu]

Thanks ! Ä°t worked on my page

[jhanajc]

Could this technique be used to hide the submission form if a virtual field is set?

[jhanajc]

Yes I was able to hide the entire submission form using the same method.

[mark048]

How would I amend the code to do the following on a virtual field radio box, submission page. My virtual field is named Virtual3.

 

If choice 1 is selected, hide submission button. 

If 2 is selected, show submission button. 

If 3 is selected, show submission button. 

If 4 is selected, hide button. 

 

Here is what I have so far...but it's not working

 

<script>
document.getElementById("InsertRecordcbParamVirtual3_0").checked = true;
document.getElementById("InsertRecordcbParamVirtual3_3").checked = true;
{
document.getElementById("Submit").style.display = "none"; 
}
else
{
document.getElementById("Submit").style.display = "visible"; 
}
</script>

 

Thanks!

Mark

[Ba2sai]

On 3/27/2017 at 0:02 AM, Pulford said:

How would I amend the code to do the following on a virtual field radio box, submission page. My virtual field is named Virtual3.

 

If choice 1 is selected, hide submission button. 

If 2 is selected, show submission button. 

If 3 is selected, show submission button. 

If 4 is selected, hide button. 

 

Here is what I have so far...but it's not working

 

<script>
document.getElementById("InsertRecordcbParamVirtual3_0").checked = true;
document.getElementById("InsertRecordcbParamVirtual3_3").checked = true;
{
document.getElementById("Submit").style.display = "none"; 
}
else
{
document.getElementById("Submit").style.display = "visible"; 
}
</script>

 

Thanks!

Mark

See if this helps..

 

<script>
function HideButton(){
if (document.getElementById("cbParamVirtual10").checked)
 {
 document.getElementById("Submit").style.display = 'initial'; 
 }

else if (document.getElementById("cbParamVirtual11").checked)
 {
 document.getElementById("Submit").style.display = 'none'; 
 }

else if (document.getElementById("cbParamVirtual12").checked)
 {
 document.getElementById("Submit").style.display = 'none'; 
 }

else if (document.getElementById("cbParamVirtual13").checked)
 {
 document.getElementById("Submit").style.display = 'initial'; 
 }

else
{
document.getElementById("Submit").style.display = "visible"; 
}

}
document.getElementById('caspioform').onmousemove = HideButton;
</script>

 

** cbParamVirtual10 to cbParamVirtual13 represents the id's of each radio button for Virtual1.  Run inspect to see the exact ID assigned to your radio buttons.

[mark048]

Thank you. I changed the footer code to yours, but it doesn't seem to be working. I changed the cbVirtualParam to cbVirtualParam30, cbVirtualParam31, cbVirtualParam32, cbVirtualParam33. The button doesn't disappear when any of the radio button options are selected. Any ideas? My virtual field is 3. 

 

Thanks again for helping,

Mark

[mark048]

Let me know if anyone else has any ideas?

[MayMusic]

If the virtual is 3 you need to use this code

 

 <script>
function HideButton(){
if (document.getElementById("cbParamVirtual30").checked || document.getElementById("cbParamVirtual33").checked)
 {
 document.getElementById("Submit").style.display = 'initial'; 
 }

else if (document.getElementById("cbParamVirtual31").checked || document.getElementById("cbParamVirtual32").checked)
 {
 document.getElementById("Submit").style.display = 'none'; 
 }

else
{
document.getElementById("Submit").style.display = "visible"; 
}

}
document.getElementById('caspioform').onmousemove = HideButton;
</script> 

 

[mark048]

hmm, for some reason still doesn't work - the button doesn't go away when I click any of the radio fields. Yes - the virtual field is Virtual3 and I put the code in the footer.

 

Thanks,
Mark

[Ba2sai]

Do you have a sample Datapage for this Pulford?

 

[mark048]

I figured out I think the problem is within my WordPress site. For some reason it may be overriding the code and ignoring the button part. 

 

If I go in and try to hide the submit button in the Caspio style, it works in the preview but not once it's deployed in the WordPress site. 

 

I can PM the site if it helps. Or maybe I need to try and fix it in the page ccs somehow. 

[JolliBeng]

Hi,

You can also add the following code to hide the Submit button:

<style>
.cbSubmitButton {
 display: none !important;
}

</style>

 

-JolliBeng

[TellMeWhy]

Just adding this here, as well, in case anyone may find this useful
 

 

[IamNatoyThatLovesYou]

Hello Everyone, just sharing a code that may be useful for this conversation. This hides the submit button when clicked/pressed.
 

<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {

var subbutton= document.querySelector(".cbSubmitButton");
subbutton.unsafe =  function() { subbutton.style.display = "none"; };

 });

</script>