Creating Radio Buttons in Leaf to assign to a boolean

📚 Official Books Server Side Swift with Vapor
1

I’m trying to create a radio button selector with leaf that will set the defined value if I’m editing, and accept a value if I select that button.

So far I have this.

  <div class="form-group">
      <label for=userRequiresAccessibility>Requires Accessibility?</label>
      
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="userRequiresAccessibility" id="accessibilityTrue" value="true" #if(editing){
          #if(userDetails.requiresAccessibility == true) {
            checked } }>
            <label class="form-check-label">Yes</label>
          </div>
          
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="userRequiresAccessibility" id="accessibilityFalse" value="false" #if(editing){
              #if(userDetails.requiresAccessibility == true) {
                checked } } checked/>
                <label class="form-check-label">No</label>
              </div>
            </div>

but I’m not sure how would I create code to set the value of userDetails.requiresAccessibility if the button is checked.

Should I use an html function for this?

2

Got it all figured out. I had to write a JS Script and used onclick=functionName() on the radio button with the ID named to the boolean value.

          <script type="text/javascript">
          function toggleAccessibilty() {
            if (document.getElementById("requiresAccessibility").checked) {
              document.getElementById("requiresAccessibility").value = true;
              document.getElementById("accessibilityNeeds").value = "";
              document.getElementById("accessibilityNeeds").disabled = false;
            } else {
              document.getElementById("requiresAccessibility").value = false
              document.getElementById("accessibilityNeeds").value = "N/A";
              document.getElementById("accessibilityNeeds").disabled = true;
            }
          }

          function toggleDietaryNeeds() {
            if (document.getElementById("hasDietaryNeeds").checked) {
              document.getElementById("hasDietaryNeeds").value = true;
              document.getElementById("dietaryNeeds").value = "";
              document.getElementById("dietaryNeeds").disabled = false;
            } else {
              document.getElementById("hasDietaryNeeds").value = false;
              document.getElementById("dietaryNeeds").value = "N/A";
              document.getElementById("dietaryNeeds").disabled = true;
            }
          }
          </script>
3

@yungdai Thank you for sharing the solution - much appreciated! :]

1 Like