Javascript jQuery Hide Form Items Based on Select Item

Question

I am trying to make a form in which when someone selects "Other" as their title, they get a box appear to input the title. The first part of my script works in order to make the div hidden to begin with but I can't quite get the second part to work in which selecting "Other" makes a text box appear.

Any help would be appreciated.

Here is my HTML:

            <div>
                <label for="title" class="label">Title</label>
                <select name="title" id="title">
                <option></option>
                <option value="mr">Mr.</option>
                <option value="mrs">Mrs.</option>
                <option value="miss">Miss.</option>
                <option value="ms">Ms.</option>
                <option value="dr">Dr.</option>
                <option value="lady">Lady.</option>
                <option value="rev">Rev.</option>
                <option value="sir">Sir.</option>
                <option value="other">Other</option>
                </select>
                <input name="other_title" style="margin-left:10px;" type="text" id="other_title" size="10">
            </div>

Here is my Javascript/jQuery:

<script>
    jQuery(function( $ ) {
        $('#other_title').hide('fast');
        $(function() {
            if ($('#title option:selected').text() == 'other') {
                $('#other_title').show('fast');
            }
        }); // end function
    });
</script>

Is that to tell the function to actually run? By that I mean have I set it up but not told it what should trigger it off? — Connor Wyatt
– Connor Wyatt, Commented Jun 13, 2014 at 21:31
it is sort of action triggered when you press a button, check a checkbox/radio, focusing the textbox, etc., EVENTS. Within you can write things to be done. — Praveen
– Praveen, Commented Jun 13, 2014 at 21:35

LGT · Accepted Answer · 2014-06-13 21:52:35Z

2

Would this be of any help?

$('#title').on('change', function() {
    if ($(this).val() == 'other') $('#other_title').show('fast');
    else $('#other_title').hide('fast'); // This too?
});

Edit: Fixed syntax error. :p

edited Jun 13, 2014 at 21:52

answered Jun 13, 2014 at 21:24

LGT

5,0441 gold badge25 silver badges24 bronze badges

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

1 Comment

Connor Wyatt Over a year ago

Yes, it works, thank you. The only error is that it needs the ")" after the brace. Thank you again

Cœur · Accepted Answer · 2018-07-21 10:46:37Z

0

Try using change event and replacing

if ($('#title option:selected').text() == 'other')

with

if ($('#title>option:selected').text() == 'other')

You can refer the plunkr for reference: https://plnkr.co/edit/R2w25NEwUbiw00r2lEs3

edited Jul 21, 2018 at 10:46

Cœur

39k25 gold badges207 silver badges282 bronze badges

answered Jun 13, 2014 at 21:42

Raja

11811 bronze badges

Collectives™ on Stack Overflow

Javascript jQuery Hide Form Items Based on Select Item

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related