Switch statement jQuery not working for radio button values

I am trying to build a small app using AngularJS that will allow me to change the font and see how it looks in an adjacent textarea using radio buttons. I have the values for the fonts coming through but the switch statement does not appear to be picking up any of the cases. Please see my code below:

 <body ng-app="radioForm">
   <div class="container">
      <div class="row" ng-controller="fontController as fontController">
        <h1>Find Me a Font</h1>
          <div class="child">
            <div class="col-xs-6">
              <form role="form">
                <div class="radio">
                    <label id="fairytales">
                        <input type="radio" name="font" ng-model="formData.font" value="fairytales">
                            Fairytales
                    </label>
                </div>
                <div class="radio">
                    <label id="stump-closed">
                        <input type="radio" name="font" ng-model="formData.font" value="stump-closed">
                            Stump-Closed
                    </label>
                </div>
                <div class="radio">
                    <label id="amelia">
                        <input type="radio" name="font" ng-model="formData.font" value="amelia">
                        Amelia
                    </label>
                </div>
                <div class="radio">
                    <label id="brixton-lt">
                        <input type="radio" name="font" ng-model="formData.font" value="brixton-lt">
                        Brixton-LT
                    </label>
                </div>
                <div class="radio">
                    <label id="grounday">
                        <input type="radio" name="font" ng-model="formData.font" value="grounday">
                        Grounday
                    </label>
                </div>
            </form>
        </div>
        <div class="col-xs-6">
            <textarea>{{formData.font}}</textarea>
        </div>
    </div>
   </div>
 </div>

The JS:

var radioForm = angular.module('radioForm', []);

    radioForm.controller('fontController', function($scope){
        $scope.formData = {
        };

        var chosenFont = $scope.formData.font;

        switch (chosenFont){
            case "fairytales":
                $('input[type=text], textarea').css('font-family', 'fairytales');
                break;
            case "stump-closed":
                $('input[type=text], textarea').css('font-family', 'stump-closed');
                break;
            case "amelia":
                $('input[type=text], textarea').css('font-family', 'Amelia-script');
                break;
            case "brixton-lt":
                $('input[type=text], textarea').css('font-family', 'brixton-lt');
                break;
            case "grounday":
                $('input[type=text], textarea').css('font-family', 'brixton-lt');
                break;
            default:
                $('input[type=text], textarea').css('font-family', 'sans-serif');

        }

        $( "input" ).on( "click", function() {
            console.log($scope.formData.font);
        });


    });

Here is the codepen: http://codepen.io/tracyalison11/pen/BKZExL

Answers 1

  • Use ng-change directive as you want action to happen when radio button value is changed.

    Try this:

    var radioForm = angular.module('radioForm', []);
    
    radioForm.controller('fontController', function($scope) {
      $scope.formData = {};
    
      $scope.changeRadio = function() {
        switch ($scope.formData.font) {
          case "fairytales":
            $('input[type=text], textarea').css('font-family', 'georgia');
            break;
          case "stump-closed":
            $('input[type=text], textarea').css('font-family', 'Palatino Linotype');
            break;
          case "amelia":
            $('input[type=text], textarea').css('font-family', 'Times New Roman');
            break;
          case "brixton-lt":
            $('input[type=text], textarea').css('font-family', 'brixton-lt');
            break;
          case "grounday":
            $('input[type=text], textarea').css('font-family', 'Arial');
            break;
          default:
            ('input[type=text], textarea').css('font-family', 'Comic Sans MS');
        }
      }
    
      $("input").on("click", function() {
        console.log($scope.formData.font);
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
    <div ng-app="radioForm">
      <div class="row" ng-controller="fontController as fontController">
        <h1>Find Me a Font</h1>
        <div class="child">
          <div class="col-xs-6">
            <form role="form">
              <div class="radio">
                <label id="fairytales">
                  <input type="radio" name="font" ng-model="formData.font" value="fairytales" ng-change='changeRadio()'>Fairytales
                </label>
              </div>
              <div class="radio">
                <label id="stump-closed">
                  <input type="radio" name="font" ng-model="formData.font" value="stump-closed" ng-change='changeRadio()'>Stump-Closed
                </label>
              </div>
              <div class="radio">
                <label id="amelia">
                  <input type="radio" name="font" ng-model="formData.font" value="amelia" ng-change='changeRadio()'>Amelia
                </label>
              </div>
              <div class="radio">
                <label id="brixton-lt">
                  <input type="radio" name="font" ng-model="formData.font" value="brixton-lt" ng-change='changeRadio()'>Brixton-LT
                </label>
              </div>
              <div class="radio">
                <label id="grounday">
                  <input type="radio" name="font" ng-model="formData.font" value="grounday" ng-change='changeRadio()'>Grounday
                </label>
              </div>
            </form>
          </div>
          <div class="col-xs-6">
            <textarea>{{formData.font}}</textarea>
          </div>
        </div>
      </div>
    </div>

    Codepen


Related Articles