Форма JQuery CSS Видимость

Question

У меня есть форма, которая скрыта при загрузке страницы с помощью атрибута видимости CSS: hidden

Я хочу, чтобы она стала видимой при нажатии единственной кнопки на моей странице.Я пробовал множество вещей, таких как использование атрибута display вместо .show () и т. Д.

Однако, ничего из того, что я пробую, не приводит к появлению формы.* HTML

<input type="button" class="btnClick" id="btnClick" onclick="DisplayForm()"value = "Click for Receipt"/>

<form class="Border" id="myform" action="" method="get">
Enter something in the box: <br />
<input type="text" name="one" value=""/>
<br />
<input type="text" name="two" value="" />
<br />
<input type="text" name="three" value="" />
</form>

CSS

.Border
{
    visibility:hidden;
}

.btnClick
{
}

Answer 1

Получите firebug для своего браузера, чтобы получить журнал ошибок JavaScript, так как это может остановить ваш скрипт.

Если нет зарегистрированных ошибок, добавляйте вызовы предупреждений на каждом шаге вашего скрипта, чтобы проверить, есть ли тупик:

$(document).ready(function () {
alert("1");
    $('.btnClick').click(function () {
alert("2");
        $(".Border").css('visibility', 'visible');
alert("complete");
    });
});

После подсчета вы сможете узнать, какая строка кода работает некорректно. Дайте нам знать, что мы сможем помочь вам в дальнейшем.

Я бы также удалил ваш вызов onClick для DisplayForm () из вашего элемента кнопки, поскольку кажется, что его предполагаемое использование может противоречить вашему опубликованному сценарию.

Answer 2

Поскольку вы используете jQuery, вы можете использовать такие функции, как show() и fadeIn().См. Ниже:

$(document).ready(function () {
    $('.btnClick').click(function () {
        $("#myForm").show(); // or use .fadeIn();
    });
});

Затем я делаю это с помощью моего css:

#myForm{ display: none; }

Не знаю, почему ваш код не работает.Я просто упростил это;).

Вы можете попробовать удалить onclick="DisplayForm()".Это может быть причиной ошибки, если она не определена где-то еще?

Answer 3

Если вы загружаете эту часть html после загрузки страницы через какой-то AJAX-вызов, попробуйте это:

$(document).ready(function () {
    $('.btnClick').live('click', function () {
        $(".Border").css('visibility', 'visible');
    });
});

Answer 4

Это работает для меня:

Пример: http://jsfiddle.net/AWjCw/

Возможно, есть конфликт с вашим jQuery $(document).ready?