Display two fields as mandatory based on selected radio button

user_11668691 0
Viewed 82

I have this radio button in HTML.

<div class="radio">
  <label>
  <input id="vendor" type="radio" ng-model="c.data.cvendor" name="customerType" value="cvendor" ng-true-value="CVendor" ng-false-value="false">
  ${CVendor}
  </label> 
</div>

Once this option checked, the two fields below should be displayed and are mandatory. How can I achieve this in HTML?

<div class="form-group is-required">
  <label for="fieldb">${FieldB}:</label>
  <input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B">
</div>
<div class="form-group is-required">
  <label for="fieldc">${FieldC}:</label>
  <input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C">
</div>
angularjs html javascript
3 Answers

Try this ng-if="c.data.cvendor==='cvendor'".

Radio button sets c.data.cvendor to 'cvendor'. Thus you can control the display of two input fields via ng-if

As for the fields to be mandatory, you can try ng-required="true".

    <div class="form-group is-required" ng-if="c.data.cvendor==='cvendor'">
     <label for="fieldb">${FieldB}:</label>
     <input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B" ng-required="true">
    </div>

    <div class="form-group is-required" ng-if="c.data.cvendor==='cvendor'">
     <label for="fieldc">${FieldC}:</label>
     <input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C" ng-required="true">
    </div>
user_91661430

You can achieve this by using ng-required. Based on 'c.data.fieldb' value it will become mandatory or non-mandatory. Similarly, for hide and show you can use ng-show / ng-hide.

<div class="form-group is-required">
     <label for="fieldb">${FieldB}:</label>
     <input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B" ng-required="c.data.cvendor == 'CVendor'">
</div>

<div class="form-group is-required">
     <label for="fieldc">${FieldC}:</label>
     <input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C" ng-required="c.data.cvendor == 'CVendor'">
</div>
user_59959730

Try This code

var checkBox;
function DemoFunctin() {
 checkBox = document.querySelector('input[type="checkbox"]');
var textInput1 = document.querySelector('input[name="first"]');
var textInput2 = document.querySelector('input[name="second"]');


    if (textInput1.hasAttribute('required') !== true && textInput2.hasAttribute('required') !== true) {
       
        textInput1.setAttribute('required','required');
        textInput2.setAttribute('required','required');
         
    }

    else {
        textInput1.removeAttribute('required'); 
        textInput2.removeAttribute('required'); 
        
    }
 
}
if(checkBox){
checkBox.addEventListener('change',toggleRequired,false);

}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>

<h3>display-two-fields-as-mandatory-based-on-selected-radio-button</h3>


<form>
<p><input type="radio" onclick="DemoFunctin();"/>Check Me to make the Text Box a Required Field</p>
<input type="text" name="first"/>
<input type="text" name="second"/>
<input type="submit" value="Submit" />
</form>

</body>
</html>

user_78953940
Related