CODEWITHSUNDEEP
jqueryjquery-mobile
rmlumley
rmlumley

Reputation: 783

Select displays text input with jQuery

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.

Upvotes: 2

Views: 462

Answers (5)

Phill Pafford
Phill Pafford

Reputation: 85378

Alternate Syntax:

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

Upvotes: 0

mfalto
mfalto

Reputation: 405

try this

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

Upvotes: 0

Calvin Froedge
Calvin Froedge

Reputation: 16373

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

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

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

Upvotes: 1

villecoder
villecoder

Reputation: 13494

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

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 78016

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

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

Upvotes: 5

Related Questions