Форма входа в Javascript не отправляется, когда пользователь нажимает Enter - PullRequest
Новая
       23

Форма входа в Javascript не отправляется, когда пользователь нажимает Enter

11 голосов
/ 27 октября 2008

Я работаю над простым входом в JavaScript для сайта, и придумала это: 

<form id="loginwindow">
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
  <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
  <input type="button" value="Check In" name="Submit" onclick=javascript:validate(text2.value,"username",text1.value,"password") />
</p>

</form>
<script language = "javascript">

function validate(text1,text2,text3,text4)
{
 if (text1==text2 && text3==text4)
 load('album.html');
 else 
 {
  load('failure.html');
 }
}
function load(url)
{
 location.href=url;
}
</script>

... что работает, за исключением одного: нажатие клавиши ввода для отправки формы ничего не делает. У меня такое ощущение, что я использовал "onclick", но я не уверен, что использовать вместо этого. Мысли? * * 1004

Хорошо, да, так что я хорошо понимаю, насколько это ненадежно с точки зрения безопасности. Это не для чего-то особо секретного, так что это не очень большая проблема, но если вы, ребята, могли бы уточнить ваши мысли с помощью кода, я хотел бы увидеть ваши идеи. код, который я перечислил, является буквально всем, с чем я сейчас работаю, поэтому я могу начать с нуля, если это будет необходимо.

Ответы [ 7 ]

30 голосов
/ 27 октября 2008

Здесь обсуждается сразу несколько тем. Попробуем уточнить.

1. Ваш непосредственный интерес:

( Почему кнопка ввода не работает при нажатии ENTER? )

Используйте кнопку типа submit . 

<input type="submit".../>

.. вместо 

<input type="button".../>

Ваша проблема не имеет ничего общего с использованием атрибута onclick . Вместо этого вы не получаете желаемого поведения, потому что вы использовали тип ввода button , который просто не ведет себя так, как кнопки отправки.

В HTML и XHTML для некоторых элементов есть поведение по умолчанию. Кнопки ввода на формах часто имеют тип «отправить». В большинстве браузеров кнопки «отправить» по умолчанию срабатывают при нажатии клавиши ВВОД с сфокусированного элемента в том же элементе формы . «Кнопка» типа ввода нет. Если вы хотите воспользоваться преимуществами этого поведения по умолчанию, вы можете изменить тип ввода на «отправить».

Например: 

<form action="/post.php" method="post">
    <!-- 
    ...
    -->
    <input type="submit" value="go"/>
</form>

2. Проблемы безопасности:

@ Ady упомянул проблему безопасности. Есть целый набор проблем безопасности, связанных с выполнением входа в систему в javascript . Вероятно, они находятся за пределами домена этого вопроса , тем более что вы указали, что вас это не особо беспокоит, и тот факт, что ваш метод входа в систему фактически устанавливал для location.href Новая HTML-страница (указывающая на то, что у вас, вероятно, нет реального механизма безопасности).

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

3. Другие вопросы:

Вот быстрая очистка вашего кода, которая просто следует некоторым рекомендациям. Это не решает проблему безопасности, о которой упоминали люди. Вместо этого я включаю это просто, чтобы проиллюстрировать некоторые здоровые привычки . Если у вас есть конкретные вопросы о том, почему я написал что-то определенным образом, не стесняйтесь спрашивать. Кроме того, просмотрите стек для связанных тем (поскольку ваш вопрос, возможно, уже обсуждался здесь).

Главное, на что нужно обратить внимание, - это удаление атрибутов события (onclick = "", onsubmit = "" или onkeypress = "") из HTML. Они принадлежат javascript, и рекомендуется хранить события javascript вне разметки. 

<form action="#" method="post" id="loginwindow">
    <h3>Login to view!</h3>
    <label>User ID: <input type="text" id="userid"></label>
    <label>Password: <input type="password" id="pass"></label>
    <input type="submit" value="Check In" />
</form>

<script type="text/javascript">
window.onload = function () {
    var loginForm = document.getElementById('loginwindow');
    if ( loginwindow ) {
        loginwindow.onsubmit = function () {

            var userid = document.getElementById('userid');
            var pass = document.getElementById('pass');

            // Make sure javascript found the nodes:
            if (!userid || !pass ) {
                return false;
            }

            // Actually check values, however you'd like this to be done:
            if (pass.value !== "secret")  {
                location.href = 'failure.html';
            }

            location.href = 'album.html';
            return false;
        };
    }
};
</script>
1 голос
/ 15 мая 2017

Поместите скрипт прямо в ваш HTML-документ. Измените значение onclick с помощью функции, которую вы хотите использовать. Сценарий в html сообщит форме для отправки, когда пользователь нажимает клавишу ввода или нажимает кнопку отправки. 

 <form id="Form-v2" action="#">

<input type="text" name="search_field"  placeholder="Enter a movie" value="" 
id="search_field" title="Enter a movie here" class="blink search-field"  />
<input type="submit" onclick="" value="GO!" class="search-button" />        
 </form>

    <script>
    //submit the form
    $( "#Form-v2" ).submit(function( event ) {
      event.preventDefault();
    });
         </script>
1 голос
/ 27 октября 2008

это потому, что это не отправка формы, поэтому нет никакого события, которое будет вызвано, когда пользователь нажимает ввод. Альтернативой вышеупомянутым параметрам отправки формы может быть добавление прослушивателя событий для формы ввода, чтобы определить, нажал ли пользователь ввод. 

<input type="password" name="text1" onkeypress="detectKey(event)">
1 голос
/ 27 октября 2008

Вместо используйте . Вы можете поместить свой проверочный код в форму обработчика отправки:

0 голосов
/ 27 октября 2008

Конечно, это слишком небезопасно, поскольку каждый может взломать его за секунду ...

- только псевдобезопасный способ делать js-логины: 

<form action="http://www.mySite.com/" method="post" onsubmit="this.action+=this.theName.value+this.thePassword.value;">
  Name: <input type="text" name="theName"><br>
  Password: <input type="password" name="thePassword"><br>
  <input type="submit" value="Login now">
</form>
0 голосов
/ 27 октября 2008

Может быть, вы можете попробовать это: 

<form id="loginwindow" onsubmit='validate(text2.value,"username",text1.value,"password")'>
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
   <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
   <input type="submit" value="Check In"/>
</p>

</form>

Как уже отмечали другие, есть другие проблемы с вашим решением. Но это должно ответить на ваш вопрос.

0 голосов
/ 27 октября 2008

My Thought = Массивная дыра в безопасности. Любой может просмотреть имя пользователя и пароль.

Более актуально для вашего вопроса: - У вас происходит два события.

  1. Пользователь нажимает кнопку.
  2. Пользователь нажимает ввод.

Клавиша ввода отправляет форму, но не нажимает кнопку.

Поместив код в метод onsubmit формы, код будет выполняться при отправке формы Изменяя тип ввода кнопки для отправки, кнопка будет отправлять форму так же, как и кнопка ввода.

Ваш код будет работать для обоих событий.

...