Solved

jQuery Toggle Text Box When Clicking Radio

Posted on 2014-11-11
2
1,474 Views
Last Modified: 2014-11-11
I have a form with two radio buttons and a text box.  I need the textbox to be hidden on page load, and when the radio is checked to "yes" it shows the text box, when the radio is checked back to no, it re-hides the text box.

Here is the form:

            <form class="form-horizontal" role="form">
              <div class="form-group">
                <div class="col-sm-3">Enter your email address</div>
                <div class="col-sm-9"><input type="email" class="form-control" id="InputEmail" placeholder="Email"></div>
              </div>

              <h3>DO YOU HAVE A PASSWORD?</h3>

              <div class="form-group">
                <div class="col-sm-12"><input type="radio" name="PasswordToggle" id="PasswordToggle" value="No" checked="checked">  No (you can create an account later)</div>
              </div>

              <div class="form-group">
                <div class="col-sm-3"><input type="radio" name="PasswordToggle" id="PasswordToggle" value="Yes">  Yes, my password is </div>
                <div class="col-sm-9"><input type="password" class="form-control" id="InputPassword" placeholder="Password"></div>
              </div>

              <div class="form-group">
                <div class="col-sm-12"><button type="button" class="btn btn-success" onclick="window.location='/login'">Continue <i class="glyphicon glyphicon-circle-arrow-right"></i></button></div>
              </div>
            </form>

Open in new window


The radios are PasswordToggle and the text box to hide is InputPassword

Thanks
0
Comment
Question by:net-workx
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 8

Accepted Solution

by:
vr6r earned 500 total points
ID: 40436284
Try this... updated your html with the following changes.
1. Removed the ID from the radio buttons in place of class = "pwdToggle")
2. Made InputPassword hidden by default.

<form class="form-horizontal" role="form">
              <div class="form-group">
                <div class="col-sm-3">Enter your email address</div>
                <div class="col-sm-9"><input type="email" class="form-control" id="InputEmail" placeholder="Email"></div>
              </div>

              <h3>DO YOU HAVE A PASSWORD?</h3>

              <div class="form-group">
                <div class="col-sm-12"><input type="radio" name="PasswordToggle" class="pwdToggle" value="No" checked="checked">  No (you can create an account later)</div>
              </div>

              <div class="form-group">
                <div class="col-sm-3"><input type="radio" class="pwdToggle" name="PasswordToggle" value="Yes">  Yes, my password is </div>
                <div class="col-sm-9"><input type="password" class="form-control" id="InputPassword" placeholder="Password" style="display:none;"></div>
              </div>

              <div class="form-group">
                <div class="col-sm-12"><button type="button" class="btn btn-success" onclick="window.location='/login'">Continue <i class="glyphicon glyphicon-circle-arrow-right"></i></button></div>
              </div>
            </form>

Open in new window


js... on click, test value of radio button, if "Yes" then show textbox, if "No" then hide it.
$(function(){
    $('.pwdToggle').click(function(e){
       if($(e.target).val() == "Yes")
           $('#InputPassword').show();
        else
            $('#InputPassword').hide();
    });
});

Open in new window


Working version as a fiddle: http://jsfiddle.net/mtr801f6/

Hope this helps.
0
 

Author Comment

by:net-workx
ID: 40436291
Thank you!
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question