Showing input when CheckBox is checked

Question

I am creating a contact form, I have two inputs, of type="checkbox"; the first one is email, and is already checked, but I want to uncheck this, in the event that the user picks the "Phone" option, and show the phone input in which to enter the phone number.

Here's the code: at JS Fiddle

I hope you guys can help me, I'm still a js newbie but I have learnt a lot.

HTML Name *:

                <label for="">Email <span>*</span>:</label>
                <input type="email" placeholder="Email (Required)">

                <label for="">Got a question? <span>*</span>:</label>
                <textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>

                <label for="">Best form to contact</label>

                <div>
                    <p>Email: </p>
                    <input type="checkbox" name="fruit" value="email" id="email2" checked>
                </div>

                <div>
                    <p>Phone: </p>
                    <input type="checkbox">

                    <input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed"> 
                </div>

                <div class="SendButton">
                    <a href="" id="send">Send</a>
                </div>
            </form>
        </div>
    </div>

Javascript

$('#ChatContainer').hide();
    $('.NoDisplayed').hide();

    $('#ChatToggle').click(function(){
        $('#ChatContainer').toggle('slow');
    });

Thank you.

I know, I read your question. Now please put your code in it. — j08691
– j08691, Commented Aug 29, 2014 at 17:21
Why are you using checkboxes for mutually-exclusive options? — David Thomas
– David Thomas, Commented Aug 30, 2014 at 10:33

David Thomas · Accepted Answer · 2014-09-01 22:58:30Z

I'd suggest associating your 'preferred contact' choices together, using radio-inputs (since 'preferred' is an exclusive choice to make, whereas 'acceptable' might include all possible options), giving:

<label for="">Best form to contact</label>
<div>
    <p>Email:</p>
    <input type="radio" name="contact" value="email" id="email2" checked="checked" />
</div>
<div>
    <p>Phone:</p>
    <input type="radio" name="contact" value="phone" />
    <input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed" />
</div>

Which would work with the following jQuery:

$('input[type="radio"][name="contact"]').on('change', function(){
    $('#phonecheck').toggle(this.value === 'phone');
});

JS Fiddle demo.

It's worth also noting that your HTML is somewhat problematic; your <label> elements weren't associated with any (let alone 'specific') form-elements; you were using a <label> simply to provide a form's section-name (for which the <legend> attribute should be used, within a <fieldset> grouping). That said, I've corrected your HTML and moved the phone-number entry box outside of the <div> that was containing the checkbox (and now contains a radio-input), to reduce the jarring effect of the <form> suddenly being displaced. There's still a bit of a jump, but not quite so profound.

Here's the amended HTML, which still works with the above jQuery:

<div id="ContactForm">
    <div id="ChatToggle">
        <p>Contact Us</p>
    </div>
    <div id="ChatContainer">
        <form action="">
            <label>Name <span>*</span>:
                <input type="text" placeholder="Your Name (Required)" />
            </label>
            <label>Email <span>*</span>:
                <input type="email" placeholder="Email (Required)" />
            </label>
            <label>Got a question? <span>*</span>:
                <textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>
            </label>
            <fieldset>
                <legend>Best form to contact</legend>
                <div>
                    <label>Email:
                        <input type="radio" name="contact" value="email" id="email2" checked="checked" />
                    </label>
                </div>
                <div>
                    <label>Phone:
                        <input type="radio" name="contact" value="phone" />
                    </label>
                </div>
                <input type="text" placeholder="Give us your phone" id="phonecheck" class="NoDisplayed" />
            </fieldset>
            <div class="SendButton">    <a href="" id="send">Send</a>

            </div>
        </form>
    </div>
</div>

JS Fiddle demo.

References:

CSS:
- Attribute-equals (attribute="value") selector.
HTML Elements:
- <fieldset>.
- <label>.
- <legend>.
- <input />.
jQuery:
- on().
- toggle().

Thanks for all the advices, however, this was exactly what I was looking for, thank you so much for your time and help :)

Tarion · Accepted Answer · 2014-08-30 10:11:34Z

1

Try this code:

var $checkPhone = $('#checkPhone');
var $checkMail = $('#checkMail');
var $phonecheck = $('#phonecheck');

$checkPhone.change(function(data) {
    $checkMail.attr("checked", false);
    if (this.checked) {
        $phonecheck.show();
    }
    else {
        $phonecheck.hide();
    }
});

$checkMail.change(function(data) {
     $checkPhone.attr("checked", false);
     $phonecheck.hide();
});

remove the class NoDisplayed form the phone element and repelace it by style="display: none;"

http://jsfiddle.net/dL36kccw/8/

Addition: Doing such stuff with jQuery is not the easiest. You often end up in placing some DOM manipulations in several places which makes the code less maintainable (like the $phonecheck.hide(); in this case.

I can strongly recommend to take a look into Knockout or some other UI framework. A good list of frameworks + examples can be found on todoMVC. I think Knockout is the best for many cases. Backbone is very competitive, too. But in the end you need to find one that reflects your needs and style.

Edit: Fixed the bug with unchecking the pohne.

edited Aug 30, 2014 at 10:11

answered Aug 29, 2014 at 17:33

Tarion

17.3k13 gold badges79 silver badges113 bronze badges

6 Comments

Tarion Over a year ago

I agree to Slippery that using change would be better than handling click :) Since it would also work for toggeleing using the keyboard.

Alex Over a year ago

This suits perfectly as I needed, thank you so much.

Alex Over a year ago

I'm having some issues, the first one, if I click on the phone checkbox again it unchecks but the input doesn't hide, I tryed an if else but it doesn't work, honestly I don't understand very well the change method, and one more question, if I want to click outside of the toggle how can I make it hide the contact form?, sorry for so many questions :S

Tarion Over a year ago

Change simply calls the callback function as soon as the value changes. Why not take a look into the API: api.jquery.com/change

Tarion Over a year ago

You are right, there was a bug when you uncheck the phone box. See how I fixed it.

|

Slippery Pete · Accepted Answer · 2014-08-29 17:27:23Z

0

You just need to handle the change event of the phone checkbox:

$("#chkPhone").on("change", function () {
    $("#email2").prop("checked", !($(this).is(":checked")));
});

http://jsfiddle.net/dL36kccw/5/

answered Aug 29, 2014 at 17:27

Slippery Pete

3,1101 gold badge16 silver badges17 bronze badges

Comments

Thivya · Accepted Answer · 2014-08-30 10:56:39Z

// I have just added id (id -->"phone" to checkbox for corresponding phone number text box and    added style="display:none;" to phone number text

<label for="">Email <span>*</span>:</label>
<input type="email" placeholder="Email (Required)">

<label for="">Got a question? <span>*</span>:</label>
<textarea name="" id="" rows="1" placeholder="Got a question? (Required)"></textarea>

<label for="">Best form to contact</label>
<div>
<p>Email: </p>
<input type="checkbox" name="fruit" value="email" id="email2" checked>
</div>

<div>
<p>Phone: </p>
<input type="checkbox" id="phone">

<input type="text" placeholder="Give us your phone" id="phonecheck"   style="display:none;"> 
</div>
<div class="SendButton">
<a href="" id="send">Send</a>
</div>
</form>
</div>
</div>

// please try this script

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script>

$('#phone').click(function(){
if($('#phone').is(':checked'))
{
$('#phonecheck').show();
}
else
{
$('#phonecheck').hide();
}
});
</script>

Collectives™ on Stack Overflow

Showing input when CheckBox is checked

4 Answers 4

1 Comment

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related