CODEWITHSUNDEEP
javascriptjqueryhtml
Kim Carlo
Kim Carlo

Reputation: 1223

how to prevent showing of hidden forms in a page

newbie here, I'm currently working with html forms right now. I am using Jquery to hide forms on load of the page, but some forms keep showing for some short period of time and then hides after the page loads.

here's my jquery code for hiding forms

 <script type="text/javascript" src="js/jquery1.10.2.js"></script>
 <script type="text/javascript">
    $(function(){
    $('#page1').show();
    $('#page2').hide();
    $('#page3').hide();
    $('#page4').hide();
    $('#page5').hide();
    $('#white_bg').hide();
    $('#background').hide();
    $('#bgw').hide();
    $('#bgb').hide();
    $('#aql_bgw').hide();
    $('#aql_bgb').hide();
    $('#secondary_form').hide();
    })
</script>

<!---body of the page goes here -->

I attached a picture of what happens when the page is loading enter image description here

then after some miliseconds it dissapears enter image description here

how do i make it load without showing the hidden divs and forms??

thanks

Upvotes: 0

Views: 111

Answers (4)

Adam
Adam

Reputation: 56

The issue you are having is that javascript is executed after the page loads, and the form is visible by default, until the javascript changes that.

You should not use javascript on the initial page load to hide/show anything. You'll likely need javascript elsewhere in the page, to hide and show elements as appropriate, but this shouldn't be an issue since the page will have already been loaded at that point.

The best way to approach this is with CSS. The cleanest option, in my opinion, is to define a class style in the primary .css stylesheet used to style the page. The class definition would look something like .hidden { display: none; }. With that class style defined, you can add it to any form you want hidden by default by simply adding the class="hidden" attribute to the form. (eg, <form id="page1" class="hidden">).

This can also be done inline by defining the display property in the style attribute of the html (eg, <form id="page1" style="display: none;">).

A less clean option would be to add the following CSS rule

#page2, #page3, #page4, #page5,
#white_bg, #background, #bgw, #bgb,
#aql_bgw, #aql_bgb, #secondary_form {
    display: none;
}

Upvotes: 1

Nh&#226;n Nguyễn
Nh&#226;n Nguyễn

Reputation: 132

Try this way:

document.getElementById('elemtId').style.display = 'none';

Upvotes: 0

Ari Seyhun
Ari Seyhun

Reputation: 12521

I suggest you add to the css of the forms

display: none;

Or you can add to the html part of the form something like

<form style="display: none;">

Then when you want to display the forms you just do so in javascript.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388326

What you need to do is to use css rules to hide those elements instead of using jQuery. Since your jQuery is script to hide those elements executed on dom ready event, till that is fired those elements will be displayed.

So add a class like hidden to those elements and add a css rule to set display as none(Include the rule in the header of the page so that the elements will be rendered as hidden)

.hidden {
    display: none;
}

Upvotes: 2

Related Questions