Hide Button and Label Based On Checked Box

[bbewley]

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>

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

[geoffdude]

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 = "" -->

 

[telepet]

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>

 

[KlisaN137]

@telepet Could you elaborate a bit more about the DataPage setting? What is the DataPage Type on which you are using this? 

[Kurumi]

Hi @telepet - can you try this:

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

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

</script>

[telepet]

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

[KlisaN137]

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.

[telepet]

Thanks @KlisaN137! That works.

[telepet]

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>

[Kurumi]

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!

[telepet]

Thanks @Meekeee.  I was able to get it working via he below code.  I'm also am working on incorporating an  additional Upload C option, which is proving harder to get working.   I think it has to do with a flaw in my logic somewhere.  Or, I'm learning about Javascript's switch functionality,  and wondering if that might work better here.  
 

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

// A populated, B & C are blank
if (UploadA.length>0 && UploadB.length==0 && UploadC.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.visibility = 'hidden';
    }

// A & B populated, C is blank
else if (UploadA.length>0 && UploadB.length>0 && UploadC.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.visibility = 'hidden';
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.visibility = 'hidden';
    }

// Note: Unable to get this to work so just removed Upload C option
// // // // A, B, and C are populated
// else (UploadA.length>0 && UploadB.length>0 && UploadC.length>0)

//     {
// document.getElementById("EditRecordCredential_Upload_C").style.visibility = 'hidden';
// document.getElementById("EditRecordCredential_Upload_CRemove").style.visibility = 'hidden';
// document.querySelector('label[for="EditRecordCredential_Upload_CRemove"]').style.visibility = 'hidden';
// document.getElementById("upload_button_C").style.visibility = 'hidden';
// 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.visibility = 'hidden';
// 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.visibility = 'hidden';
//     }

</script>