Conditional Styling to hide Submit Button

[Scott17]

Hello,

 

I am trying to hide a submit button on some data pages if the user signed in has a specific role.  I have entered the below code into the header of the data page but it is not working.  Does anyone know how I can accomplish this?

<script>
if ("[@authfield:Users_tbl_Role]" == "Broker"){
<style>
input[value="Edit CRE Details"] {
display: none !important;
}

</style>;
}


</script>

 

Thank you!

[IamGroot]

Hi @Scott17,

You can try and use this code instead:

Quote

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
if ("[@authfield:Users_tbl_Role]" == "Broker") {
document.getElementById("SubmitButtonId").style.display = 'none';
 }
});
</script>

Just change the "SubmitButtonId" to the ID of your Submit button.

 

I hope this helps you  

[Scott17]

Hi @IamGroot

 

Thank you for the response!  How do I find the ID of my submit button?  I tried just the name that I made for the button by that didn't work.

 

Thank you!

[IamGroot]

Hello @Scott17,

This is my method on getting the ID of the fields or in your case the button. Just follow these steps: 

For your case, click the button to get the ID. And after that insert the ID to the code.

 

Try and test it and that should be fine

[Scott17]

Hi @IamGroot

 

I followed those steps and the code seems to not be affecting the update button still.  It is always showing up even when the logged in user is "broker" which the code should be preventing.  I reran the preview multiple times and reviewed the embedded version multiple times and it seems the id changes every time the page is loaded.

 

Thanks!

Scott

[IamGroot]

5 minutes ago, Scott17 said:

Hi @IamGroot

 

I followed those steps and the code seems to not be affecting the update button still.  It is always showing up even when the logged in user is "broker" which the code should be preventing.  I reran the preview multiple times and reviewed the embedded version multiple times and it seems the id changes every time the page is loaded.

 

Thanks!

Scott

Hi @Scott17,

Are you sure? cause it was working in my end. Did you put the code in the Footer? And make sue that the "Enable HTML Editor" is unchecked in advance option.

[Scott17]

Hi @IamGroot

I had it in the header.  Just switched it over to the footer and unchecked the "Enable HTML Editor".  It isn't working still.  I don't think i'm doing the ID correctly because the ID changes every time I rerun the preview or refresh the page.  I followed the steps you outlined above to get the ID and it looks the same as your screenshots while i'm doing it.

 

Thanks,

Scott

[Aether]

This is what I needed, it helps alot ! Thank you @IamGroot, and it's was also  working in my end ! 

[DefinitelyNot31337]

Hi

 

While @IamGroot's solution will work on AJAX Disabled only - Submission Form DPs, this might not work on other DataPages especially with AJAX Loading Enabled. 

=

@Scott17, given that you have a Submission Form DataPage, try putting the code below in your footer. Also, make sure that HTML Editor is disabled from the Advanced tab.

<script>
if ("[@authfield:Users_tbl_Role]" == "Broker"){
	document.querySelector('[id*=Submit]').style.display = 'none';
}
</script>

 

If this doesn't work, you might want to review the name of your authfield (Users_tbl_Role) and/or its value for the logged-on user.

 

I hope this helps.

Regards,

DN31337

 

[Scott17]

6 hours ago, DefinitelyNot31337 said:

Hi

 

While @IamGroot's solution will work on AJAX Disabled only - Submission Form DPs, this might not work on other DataPages especially with AJAX Loading Enabled. 

=

@Scott17, given that you have a Submission Form DataPage, try putting the code below in your footer. Also, make sure that HTML Editor is disabled from the Advanced tab.

<script>
if ("[@authfield:Users_tbl_Role]" == "Broker"){
	document.querySelector('[id*=Submit]').style.display = 'none';
}
</script>

 

If this doesn't work, you might want to review the name of your authfield (Users_tbl_Role) and/or its value for the logged-on user.

 

I hope this helps.

Regards,

DN31337

 

1

Hi @DefinitelyNot31337

Thank you for the suggestion!  I tried that code and it didn't work.  AJAX is enabled on the data page but it is actually a Details Report data page rather than a Submission data page.  It is also an "Update" button rather than "Submit" button.  I am sure the authfield and role are correct when I'm testing it out as well.  I also changed the id from Submit to Update in the code in case that made a difference but was not able to get it to work either.  Do you have any other ideas why it's still not working for me?

 

Thank you!

[IMDora]

Hi @Scott17,

You can try the code below, make sure that AJAX is disabled.

<script>
document.addEventListener('DataPageReady', function (event) {
if ("[@authfield:Users_tbl_Role]" == "Broker") {
document.getElementsByName("Mod0EditRecord")[0].style.display = 'none';
}
});
</script>

I hope this helps.

Regards,

IMDOra
 

 

[Scott17]

Hi @IMDora

 

Thank you for that!  That code works for me when I preview the app but when I actually deploy the app on my website it doesn't work.  I appreciate the effort of everyone in this forum.  It seems I need to take a different approach.

 

Thank you!

[DefinitelyNot31337]

Hi @Scott17,

 

I almost forgot: If you have multiple DataPages deployed on your web page, the solutions provided above will only hide the first Update button. To hide all the Update buttons at once, you may use the code below. Also, this solution will work even if you only have one DataPage deployed.

<script>
document.addEventListener('DataPageReady', function (event) {
  if ("[@authfield:Users_tbl_Role]" == "Broker") {
    document.getElementsByName("Mod0EditRecord").forEach(function(elem) {
      elem.style.display= 'none';
    });
  }
});
</script>

 

Hope this ultimately helps you with what you're trying to achieve.

 

Cheers,

DN31337

[Scott17]

Hi @DefinitelyNot31337

That seems to be working for me now.  Thank you so much for the help!

[jnordstrand]

Is there a way to Turn off Button in Styles?  I accidently modified one of my styles and now my buttons showed back up.

[KG360]

On 9/27/2018 at 10:28 AM, DefinitelyNot31337 said:

Hi

 

While @IamGroot's solution will work on AJAX Disabled only - Submission Form DPs, this might not work on other DataPages especially with AJAX Loading Enabled. 

=

@Scott17, given that you have a Submission Form DataPage, try putting the code below in your footer. Also, make sure that HTML Editor is disabled from the Advanced tab.

<script>
if ("[@authfield:Users_tbl_Role]" == "Broker"){
	document.querySelector('[id*=Submit]').style.display = 'none';
}
</script>

 

If this doesn't work, you might want to review the name of your authfield (Users_tbl_Role) and/or its value for the logged-on user.

 

I hope this helps.

Regards,

DN31337

 

Thanks for these posts. I have tried the modified script below without success. When [@field:FormStatus] IS NULL the submit button is hidden all right, but when I select 'Yes' the button does not show up. I want the users not to prematurely submit the form just to get several erroneous fields alerts, and instead have then to check when all is done, then be able to submit, as forms often are made.

Any advice appreciated!! 

/G

<script>
if ("[@field:FormStatus]" !== "Yes") {
    document.querySelector('[id*=Submit]').style.display = 'none';
}
</script>

[kpcollier]

@Gunnar360c There is probably a better way, and my script might be a little overboard for this. But, I believe it is working.

Is FormStatus a dropdown text field?

 

document.addEventListener('DataPageReady', function (event) {
  document.querySelector('[id*=Submit]').style.display = 'none';
  document.querySelector('[name="InsertRecordFormStatus"]').addEventListener("change", myFunction);
  
    function myFunction(event) {
      let passField = event.target.value;
      if (passField !== "Yes") {
        document.querySelector('[id*=Submit]').style.display = 'none';
       } else {
        document.querySelector('[id*=Submit]').style.display = 'inline';
       }
     }
});

 

I think your issue is that the script was only running once, when the page first loaded up. If I'm right, there's nothing telling the script to keep running after the first time. 

The first event listener is to initially hide the submit button. Since it is a form and not an update, I figure the submit button shouldn't be available as soon as you open the form.

Next, putting a 'change' event listener on the Form Status field. Again, not sure if it's just a normal dropdown. But this will look for a change in value to that field and should run the script accordingly.

Let me know if you are having any problems with it. Or, maybe someone more fluent in JS can improve it.

[GoodBoy]

Hello! Just sharing this solution as well. This is also applicable to text field or dropdown form element.  

<script type="text/javascript">

document.querySelector('[id*=Submit]').style.display = 'none';

document.addEventListener('DataPageReady', function (event) {
document.getElementById("InsertRecordFieldName").addEventListener('change', function() {

if (document.getElementById("InsertRecordFieldName").value !== 'Yes')
{
 document.querySelector('[id*=Submit]').style.display = 'none';
}
else {
 document.querySelector('[id*=Submit]').style.display = 'inline';
}
});
});
</script>

 

[KG360]

Both solutions work as intended - many tanks, @kpcollier and @GoodBoy   !!!

The 'FormStatus' is a field with the sole purpose of telling the form to show the submit button. With complex form that gradually display more and sections as the user fills the form, it is good to hide the submit button until the form looks ok to submit, and then ask the user a few questions resulting in a value that this script picks up! In my test, the 'FormStatus' field is a checkbox. It was first a virtual field but when nothing worked, I inserted a new field in the table, but now that I know the script works, I will test again with a virtual field. I might make it a calculated value, based on a few questions by which the user confirms their understanding of what they submit.

Thanks for these invaluable comments!

G

[thomaswillamas]

Is there a way to Turn off Button in Styles?  I accidently modified one of my styles and now my buttons showed back up.

 

[KG360]

On 5/18/2022 at 10:39 AM, thomaswillamas said:

Is there a way to Turn off Button in Styles?  I accidently modified one of my styles and now my buttons showed back up.

 

Hi @thomaswillamas! Not sure what you mean. Are you trying to hide the submit button or display it? The solution described above uses a script placed in the form. It sounds like you inadvertently removed code from the Style so that the Submit Button now shows. What was the code you entered into the Style, and what happens if you put it back?

[IamNatoyThatLovesYou]

  Hello Everyone, you can also check this forum post that hides the submit button once it has been clicked/pressed.

[Alison]

You may use the following script in the Footer to hide the button with its container when one of the Virtual fields shows the value "Not correct" 
 

<script>
document.addEventListener("DataPageReady", function() {
    let Virt1 = document.querySelector("input[id^=cbParamVirtual1]");
    let Virt2 = document.querySelector("input[id^=cbParamVirtual2]");
    let btnSubmitContainer = document.querySelector(".cbSubmitButtonContainer");
    
  btnSubmitContainer.style.display = 'none';

    function checkValidity() {
        if (Virt1.value == 'Not correct' || Virt2.value == 'Not correct') {
            btnSubmitContainer.style.display = 'none';
        } else {
            btnSubmitContainer.style.display = 'inline';
        }
    }

    Virt1.onchange = checkValidity;
    Virt2.onchange = checkValidity;

    // Initial check
    checkValidity();
});
</script>

 

[KG360]

On 2/20/2024 at 12:00 PM, Alison said:

You may use the following script in the Footer to hide the button with its container when one of the Virtual fields shows the value "Not correct" 
 

<script>
document.addEventListener("DataPageReady", function() {
    let Virt1 = document.querySelector("input[id^=cbParamVirtual1]");
    let Virt2 = document.querySelector("input[id^=cbParamVirtual2]");
    let btnSubmitContainer = document.querySelector(".cbSubmitButtonContainer");
    
  btnSubmitContainer.style.display = 'none';

    function checkValidity() {
        if (Virt1.value == 'Not correct' || Virt2.value == 'Not correct') {
            btnSubmitContainer.style.display = 'none';
        } else {
            btnSubmitContainer.style.display = 'inline';
        }
    }

    Virt1.onchange = checkValidity;
    Virt2.onchange = checkValidity;

    // Initial check
    checkValidity();
});
</script>

 

Hi,

I am coming back to this thread. I need to hide and disable both the Submit and Delete buttons for specific users when a virtual field is not equal to 'Owner.' Can this script be modified to accommodate this?  I wish I knew how to write JavaScripts...

Regards/KG

[KG360]

I forgot to mention that this is for a report details page, and I meant to say the Update and Delete buttons - not the Submit button.