CODEWITHSUNDEEP
javascriptjqueryhtml
Andy Holmes
Andy Holmes

Reputation: 8047

.keypress() isn't working how i thought it would

I have the following code:

$(document).ready(function () {
    var selectedDay = '#selected_day';
    $(function () {
        $("#date").datepicker({
            dateFormat: "DD, d M yy",
            altField: selectedDay,
            altFormat: "DD",
            onSelect: function () {
                $(selectedDay).change()
            }
        });
        $('#selected_day, #times, #name, #group_number, #e-mail, #phone, #additional_info').change(function () {
            if ($(selectedDay).val() == '') {
                $('#times').fadeOut(500);
            } else {
                $('#times').fadeIn(500);
            }
            if ($(selectedDay).val() == 'Friday' || $(selectedDay).val() == 'Saturday') {
                $('#times').find('option[value="6pm"], option[value="8pm"], option[value="10pm"], option[value="11pm"]').hide();
            } else {
                $('#times').find('option[value="6pm"], option[value="8pm"], option[value="10pm"], option[value="11pm"]').show();
            }
            $('#confirm').text('You have chosen ' + $('#date').val() + ' at ' + $('#times').val() + '. This will be booked under the name of ' + $('#name').val() + ' for ' + $('#group_number').val() + ' people. We will contact you on either your phone number (' + $('#phone').val() + ') or your e-mail address (' + $('#e-mail').val() + ') to confirm your booking with us. Thank you for choosing Buddha Belly');
        });
        $('#phone').on('keypress', function () {
            $('#confirm').fadeIn(500);
        });
    });
});

at the bottom you will notice that i want the confirm div to fade in when a key is pressed in the phone input field. Yet this doesn't happen, i have to type something and then click elsewhere in the document. Can you shed any light at all?

fiddle - http://jsfiddle.net/andyjh07/c3u5B/

Upvotes: 2

Views: 90

Answers (1)

Denys Séguret
Denys Séguret

Reputation: 382142

The #confirm element fades in with a simple key press, as you want it to, the problem is that it's still empty when it does.

You might want to call the function you have on change on keyup too.

Fast demonstration

Upvotes: 5

Related Questions