Question

I have a form that is hidden on page load by using CSS attribute visibility:hidden

I want it to change to visible when the only button on my page is clicked. I have tried numerous things such as using display attribute instead, .show(), etc.

However, nothing I try makes the form appear.

Script

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

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

Get firebug for your browser in order to get a log of your javascript errors, as this might halt your script.

If there is no error logged, add alert calls in every step of your script to check if there’s an impass:

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

Following the count, you’ll be able to know what line of code isn’t firing propertly. Let us know we’ll be able to help you out further.

I would also remove your onClick call to DisplayForm() from your button element as it seems that its intended use might be conflicting with your posted script.