Мне нужна помощь в моей контактной форме. Я пытаюсь удалить метки автоматически, когда пользователь нажимает кнопку в поле, но я не могу понять, как это сделать.
Это 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) всегда исчезает с любым другим, которое выбрано, и также исчезает, когда ничего не выбрано. Кто-нибудь знает, почему?
$(function() {
$('input, textarea').on('focus blur', function () {
$(this).prev().toggle();
});
});
Вы можете попробовать под кодом:
$('input, textarea').focus(function(){
$(this).prev('label').hide();
});
Попробуй это:
$('input, textarea').keyup(function(){
if($(this).val()=="")
$(this).prev('label').show();
else
$(this).prev('label').hide();
});
Это то, что я придумал. Я предполагаю, что вы пытаетесь скрыть метку, когда существует значение, и если оно не существует, оно снова отображается.
Это не зависит от вашей структуры 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
.