Select displays text input with jQuery

Question

I'm using jQuery Mobile and I have a select box with yes and no as the options. I want a text input field to display when they select yes and it to disappear when they select no.

jsFiddle link

<fieldset data-role="controlgroup">
<label for="joint">Is this a joint gift?</label>
<select name="slider" id="joint" data-role="slider">
    <option value="no">No</option>
    <option value="yes">Yes</option>
</select> 
<div id="enter_joint">
    <label for="other_joint">Spouse Name:</label>
    <input name="other_joint" id="other_joint" value="" data-theme="d" />
</div>
</fieldset>

I want to have use jQuery to only display #enter_joint when the select is set to Yes.

SeanCannon · Accepted Answer · 2011-11-18 19:16:15Z

5

$('#enter_joint').hide();
$('#joint').change(function(){
    $('#enter_joint').toggle('show');
});

http://jsfiddle.net/aNrea/4/

answered Nov 18, 2011 at 19:16

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

villecoder · Accepted Answer · 2011-11-18 19:18:31Z

1

AlienWebguy's answer will work, but I tend to err on the side of "check the value". So here's a bit more that checks the value and then determines whether or not to hide the text field.

$(document).ready(function() {
    $("#enter_joint").hide();
    $("#joint").val('no');
    $("#joint").change(function() {
        if ($(this).val() == 'yes') {
            $("#enter_joint").show();
        } else {
            $("#enter_joint").hide();
        }
    });
});

jsfiddle

answered Nov 18, 2011 at 19:18

villecoder

13.5k2 gold badges37 silver badges54 bronze badges

2 Comments

Muhammad Saifuddin Over a year ago

using a toggle function is more efficient where a less code give you the same functionality . $('#enter_joint').toggle('show');

villecoder Over a year ago

@Saifuddin and in this case, toggle would probably be the best route since there are only 2 answers (which is why I +1'd the AlienWebguy's answer). Some days you want to be explicit despite the circumstances. :)

Calvin Froedge · Accepted Answer · 2011-11-18 19:19:10Z

1

$(document).ready(function(){
    $('#enter_joint').hide();
    $('#joint').change(function(){
        val = $(this).val();

        if(val == 'yes')
        {
            $('#enter_joint').show();
        }

        if(val == 'no')
        {
            $('#enter_joint').hide();
        }
    });
});

answered Nov 18, 2011 at 19:19

Calvin Froedge

16.4k17 gold badges58 silver badges62 bronze badges

Comments

mfalto · Accepted Answer · 2011-11-18 19:27:37Z

0

try this

$('#joint').change(function(event) { 
    if($('#joint').val() === 'yes') { 
        $('#enter_joint').hide(); } 
    else { $('#enter_joint').show();
          }
});

answered Nov 18, 2011 at 19:27

mfalto

4052 silver badges8 bronze badges

Comments

Phill Pafford · Accepted Answer · 2011-11-18 19:43:45Z

0

Alternate Syntax:

$('#enter_joint').hide();
$('#joint').change(function(){
    show = $(this).val() == 'yes';
    $('#enter_joint').toggle(show);
});

answered Nov 18, 2011 at 19:43

Phill Pafford

85.6k92 gold badges268 silver badges385 bronze badges

Collectives™ on Stack Overflow

Select displays text input with jQuery

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related