Hide submit button on form load and display when checkbox is clicked

[avinashdubey103]

Hi , I have a requirement to make the submit button invisible or inactive when the forms load , and when the  checkbox is checked then it should display the submit button :

I have created the checbox using widget below is the code for that :

HITML:

<div class="checkbox-container">
<input ng-click="c.checkData()" data-toggle="modal" data-target="#myModal" type="checkbox" id="myCheckbox">
<label for="myCheckbox">By marking this checkbox, I confirm that I understand and accept the <a href='/one_portal?id=aop_kb_article_page&sys_id='>Terms and conditions</a>, including the terms of the Telephony procedure</label>
</div>


CLIENT CONTROLLER:

function($scope) {

  /* widget controller */

  var c = this;

  $scope.myCheckBox = false;

  $scope.page.g_form.setValue("hide_disable_portal_submit_button", "Calendar alert - hide submit");

  $scope.page.g_form.setValue("u_terms_condition", false);

  c.checkData = function() {

    if (!!$scope.myCheckBox) {

      $scope.myCheckBox = false;

$scope.page.g_form.setValue("hide_disable_portal_submit_button", "Calendar alert - hide submit");

  $scope.page.g_form.setValue("u_terms_condition", false);

    } else {

      $scope.myCheckBox = true;

  $scope.page.g_form.setValue("hide_disable_portal_submit_button", "Calendar alert - show submit");

    $scope.page.g_form.setValue("u_terms_condition", true);

    }

  };

}

currently when the form is loading submit button is not hiding 

[Sohithanjan G]

Hi @avinashdubey103 ,

You can use this

<input ng-click="c.checkData()" data-toggle="modal" data-target="#myModal" type="checkbox" id="myCheckbox">

  <button ng-show="showSaveButton">Save</button>

$scope.showSaveButton = false;

    $scope.c = {
      checkData: function () {
        // Assuming you have some logic to determine if the save button should be visible
        // For example, checking if the checkbox is checked
        $scope.showSaveButton = document.getElementById('myCheckbox').checked;
      }
    };

[Jim Coyne]

I'm guessing this is for a Catalog Item.  There are ways to do what you want without messing around with the out-of-the-box behaviours.

You can setup a Select Box variable with only "Yes, I agree" as a response and mark it mandatory.   The user will not be able to order the item without select "Yes.  Setup a UI Policy to display the other variables when the user selects it.  The "Annotation" tab for the Variable can look like this to automatically display the text:

Or just have it at the bottom of the Description field for the item.  This way you are not messing around with any controls, which could break at some point.