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, 2022 in Web Development by gaurav
• 23,260 points
482 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, 2022 in Web Development by rajatha
• 7,680 points
1,185 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, 2022 in Web Development by gaurav
• 23,260 points
817 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, 2022 in Web Development by gaurav
• 23,260 points
2,494 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, 2022 in Web Development by gaurav
• 23,260 points
372 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, 2022 in Web Development by gaurav
• 23,260 points
659 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, 2022 in Web Development by rajatha
• 7,680 points
1,596 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, 2022 in HTML by Tejashwini
• 3,820 points
1,433 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,510 points
1,112 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,880 points
14,858 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,880 points
22,793 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP