Jump to content

Hide Button and Label Based On Checked Box


Recommended Posts

I have set this up to do the following:

- hide the  "Choose File" button when a file has already been uploaded

- hide the remove checkbox button when status is "Accepted" 

<input type="checkbox" id="EditRecordClient_information_sheetRemove" name="EditRecordClient_information_sheetRemove" value="true" style="visibility: hidden;">

What I can't get it to do is hide the label "Remove" next to the checkbox.

<label for="EditRecordClient_information_sheetRemove">Remove</label>

image.thumb.png.0f3bfc607523d79c4112d397164452be.png

<SCRIPT LANGUAGE="JavaScript">
var fileCIS='[@field:Client_information_sheet/]';
var statusCIS='[@field:Client_information_sheet_status]';

if (fileCIS.length>0)
    {
document.getElementById("EditRecordClient_information_sheet").style.visibility = 'hidden';
    }

if (statusCIS.length='Accepted')
    {
document.getElementById("EditRecordClient_information_sheetRemove").style.visibility = 'hidden';
    }

if (statusCIS.length!=='Accepted')
    {
document.getElementById("EditRecordClient_information_sheetRemove").style.visibility = 'visible';

</script>
 

Link to comment
Share on other sites

Try targeting just the "label" tag .. then zone into which specific label tag to affect by changing the bracketed number [0], [1] etc. next to it. See my code below.
 

<script type="text/javascript">
    document.addEventListener('DataPageReady', function (event) {
    		
    function myFunction() {
      var labelTarget = document.getElementsByTagName("form")[0];
      labelTarget.getElementsByTagName("label")[0].innerHTML = "";
    }
    	
    });
    </script>

    <!--
    • The first part of the code finds the 1st[0] "form" tag
    • 2nd part of the code targets ALL the "label" tags as an array, but the unique label you want is found here > [0] .. this number needs to change until you find your specific label . once found, the script makes the label's HTML text become BLANK with the code call innerHTML = "" -->


 

Link to comment
Share on other sites

  • 2 years later...

I'm able to hide "Choose File" button  by inserting the following code into the footer.  However, it seems to show again once I click the "Update" button.  Any ideas?

<script>
var UploadA='[@field:Credential_Upload_A]';

if (UploadA.length>0)
    {
document.getElementById("EditRecordCredential_Upload_A").style.visibility = 'hidden';
document.getElementById("EditRecordCredential_Upload_ARemove").style.visibility = 'hidden';
    }

</script>

 

Link to comment
Share on other sites

@Meekeee thanks for the example script, but I'm afraid it's sill not working.  The "Choose File" and "Remove" checkbox is still showing even after uploading a test file.

 

@KlisaN137  the DataPage is tabular type, with Responsive set to be on.  

 

I wonder if I'm needing to adjust Element ID due to how Caspio does inserted and edited data ([@field:FIELDNAME] , [@InsertRecordFIELDNAME] and [@EditRecordFIELDNAME],  per this Caspio article: Why do I get blank values in emails?  

Link to comment
Share on other sites

Hi  @telepet

If it is a Tabular Report, I'm guessing you want this on Details Page?

Yes, you need to adjust Element ID, in this case, where you see 'EditRecord' and 'Remove', just follow the same logic. Also, add another part to get rid of the label 'remove':

<script>
var UploadA='[@field:FIELDNAME]';

if (UploadA.length>0)
    {
document.getElementById("EditRecordFIELDNAME").style.visibility = 'hidden';
document.getElementById("EditRecordFIELDNAMERemove").style.visibility = 'hidden';
document.querySelector('label[for="EditRecordFIELDNAMERemove"]').style.visibility = 'hidden';
    }

</script>

Please instead of using the code in the Footer of the page, add another HTML block element just after the last element, and put the code in it, this will execute code again when the file is uploaded after using Update button.

Link to comment
Share on other sites

I've since added an additional and additional upload "B", as well as "Upload" buttons for each upload.  I'd like to have these button hidden upon a respective file being uploaded.

Button A is coded like this, with Button B having a different id (upload_button_B):

<input class="uploadButton" id="upload_button_A" name="Mod0EditRecord" type="submit" value="Upload" />

I've added the following commented lines in my Javascript in order to hide these upload buttons.  However, the buttons remain visible even after file/s are uploaded.  Below is my code.  Any ideas what I might be doing wrong?

<script>
var UploadA='[@field:Credential_Upload_A]';
var UploadB='[@field:Credential_Upload_B]';

if (UploadA.length>0)
    {
document.getElementById("EditRecordCredential_Upload_A").style.visibility = 'hidden';
document.getElementById("EditRecordCredential_Upload_ARemove").style.visibility = 'hidden';
document.querySelector('label[for="EditRecordCredential_Upload_ARemove"]').style.visibility = 'hidden';
document.getElementById("upload_button_A").style.visiblity = 'hidden'; //Hide upload button A
    }

if (UploadB.length>0)
    {
document.getElementById("EditRecordCredential_Upload_B").style.visibility = 'hidden';
document.getElementById("EditRecordCredential_Upload_BRemove").style.visibility = 'hidden';
document.querySelector('label[for="EditRecordCredential_Upload_BRemove"]').style.visibility = 'hidden';
document.getElementById("upload_button_B").style.visiblity = 'hidden'; //Hide upload button B
    }
</script>
Link to comment
Share on other sites

Hi @telepet - can you try this one:

<script>
var UploadA='[@field:Credential_Upload_A]';
var UploadB='[@field:Credential_Upload_B]';

if (UploadA.length>0)
    {
document.getElementById("EditRecordCredential_Upload_A").style.visibility = 'hidden';
document.getElementById("EditRecordCredential_Upload_ARemove").style.visibility = 'hidden';
document.querySelector('label[for="EditRecordCredential_Upload_ARemove"]').style.visibility = 'hidden';
document.getElementById("upload_button_A").style.visiblity = 'hidden'; //Hide upload button A
    }

else if (UploadB.length>0)
    {
document.getElementById("EditRecordCredential_Upload_B").style.visibility = 'hidden';
document.getElementById("EditRecordCredential_Upload_BRemove").style.visibility = 'hidden';
document.querySelector('label[for="EditRecordCredential_Upload_BRemove"]').style.visibility = 'hidden';
document.getElementById("upload_button_B").style.visiblity = 'hidden'; //Hide upload button B
    }
</script>

If you have another if, you will need to add else to the if. For reference, you may check it here: https://www.w3schools.com/js/js_if_else.asp

To check any errors of your JavaScript code, you can right click your webpage then select Inspect -> go to Console and let us know if you have any errors.

Hope it helps!

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

×
×
  • Create New...