JS to conditionally show/hide submit button when a virtual field is checked

[Jodie]

Hi 

So I'm still learning JS and I'm struggling with event handlers. I need hide my submit button on load and show when virtual 7 is clicked. I can hide/display on load with the following code, but my attempt to add "change" so that its dynamic, flopped.

<script>
document.addEventListener('DataPageReady', function (event) {
if (document.getElementById("cbParamVirtual7").checked) {
document.getElementsByName("Mod0EditRecord")[0].style.display = 'block';
 }
else {
document.getElementsByName("Mod0EditRecord")[0].style.display = 'none';
}

});

 

What I tried, and failed with: (I get error that status.Value.checked not recognised)

var statusInput=document.getElementById("cbParamVirtual7");
statusInput.addEventListener("change",showSubmit);

function showSubmit() {
  var statusValue = statusInput.value;
  if statusValue.checked {
    document.getElementsByName("Mod0EditRecord")[0].style.display = 'block';
     }
  else {
    document.getElementsByName("Mod0EditRecord")[0].style.display = 'none';
   }

});

Any help would be appreciated. Thanks

 

[Volomeister]

Hello @Jodie

statusValue.checked must be wrapped in parenthesis: 

 if (statusValue.checked) 

This should eliminate this error.

[UmerFarooq]

It seems like you are having trouble with your event handler in JavaScript. There are a couple of issues in your code that need to be addressed. Here's the corrected code with explanations:
 

// This event listener runs when the document has finished loading
document.addEventListener('DOMContentLoaded', function (event) {
    // Hide the submit button on page load
    document.getElementsByName("Mod0EditRecord")[0].style.display = 'none';

    // Get the checkbox element
    var statusInput = document.getElementById("cbParamVirtual7");

    // Add the event listener to the checkbox
    statusInput.addEventListener("change", showSubmit);

    // Function to handle the checkbox change event
    function showSubmit() {
        // Check if the checkbox is checked
        if (statusInput.checked) {
            // If checked, show the submit button
            document.getElementsByName("Mod0EditRecord")[0].style.display = 'block';
        } else {
            // If not checked, hide the submit button
            document.getElementsByName("Mod0EditRecord")[0].style.display = 'none';
        }
    }
});
 

Here's what has been changed:

Event: The event you should use to trigger the code on page load is DOMContentLoaded. This event fires when the initial HTML document has been completely loaded and parsed.

Page load hide: I added the line document.getElementsByName("Mod0EditRecord")[0].style.display = 'none'; to hide the submit button on page load.

Function syntax: In your code, you forgot to include parentheses after the if statement condition. It should be if (statusInput.checked). The checked property returns a boolean value indicating whether the checkbox is checked or not.

With these corrections, the code should work as expected. The submit button will be hidden on page load and will be shown when the checkbox with the id "cbParamVirtual7" is checked.


For Remote jobs as a JS developer you can visit Avogtal