0

I am trying to add a class to a great-great-great-great-grandparent of an input element using jquery and/or plain javascript. The idea is; after clicking the button (class="ws-btn-previous") on the current step, a class is added to the fieldset containing selected capacity radio button in the previous step and fade into that fieldset then remove the added class.

The HTML for active fieldset is as follows;

<fieldset class="working_status ">
  <h4 class="text-center">What is your Phone's condition?</h4>
  <div class="container">
    <div>
      <ul class="h-ws row">
        <li class="wsbf">
          <input type="radio" class="sell-rdb" id="ws1" name="working_status" value="Excellent" />
          <label class="ws-btn-labels" for="ws1">
            <p id="wslbl">Excellent</p>
            <p>Good as new. Has no dents or scratches.</p>
          </label>
        </li>
      </ul>
    </div>
  </div>
  <div class="container wizard-buttons">
    <button type="button" class="btn btn-previous ws-btn-previous">Previous</button>
    <button type="button" class="btn btn-next">Next</button>
  </div>
</fieldset>

The HTML section of preceding fieldset in previous step is as follows;

<fieldset class="capacity-gj7p">
  <h4 class="text-center">Please select your Galaxy J7 Prime memory capacity</h4>
  <div class="container">
    <div>
      <ul class="h-m row">
        <li class="cbf">
          <input type="radio" class="sell-rdb" id="sc49" name="capacity" value="32" />
          <label class="capacity-btn-labels" for="sc49">32</label>
        </li>
      </ul>
    </div>
  </div>
  <div class="container wizard-buttons">
    <button type="button" class="btn btn-previous sc-btn-previous">Previous</button>
    <button type="button" class="btn btn-next capacity-btn-next">Next</button>
  </div>
</fieldset>

My attempt to tackle the problem using jQuery and plain javascript is as follows;

jQuery(document).ready(function() {
  $('form .ws-btn-previous').on('click', function() {
    var fset = document.getElementById("sell-wiz").elements["capacity"];

    $(this).parents('fieldset').fadeOut(200, function() {
      fset.addClass('capacity-parent');
      $('.capacity-parent').fadeIn();
      fset.removeClass('capacity-parent');
    });
  });
});

What am I missing? Is there a better way to do it? Thanks in advance.

Il Drake
  • 1
  • 3
  • I'd use IDs or names on the fields, especially if it is always going to be that element that you want to perform the acton on. – Ajaypayne Sep 05 '18 at 13:34
  • where is your **ws-btn-previous** in your html? May you add it? – gaetanoM Sep 05 '18 at 13:34
  • please add all relevant HTML so we can see whole structure – azrahel Sep 05 '18 at 13:38
  • I've added the HTML for the active fieldset containing **ws-btn-previous** @gaetanoM. I think it's the relevant part that was missing. – Il Drake Sep 05 '18 at 14:14
  • there are still problems in your html. Doesn't matter. Take a look to this [fiddle](https://jsfiddle.net/d85p0v79/) and tell me more about your issue. Thanks – gaetanoM Sep 05 '18 at 16:36
  • The complete code is very lengthy. I only added the relevant parts. The issue is the js code in the fiddle should work but it doesn't. I have tried alert(fset.value) which returns a correct value for the selected radio button.. I want to switch into the parent fieldset of fset. – Il Drake Sep 05 '18 at 22:17
  • `$(fset).closest("fieldset")`? – James Sep 05 '18 at 23:18
  • Apparently `$(fset).closest('fieldset').fadeIn();` works but it doesn't lead to the immediate fieldset containing the element. Instead it lands into the first fieldset that contains a radio button with `name="capacity"` attribute. – Il Drake Sep 06 '18 at 09:46

0 Answers0