Как изменить видимость тега с помощью тега и JavaScript для "фиктивного" входа?

У меня есть страница 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? я не нашел хорошего для себя. с чего начать??

EDIT-для меня работал следующий код:

Выглядит гораздо приятнее и удобнее использовать 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 

    }


    });

});

Примечание: Вы не проверяете и не храните пароль на стороне клиента. На стороне сервера вы проверяете аутентификацию и сохраняете только хэш о пароле.

3 2
javascript html css jquery client-side

3 ответа:

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

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

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

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

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

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

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

Смотрите контент разработчика Mozilla

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

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

3

Выглядит гораздо приятнее и удобнее использовать 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 

    }


});
1

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

<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 не было бы возможно без этого идентификатора, где u хочет, чтобы он стал невидимым по щелчку мыши u может сделать противоположное после проверки логина, сделав другую функцию с visible=true

-1