Jump to content

Conditional Styling to hide Submit Button


Recommended Posts

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!

Link to comment
Share on other sites

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 :) 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 10 months later...
  • 2 years later...
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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 11 months later...
  • 8 months later...

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>

 

Link to comment
Share on other sites

  • 4 weeks later...
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

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
Reply to this topic...

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