javascript показать скрытый элемент, когда ввод заполнен

эй, я хотел бы показать таблицу, когда пользователь заполняет вход.javascript показать скрытый элемент, когда ввод заполнен

Что у меня есть:

в <head> разделе:

<script type="text/javascript"> 

//hide initially  
$("table#mytable").hide(); 

// show function 
function showit() { 
$("table#mytable").show(); 
} 
</script>

и таблицы:

<table id="mytable"><tr><td>FOO</td><td>BAR</td></tr></table>

и форму (возможно, это важно) таблицы:

<form action="foobar.php"> 
<input name="example" onselect="showit()" /> 
<input type="submit" value="Send" /> 
</form>

Я думаю, что onselect не совершенен, но он должен сделать это в моем случае.

Указанный выше код не скрывает таблицу вообще. Я не знаю, что я сделал неправильно. Надежда some1 может найти ошибку - спасибо.

EDIT

вот решение:

head:

<script type="text/javascript"> 
function show(id) { 
    document.getElementById(id).style.display = 'block'; 
} 
</script>

и в каждом элементе, чтобы скрыть только добавить style="display: none;" и редактировать вход - добавить onkeyup="show('id') где идентификатор идентификатор элемента, чтобы скрыть например #mytable

источник

2012-06-01 andrewpo

пытался и не работать – andrewpo

пожалуйста, см обновить –

Причина, по которой она не работает, связана с тем, что вы вызываете javascript перед визуализацией элемента таблицы. Есть три способа сделать это:

// Use CSS (best): 
<table style="display:none;" id="mytable">...</table>

или

// Using DOM Load event (wait for all of the elements to render) (second best) 
$(function() { $("table#mytable").hide(); });

или

// Put your javascript at the bottom of the page instead of the head. (not preferred)

источник

2012-06-01 21:55:24 Art

Почему _not preferred_ для сценариев в нижней части страницы? [Лучшие практики для ускорения вашего веб-сайта] (http://developer.yahoo.com/performance/rules.html#js_bottom) – Andreas

попытался 1 и 2 - не работал. Я не знаю, почему. с 'display: none' Я не мог показать его, но он был скрыт правильно – andrewpo

Я использовал 1. - и нашел другой способ его изменить - я думаю, что скрыть() и показать не работает в моем случае - check edit – andrewpo

вы также можете использовать OnKeyUp и документ, готовый может помочь

$(document).ready(function() { 
$("#mytable").hide(); 
    $("#example").keyup(function (e) { 
$("#mytable").show(); 
}) 
});

jfidle http://jsfiddle.net/dznej/

источник

2012-06-01 21:58:13

onkey up кажется хорошей идеей - спасибо – andrewpo

Я скопировал точно yout jsfidle и проверил на opera и ff - не работал, я не знаю почему - может быть это вызвано настройками моего сервера? js - это язык на стороне клиента, но, возможно, что-то не так. – andrewpo

Заканчивать Скрипку я создал для вас - http://jsfiddle.net/ggJSg/

В основном есть две проблемы:

Вам нужно позвонить $("#mytable").hide(); только тогда, когда DOM готов
Используйте правильное событие (например, фокус в моем примере), чтобы вызвать отображение таблицы

источник

2012-06-01 21:59:21

Я тоже думал о фокусе, но, похоже, это не то, о чем просит ОП. Таблица должна отображаться, когда «пользователь заполняет вход». То есть когда символы вводятся в текстовое поле. –

-1

Для выполнения кода, когда DOM закончил загрузку, вам необходимо использовать функцию .ready().Тогда вы должны использовать функцию .change() для его отображения:

$(document).ready(function() { 

    // Hide initially  
    $('#mytable').hide(); 

    // When something changes in the input named `example` then show the table. 
    $("[name='example']").change(function() { 
    $('#mytable').show(); 
    }); 
});

источник

2012-06-01 22:01:01

javascript показать скрытый элемент, когда ввод заполнен

ответ

Смежные вопросы