Expand form based on radio selection in jQuery Bootstrap

0 votes

I am trying to show a part of a form, based on the input of a visitor. Currently whenever I change the radio button value, it still keeps showing the the part of the form of the last selection made. What I want my form to do is, when the user changes the value of the <input type="radio"> and when it just made a part of the form visible, to make it disappear again, since it is not required. I guess you can get the idea of what I want when I paste my code current code down here and see for yourself what is going wrong there:

$(document).ready(function() {
	$('input[name="Selection"]').click(function() {
  	if($(this).attr('id') == 'Selection-1')
    {
    	$("#Selection-1-container").toggleClass('hidden');
    }
    else if($(this).attr('id') == 'Selection-2')
    {
    	$("#Selection-2-container").toggleClass('hidden');
    }
  });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <label class="control-label col-md-2" for="Selection">Selection</label>
  <div class="col-md-10">
    <div class="radio">
      <label for="Selection-0">
        <input type="radio" name="Selection" id="Selection-0" value="Value-1" checked="checked">
        When this one selected, neither 'Selection' of the code below.
      </label>
    </div>
    <div class="radio">
      <label for="Selection-1">
        <input type="radio" name="Selection" id="Selection-1" value="Value-2">
        When this one selected, show Selection-1 only.
      </label>
    </div>
    <div class="radio">
      <label for="Selection-2">
        <input type="radio" name="Selection" id="Selection-2" value="Value-3">
        When this one selected, show Selection-2 only.
      </label>
    </div>
  </div>
</div>
<div id="Selection-1-container" class="hidden">
  <h4>Selection 1</h4>
  <hr>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column1">Column1</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column1" name="Column1" type="text"
             placeholder="Column1" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column2">Column2</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column2" name="Column2" type="text"
             placeholder="Column2" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column3">Column3</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column3" name="Column3" type="text"
             placeholder="Column3" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column4">Column4</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column4" name="Column4" type="text"
             placeholder="Column4" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column5">Column5</label>
    <div class="col-md-10">
      <select class="form-control" id="Column5" name="Column5" required>
        <option value>Choose an option...</option>
        <option value>Option 1</option>
      </select>
    </div>
  </div>
</div>
<div id="Selection-2-container" class="hidden">
  <h4>Selection 2</h4>
  <hr>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column6">Column6</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column6" name="Column6" type="text"
             placeholder="Column6" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column7">Column7</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column7" name="Column7" type="text"
             placeholder="Column7" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column8">Column7</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column8" name="Column8" type="text"
             placeholder="Column8" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column9">Column9</label>
    <div class="col-md-10">
      <input class="form-control text-box single-line" id="Column9" name="Column9" type="text"
             placeholder="Column9" required>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2" for="Column10">Column10</label>
    <div class="col-md-10">
      <select class="form-control" id="Column10" name="Column10" required>
        <option value>Choose an option...</option>
        <option value>Option 1</option>
      </select>
    </div>
  </div>
</div>

Is there anyone that can suggest what I should add (I assume to my javascript code) to make it work perfectly fine the way I intend this to work?

Jul 22 in Web Development by gaurav
• 17,580 points
13 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
1 answer

How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?

The jQuery fadeIn() method is used to ...READ MORE

answered Jun 29 in Web Development by rajatha
• 7,040 points
11 views
0 votes
0 answers

Page Reload/Refresh executes $(document).ready() on every page in jQuery Mobile

My jQuery mobile applications consists of multiple ...READ MORE

Jul 22 in Web Development by gaurav
• 17,580 points
15 views
0 votes
0 answers

How an I get all form elements (input, textarea & select) with jQuery?

Is there an easy way (without listing ...READ MORE

Jul 26 in Web Development by gaurav
• 17,580 points
9 views
0 votes
0 answers

hide pills on jquery twitter bootstrap wizard

im using twitter bootstrap wizard http://vadimg.com/twitter-bootstrap-wizard-example/ , im trying ...READ MORE

Jul 26 in Web Development by gaurav
• 17,580 points
9 views
0 votes
0 answers

How to show message in model body if bootstrap model have no data in jquery

I'm trying to display a text message ...READ MORE

Jul 29 in Web Development by gaurav
• 17,580 points
9 views
0 votes
1 answer

how to rotate image image 3d in jquery on swipe up and swipe down

If you're not using one of the ...READ MORE

answered Aug 4 in Web Development by rajatha
• 7,040 points
7 views
0 votes
0 answers

How to do calculations in HTML forms using JavaScript?

I'm developing a straightforward app that multiplies ...READ MORE

Jul 26 in HTML by Tejashwini
• 1,660 points
11 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
308 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
8,826 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
15,808 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP