Changing radio input by clicking next button-CodePudding

I have a page with 5 horizontal tabs (1 to 5), created using only CSS. I have added two buttons Back and Next.

I would like to create jQuery that when pressing Next will move to tab1, tab2, tab3 etc...

I spend hours on this and I can not make this working. This code is on https://jsfiddle.net/d9geh21p/ I would highly appreciate any help. There is sample code I have found somewhere but I can not make this working.

$(document).ready(function() {
if ($('#tab1-information').val() == 'on') {
  $('.main-container-div-button-form-back').hide();
}
$('.prev').click(function() {
  $(this).parent().find('input:checked').parent().prev().children('input').prop("checked", true);
});
$('.prev').click(function() {
  $(this).parent().find('input:checked').parent().next().children('input').prop("checked", true);
});
});
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.div-container {
  border: none;
}


/*------main------*/

.main-container {
  padding: 10px;
  height: 700px;
}


/*------tabs ------*/

.main-container-div-tab {
  display: flex;
  flex-wrap: wrap;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgb(240, 240, 240);
  background-color: rgb(240, 240, 240);
}

.main-container-div-tab input[type="radio"] {
  display: none;
}

.main-container-div-label {
  cursor: pointer;
  margin-bottom: 15px;
  padding: 20px;
  flex: 1 0 200px;
}

.label-underline {
  border-bottom: 1px solid grey;
}

.main-container-div-tab .main-container-div-div-tab {
  width: 100%;
  padding: 20px;
  background-color: rgb(240, 240, 240);
  order: 1;
  display: none;
  height: 200px;
}

.main-container-div-tab input[type='radio']:checked label .main-container-div-div-tab {
  display: block;
}

.main-container-div-tab input[type='radio']:checked label {
  color: rgb(34, 139, 34);
}

.main-container-div-buttons {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  gap: 75px;
}

.main-container-div-button-form-save,
.main-container-div-button-form-back,
.main-container-div-button-form-next {
  width: 200px;
  height: 40px;
  border-radius: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: bold;
  border: 1px solid rgb(170, 170, 170);
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <main >
    <form action="../test" method="post" enctype="multipart/form-data">
      <div >
        <input type="radio" id="tab1-information" name="main-container-div-tabA" checked="checked">
        <label  for="tab1-information">Tab 1</label>
        <div >
          <p>test1</p>
        </div>
        <input type="radio" id="tab2-information" name="main-container-div-tabA">
        <label  for="tab2-information">Tab 2</label>
        <div >
          <p>test2</p>
        </div>
        <input type="radio" id="tab3-information" name="main-container-div-tabA">
        <label  for="tab3-information">Tab 3</label>
        <div >
          <p>test3</p>
        </div>
        <input type="radio" id="tab4-information" name="main-container-div-tabA">
        <label  for="tab4-information">Tab 4</label>
        <div >
          <p>test4</p>
        </div>
        <input type="radio" id="tab5-information" name="main-container-div-tabA">
        <label  for="tab5-information">Tab 5</label>
        <div >
          <p>test5</p>
        </div>
      </div>
      <div >
        <button  type="button">Back</button>
        <button  type="submit">Save</button>
        <button  type="button">Next</button>
      </div>
    </form>
  </main>
</div>

CodePudding user response：

You were on the right track, and I applaud your effort to climb up the html tree to find the radio versus just using the parent class to do so, but the trick is mostly in using .nextAll(':radio:first') and prevALl() to find the radio you want to check.

$(document).ready(function() {

  if ($('#tab1-information').val() == 'on') {
    $('.main-container-div-button-form-back').hide();
  }

  $('.prev').click(function() {
    $('.main-container-div-tab input:checked').prevAll(':radio:first').prop('checked', true);
    
    // hide 'back' button if we return to first radio.
    if ($('.main-container-div-tab input#tab1-information:checked').length > 0) {
        $('.main-container-div-button-form-back').hide();
    }
 
  });

  $('.next').click(function() {
    $('.main-container-div-tab input:checked').nextAll(':radio:first').prop('checked', true);
    
    // always show 'back' button if we go next radio.
    $('.main-container-div-button-form-back').show();
  });

});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.div-container {
  border: none;
}


/*------main------*/

.main-container {
  padding: 10px;
  height: 700px;
}


/*------tabs ------*/

.main-container-div-tab {
  display: flex;
  flex-wrap: wrap;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgb(240, 240, 240);
  background-color: rgb(240, 240, 240);
}

.main-container-div-tab input[type="radio"] {
  display: none;
}

.main-container-div-label {
  cursor: pointer;
  margin-bottom: 15px;
  padding: 20px;
  flex: 1 0 200px;
}

.label-underline {
  border-bottom: 1px solid grey;
}

.main-container-div-tab .main-container-div-div-tab {
  width: 100%;
  padding: 20px;
  background-color: rgb(240, 240, 240);
  order: 1;
  display: none;
  height: 200px;
}

.main-container-div-tab input[type='radio']:checked label .main-container-div-div-tab {
  display: block;
}

.main-container-div-tab input[type='radio']:checked label {
  color: rgb(34, 139, 34);
}

.main-container-div-buttons {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  gap: 75px;
}

.main-container-div-button-form-save,
.main-container-div-button-form-back,
.main-container-div-button-form-next {
  width: 200px;
  height: 40px;
  border-radius: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: bold;
  border: 1px solid rgb(170, 170, 170);
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <main >
    <form action="../test" method="post" enctype="multipart/form-data">
      <div >
        <input type="radio" id="tab1-information" name="main-container-div-tabA" checked="checked">
        <label  for="tab1-information">Tab 1</label>
        <div >
          <p>test1</p>
        </div>
        <input type="radio" id="tab2-information" name="main-container-div-tabA">
        <label  for="tab2-information">Tab 2</label>
        <div >
          <p>test2</p>
        </div>
        <input type="radio" id="tab3-information" name="main-container-div-tabA">
        <label  for="tab3-information">Tab 3</label>
        <div >
          <p>test3</p>
        </div>
        <input type="radio" id="tab4-information" name="main-container-div-tabA">
        <label  for="tab4-information">Tab 4</label>
        <div >
          <p>test4</p>
        </div>
        <input type="radio" id="tab5-information" name="main-container-div-tabA">
        <label  for="tab5-information">Tab 5</label>
        <div >
          <p>test5</p>
        </div>
      </div>
      <div >
        <button  type="button">Back</button>
        <button  type="submit">Save</button>
        <button  type="button">Next</button>
      </div>
    </form>
  </main>
</div>