CODEWITHSUNDEEP
jquery
Mr.Smithyyy
Mr.Smithyyy

Reputation: 1329

Multi Section form hiding and showing sections with jQuery

I'm working on a long form that has to fit one page. The section should disappear when it is completed and the next section should appear. I would like to know how to do this dynamically so I can reuse it multiple times. I also need to create some sort of breadcrumb so that previous sections can be changed if wanted.

I would like the form to move on to the next section once the user clicks a radio button.

$('.section:not(.active)').hide(0);
.active {
}

.breadcrumbs>ul>li {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="breadcrumbs">
  <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</div>

<form role="form">
  <div class="section active">
    <img src="http://placehold.it/350x150"/><br/>
    <input type="text" id="name" name="name" placeholder="Enter Name"><br/>
    <input type="radio" name="sex" value="male">Male<br/>
    <input type="radio" name="sex" value="female">Female
  </div>
  <div class="section">
    <img src="http://placehold.it/200x100"/><br/>
    <input type="text" id="hobby" name="hobby" placeholder="Enter Hobby"><br/>
    <input type="radio" name="fun" value="yes">Yes<br/>
    <input type="radio" name="fun" value="no">No
  </div>
  <div class="section">
    <img src="http://placehold.it/200x100"/><br/>
    <input type="text" id="wine" name="wine" placeholder="Favorite Wine"><br/>
    <input type="radio" name="wine-type" value="red">Red<br/>
    <input type="radio" name="wine-type" value="white">White
  </div>
</form>

Upvotes: 0

Views: 149

Answers (2)

renakre
renakre

Reputation: 8291

Whenever a radiobutton is selected, you want to move to the next section, is that right? Then, this may help:

$('input:radio').change(function(){
    var currdiv = $(this).parent();
    currdiv.fadeOut(500);
    currdiv.next().fadeIn(500);
});

Here is a jsfiddle for you to check how it works : https://jsfiddle.net/f9tnsq1x/1/

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

This handles the breadcrumbs requirement:

$('.breadcrumbs li').click(function() {
  $('.section').removeClass('active');

  $('.section').eq($(this).index())
    .addClass('active');
});

This will cause the next section to appear on radio button click:

$('input[type=radio]').click(function() {
  $(this).parent()
    .removeClass('active')
    .next()
    .addClass('active');
});


$('.breadcrumbs li').click(function() {
  $('.section').removeClass('active');
  
  $('.section').eq($(this).index())
    .addClass('active');
});

$('input[type=radio]').click(function() {
  $(this).parent()
    .removeClass('active')
    .next()
    .addClass('active');
});
div.active {
  display: block;
}

.section {
  display: none;
}

.breadcrumbs>ul>li {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="breadcrumbs">
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</div>

<form role="form">
  <div class="section active">
    <img src="http://placehold.it/350x150"/><br/>
    <input type="text" id="name" name="name" placeholder="Enter Name"><br/>
    <input type="radio" name="sex" value="male">Male<br/>
    <input type="radio" name="sex" value="female">Female
  </div>
  <div class="section">
    <img src="http://placehold.it/200x100"/><br/>
    <input type="text" id="hobby" name="hobby" placeholder="Enter Hobby"><br/>
    <input type="radio" name="fun" value="yes">Yes<br/>
    <input type="radio" name="fun" value="no">No
  </div>
  <div class="section">
    <img src="http://placehold.it/200x100"/><br/>
    <input type="text" id="wine" name="wine" placeholder="Favorite Wine"><br/>
    <input type="radio" name="wine-type" value="red">Red<br/>
    <input type="radio" name="wine-type" value="white">White
  </div>
</form>

Upvotes: 3

Related Questions