CODEWITHSUNDEEP
javascriptjqueryhtml
hendy0817
hendy0817

Reputation: 1079

Change radio button selected based on url hash

I have a form that has 3 different sections, I also have some hash links (#one, #two, #three) to go to the form page but have the corresponding form section shown on page load based on the hash. I have it working where the form view is updating based on hash url but the actual form is not updating to collect the data and validate. What I need to happen is the actual radio button change as if it were clicked. So if the url is www......com/#two the corresponding radio button two will be clicked and active as if it were manually clicked on the form when user is sent to the page with the page link/hash.

HTML:

 <div class="register_input-container register_input-container--checkbox all role-checkbox">
    <div class="register_checkbox_label-row row">
        <div class="register_checkbox_label-container col">
            <label tabindex="0" for="register_one"
                   class="form_checkbox_label form_checkbox_label--role selected-role" id="one"
                   data-role="one">
                Label One
            </label>
        </div>

        <div class="register_checkbox_label-container col">
            <label tabindex="0" for="register_two"
                   class="form_checkbox_label form_checkbox_label--role" id="two" data-role=two"
                   data-offset="0">
                Label Two
            </label>
        </div>

        <div class="register_checkbox_label-container col">
            <label tabindex="0" for="register_three" class="form_checkbox_label form_checkbox_label--role " id="three"
                   data-role="three">
               Label Three
            </label>
        </div>
    </div>

    <input type="radio" id="register_one" name="role">
    <input type="radio" id="register_two" name="role">
    <input type="radio" id="register_three" name="role">
</div>

jQuery:

//how click event is being handled and toggling form
 if ($('.register_input-container.role-checkbox').length) {
      var roleCheckBoxLabels = document.getElementsByClassName('form_checkbox_label--role');

      for (var i = 0; i < roleCheckBoxLabels.length; i++) {
        (function (x) {
          roleCheckBoxLabels[x].addEventListener('click', function () {
            var $that = $(this),
              input = $that.attr('for');

            $that.closest('.register_checkbox_label-row').find('input').removeAttr('checked');
            $('#' + input + '').prop('checked', true);

            toggleFormView(roleCheckBoxLabels[x]);
          }, false);
        })(i);
      }
    }


//form view toggle
 var toggleFormView = function (that, all, initialRender) {
    // if resetting to default after completion i.e: toggleFormView(null, true)
    if (all) {
      //toggle form view
      $('.register_input-container').css('display', 'none');
      $('.register_input-container.all').css('display', 'block');
    }
    // if toggling form view
    else {
      // get role
      var role = that.dataset.role;

      //toggle form view
      $('.register_input-container').css('display', 'none');
      $('.register_input-container.' + role + '').css('display', 'block');
      $('.register_input-container.all').css('display', 'block');

      // update selected role
      $('.selected-role').removeClass('selected-role');

      that.className += ' selected-role';

      // update validation
      if (!initialRender) {
        updateForm();
      }
    }
  };

//switch for url hash

switch (window.location.hash) {
  case '#two':
    toggleFormView(document.getElementById('two'), null, true);
    break;
  default:
    break;
}

switch (window.location.hash) {
  case '#three':
    toggleFormView(document.getElementById('three'), null, true);
    break;
  default:
    break;
}

Upvotes: 0

Views: 350

Answers (1)

ariel
ariel

Reputation: 16140

Instead of using the toggleFormView, simulate a click() on the button:

document.addEventListener("load", function() {
   var hash = window.location.hash;
   if (hash) $(hash).click(); // For instance: $("#two").click()
});

Upvotes: 1

Related Questions