Показать следующее поле формы onclick, а также показать встроенное сообщение рядом с каждым полем

Question

У меня есть форма с 4 полями ввода и 1 textarea. Я пытаюсь сделать следующее в JQuery без успеха: Чтобы показать следующее поле, когда я нажимаю на поле. Так, например, вы нажимаете на первый вход, а затем на следующий появляется. При загрузке страницы первое поле ввода должно быть видимым, а все остальное скрыто, чтобы люди могли щелкнуть по первому полю и оттуда открыть их, пока они нажимают на них. Теперь я также хотел бы показать встроенный текст рядом с каждым полем, как только они будут показаны, и пока не появится следующий. Например, первое поле - «имя», поэтому, когда люди нажимают на него, он должен читать «Пожалуйста, введите свое имя здесь», а затем, когда пользователь нажимает на это поле, появляется следующее поле «Фамилия» и рядом с ним другая легенда «Пожалуйста, введите вашу фамилию здесь» и так далее. Может ли кто-нибудь помочь мне сделать это с помощью jquery без использования плагинов?

Answer 1

Попробуйте это:

var fields = $('#myform .field').hide(); 
fields.first().show(); 
fields.find(':input').bind('focus', function() { 
    $(this).closest('.field').next('.field').show(); 
}); 

Пример: http://jsfiddle.net/petersendidit/rfPCM/34/