jQuery addClass example

Change class name on click in jQuery

by Ian Gates

HTML

<body>
  <?php
            $group = ((ISSET ($_GET['group'])) ? $_GET['group'] : 1 );

            if($group == 1)
            {
                $chkGrp1 = "checked";
                $chkGrp2 = "";
            }
            elseif($group == 2)
            {
                $chkGrp1 = "";
                $chkGrp2 = "checked";
            }
            else
            {
                print "error";
            }
        ?>

    <label class="container">Group1
        <input class="group Group1" type="radio" name="n_mapGroup" value="1" <?php print $chkGrp1; ?>>
        </label>

    <label class="container">Group2
        <input class="group Group2" type="radio" name="n_mapGroup" value="2" <?php print $chkGrp2; ?>>
        </label>
    </br>
    <span id="refgroup" data-group="<?php print $group; ?>">Group <?php print $group; ?> Selected</span>
    </br>
    <span id="timer" data-refresh="10">10 Seconds</span>
</body>

</html>

JavaScript

$(document).ready(function() {
  reloadPage();
  groupChange();

})

//Change the Group Based on the Radio Button selected
groupChange = function() {
  $('.group').on('click', function() {
    alert('click');
    if ($(this).val() == 1) {
      alert('1');
      $('#refgroup').replaceWith('<span id="dbGroup" data-group="1">Group 1 Selected</span>');

    } else if ($(this).val() == 2) {
      alert('2');
      $('#refgroup').replaceWith('<span id="dbGroup" data-group="2">Group 2 Selected</span>');
    } else {};
  })
};

//10 Second timer to reload the page
startCountdown = function(timer) {
  group = $('#refgroup').data('group');
  alert("STARTING RELOAD USING group:" + group);
  timeout = setTimeout(function() {
    document.location.href = "index.php?group=" + group
  }, timer);
};

//reload the page
reloadPage = function() {
  //Reload Page Timer
  var timer = (10 * 1000);

  //alert(timer);
  ((timer >= 1) ? startCountdown(timer) : stopCountdown());

  //Display Timer
  var counter = 10;

  setInterval(function() {
    counter--;
    if (counter >= 0) {
      $('#timer').text(counter + ' Seconds');
    }

    if (counter === 0) {
      $('#timer').text('reloading . . .');
      clearInterval(counter);
    }
  }, 1000);
};