Jquery удалить ярлыки из контактной формы на фокусе

0

Мне нужна помощь в моей контактной форме. Я пытаюсь удалить метки автоматически, когда пользователь нажимает кнопку в поле, но я не могу понять, как это сделать.

Это HTML

<div class="six columns">
    <form>
        <div class="row">
            <div class="six columns">
                <label class="gfield_label" for="Name" style="display: block;">Name<span class="gfield_required">*</span>
                </label>
                <input type="text" id="Name" required class="mobile-four" />
            </div>
            <div class="six columns">
                <label class="gfield_label" for="Name" style="display: block;">Company</label>
                <input type="text" id="Name" required class="mobile-four" />
            </div>
        </div>
        <div class="row">
            <div class="six columns mobile-four">
                <label class="gfield_label" for="email" style="display: block;">Email<span class="gfield_required">*</span>
                </label>
                <input type="email" class="mobile-four" id="email" required />
            </div>
            <div class="six columns mobile-four">
                <label class="gfield_label" for="phone" style="display: block;">Phone<span class="gfield_required">*</span>
                </label>
                <input type="phone" class="mobile-four" id="phone" required />
            </div>
        </div>
        <div class="row">
            <div class="twelve columns mobile-four">
                <label class="gfield_label" for="message" style="display: block;">Message<span class="gfield_required">*</span>
                </label>
                <textarea id="message" cols="30" rows="3"></textarea>
            </div>
            <div class="three columns centered">
                <button id="contact-submit-btn" class="btn btn-block btn-danger">Contact us Now!</button>
            </div>
        </div>
    </form>

</div>

и это JS, который я пробовал до сих пор. Но ничего не работает.

$('input, textarea').focus();
    $(this).prev('label').hide();
});


$('.gfield_label').focus(function () {
    $('label.mobile-four[for="' + $(this)[0].id + '"]').hide();
});

$('.gfield_label').each(function () {
    2
    var elem = $(this);
    3
    $('label[for="' + $(this).attr('id') + '"]').click(function () {
        4
        elem.focus();
        5
    });
    6
    if ($(this).val() != '') {
        7
        $('label[for="' + $(this).attr('id') + '"]').hide();
        8
    }
    9
}).focus(function () {
    10
    $('label[for="' + $(this)[0].id + '"]').hide();
    11
}).blur(function () {
    12
    if ($(this).val() == '') {
        13
        $('label[for="' + $(this)[0].id + '"]').show();
        14
    }
    15
}).change(function () {
    16
    if ($(this).val() != '') {
        17
        $('label[for="' + $(this)[0].id + '"]').hide();
        18
    }
    19
})

Было бы здорово, если бы кто-то мог помочь. Страница находится на beta.harbordev.com/contact.html

спасибо

ОБНОВИТЬ!!!!!

$(function() {
    $('input, textarea').on('focus blur', function () {
        $(this).prev().toggle();
    });
});

Это предложение типа fo работало. Теперь он живет на веб-сайте, но как-то поле сообщений (textarea) всегда исчезает с любым другим, которое выбрано, и также исчезает, когда ничего не выбрано. Кто-нибудь знает, почему?

  • 1
    Вы пытались обернуть это в документе. Уже?
  • 0
    @LauraSchoebel Пожалуйста, отредактируйте тип в вашей теме;)
Показать ещё 2 комментария
Теги:
forms
labels

4 ответа

2
Лучший ответ
$(function() {
    $('input, textarea').on('focus blur', function () {
        $(this).prev().toggle();
    });
});

FIDDLE

Поделиться
  • 0
    Ваш код работал несколько. Посмотри. Однако поле сообщения всегда исчезает, если щелкнуть все остальное. Можете ли вы помочь исправить это?
  • 0
    Какие поля сообщений и как они точно исчезают?
Показать ещё 3 комментария
0

Вы можете попробовать под кодом:

Рабочий голос

$('input, textarea').focus(function(){
      $(this).prev('label').hide();
});
Поделиться
  • 0
    Этот заставил исчезнуть все ярлыки, прежде чем я что-то нажал. Я имею в виду, что технически это шаг в правильном направлении, но все же не по щелчку.
  • 0
    Работаю на меня ...
Показать ещё 2 комментария
0

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

$('input, textarea').keyup(function(){ 
 if($(this).val()=="")
      $(this).prev('label').show();
 else
      $(this).prev('label').hide();
});

Рабочая демонстрация

Поделиться
  • 0
    Я попробовал ваш код, но, к сожалению, без изменений.
  • 0
    @LauraSchoebel: вы пытались вставить в него текст.
0

Это то, что я придумал. Я предполагаю, что вы пытаетесь скрыть метку, когда существует значение, и если оно не существует, оно снова отображается.

Это не зависит от вашей структуры HTML, которая хороша, если вы не имеете дело с последовательной разметкой.

var $inputs = $(':input'), 
    $labels = $('label');

$inputs.on('input blur focus', function () {

  var $input = $(this),
      value = $input.val(),
      id = $input.attr('id'),
      $label; 

  $label = $labels.filter(function(){
    return $(this).attr('for') === id; 
  });

  $label.toggle(value.length === 0);

}).trigger('input');

и вот небольшая демонстрация: http://jsbin.com/jigucuna/4/edit?html,js,output

PS: Возможно, вы захотите также изучить атрибут placeholder.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню