Javascript几乎正常工作，但它重新加载页面？

Question

so I'm hiding items until someone puts in a secret word in a form. It actually works, but then it reloads the page. What am I missing? You can see it here: xxx under projects and the password is '--'.

This is the code I'm using:

<script language="javascript"> 
function projectsvisible() 
{ 
document.getElementById("myprojects").style.display = "block"; 
}

function projectshide() 
{
document.getElementById("myprojects").style.display = "none"; 
}

function projectsshow() 
{ 
    if(document.getElementById("password").value=="danielle") 
        {
        projectsvisible(); 
        } 
    else { projectshide(); } 

} 
</script>

Answer 1

You are using a form with a submit button. This creates and fires a synchronous page reloading Http Request. You should not use a form. Just use a normal button with an on click handler and wrap them in a div instead.

Answer 2

It's auto-refreshing due to the button type of submit . This will cause a postback to the page and refresh. There's a few workarouds:

1. Add return false; to your inline handler or function
2. Use e.preventDefault where e is event passed in to the parent function
3. Change your button type of submit to button

Answer 3

First, change <form id="projectform" method="POST" action="#" class="form-horizontal" onsubmit="return projectsshow(); return false">

to

<form id="projectform" method="POST" action="#" class="form-horizontal" onsubmit="return projectsshow();">

Then change projectsshow() function:

function projectsshow() 
{ 
    if(document.getElementById("password").value=="danielle") 
        {
        projectsvisible(); 
        } 
    else { projectshide(); }
    return false; 
} 

Answer 4

Your button is what's reloading the page. You can either use jQuery's event.preventDefault() on the button, or style a div to look like a button and do your onlick action on the button.

Answer 5

you onsubmit handler does not return false. projectsshow() does not return false. Therefore your form is not prevented from getting submitted and so the page refresh happens.

<form id="projectform" method="POST" action="#" class="form-horizontal" 
    onsubmit="return projectsshow(); return false">

Either fix projectsshow() method to return false or change onsubmit to onsubmit="projectsshow(); return false"