Как изменить видимость тега <div>, используя тег <form>и JavaScript для «фиктивного» входа?

Question

У меня есть страница main.html, у меня есть этот код в теге body:

   <form method="post">
   <p>Username: <input type="text" id="txt1" /></p>
   <p>Password: <input type="password" id="pwd1" /><br/></p>     
      <p>
          <input onclick ="checkAdmin()" class = "login_button" type="submit" 
          name="btn1" value="Login" />
       </p>
   </form>

во внешнем файле .js: функция checkAdmin () {

document.getElementById("private_content").style.visibility="visible";

}

ву меня есть CSS-файл:

 .private_content {
         visibility: hidden
  }

Я хочу изменить видимость на видимость, когда пользователь нажимает кнопку «Войти».проблема в том, что когда я нажимаю на кнопку входа в систему, личная часть отображается на мгновение, а затем исчезает.

Кстати, есть ли список всех общих функций JavaScript?я не нашел подходящего для начала ??

РЕДАКТИРОВАТЬ - следующий код работал для меня:

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

, это та же идея.

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide

  function onlyHeader(){
         $("div").hide();
        $("div#login").show();
  }

$(document).ready(function(){
  onlyHeader();
  $("#login_button").click(function(){
    var user = $("#username").val();
    var pass = $("#password").val();
    var ret = checkUser(user,pass);

    if (ret) {
        $("div").show();
        $("div#login").hide();
    }

    else {

        //user is not authorized 

    }


    });

});

---

ПРИМЕЧАНИЕ: Выне проверяйте и не храните пароль на стороне клиента.На стороне сервера вы проверяете аутентификацию и сохраняете только хэш пароля.

Answer 1

Я хочу изменить видимость на видимость, когда пользователь нажимает кнопку «Войти».

Сделайте это на стороне сервера.Если пользователь вошел в систему, тогда не показывать форму.

проблема заключается в том, что когда я нажимаю на кнопку входа в систему, личная часть отображается на мгновение, а затем исчезает.

Вот что происходит:

1. Вы модифицируете DOM, чтобы форма стала невидимой
2. Браузер отправляет форму (поскольку нет атрибута action, он восстанавливает ошибкуи использует текущий URI в качестве action).Существуют различные способы остановить поведение по умолчанию, когда вы присоединяете к чему-либо обработчик событий, но вы не используете ни один из них.
3. Браузер загружает новую страницу, идентичную старой, сDOM возвращается в исходное состояние (с видимой формой)

Как только вы обработали данные формы (чтобы определить, верны ли учетные данные, и войдите в систему, если они есть), тогда используйте "вошел в "состояние на сервере, чтобы решить вообще не включать разметку формы на странице.Здесь нет необходимости (или выгоды) использовать JS.

Кстати, есть ли список всех распространенных функций JavaScript?

См. Содержимое для разработчиков Mozilla

Я не нашел подходящего для начала ??

W3C представляет введение в веб-стандарты , включающее в себя некоторый контент JS.

Answer 2

выглядит намного приятнее и удобнее в использовании jQuery. Вот пример, который делает то, что я хотел сделать, только с тегом <p>, та же идея с <div>.

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide

  function onlyHeader(){
             $("div").hide();
        $("div#login").show();
  }

$(document).ready(function(){
      onlyHeader();
      $("#login_button").click(function(){
        var user = $("#username").val();
        var pass = $("#password").val();
        var ret = checkUser(user,pass);

    if (ret) {
        $("div").show();
        $("div#login").hide();
    }

    else {

        //user is not authorized 

    }


});

Answer 3

это хороший вопрос, и то, что вы спрашиваете, очень часто, вы можете попробовать это редактирование вашего кода

<script type="text/javascript">
<!--
   function checkAdmin(){
    document.getElementById("private_content").style.visible="false";
    }
-->
</script>

    <div id="private_content">
     <form method="post">
       <p>Username: <input type="text" id="txt1" /></p>
       <p>Password: <input type="password" id="pwd1" /><br/></p>     
          <p>
              <input onclick ="checkAdmin()" class = "login_button" type="submit" 
              name="btn1" value="Login" />
           </p>
       </form>
    </div> 

вам нужно иметь область и тег, который поддерживает видимое и не видимое. Я использовал div с идентификатором private_content, что было бы невозможно без этого идентификатора, если вы хотите, чтобы он отображался невидимым при нажатии. После проверки входа в систему вы можете сделать наоборот. сделав другую функцию с visible = true