Форма, не отправляющая при нажатии клавиши ввода

23

У меня есть следующий код HTML / JS / jQuery. Этот код представляет собой регистрационную форму, которая предоставляется пользователю в режиме реального времени, чтобы позволить им войти в систему. Проблема в том, что когда я нажимаю Enter, форма, похоже, не выполняет событие onsubmit. Когда я нажимаю кнопку в качестве нижней части формы (которая имеет практически тот же код, что и событие onsubmit), она отлично работает. Мне интересно, может ли кто-нибудь сказать мне, почему эта форма не отправляется?? Любая помощь будет оценена.

Код jQuery для показа модальности входа:

showDivAndFocus('loginModal','loginaccount'); 

function showDivAndFocus(v,t){

    if (api)
        if (api.isOpened)
            api.close();

    api = $('#'+v).overlay({
        mask: {color: '#000000'}, 
        top:'0px',
        api: true,
        autoScrollToActive: false,
        autoScrollOffset: 0 
    }).load();

    document.getElementById(t).focus();
}

Код HTML

<div class="modal" id="loginModal">
    <h2>User Login</h2>
    <br />

    <form action="javascript:void(0);" onsubmit="return(doLogin());"  name="loginForm" id="loginForm">
        <table width="95%" cellpadding="4" cellspacing="4">
        <tr>
        <td class="regw" align="left"><b>Account Number:</b></td>
        <td class="regw" align="left"><input type="text" maxlength="10" size="10" name="loginaccount" id="loginaccount" /></td>
        </tr>

        <tr>
        <td class="regw" align="left"><b>Username:</b></td>
        <td class="regw" align="left"><input type="text" maxlength="20" size="20" name="loginusername" id="loginusername" /></td>
        </tr>

        <tr>
        <td class="regw" align="left"><b>Password:</b></td>
        <td class="regw" align="left"><input type="password" maxlength="20" size="20" name="loginpassword" id="loginpassword" /></td>
        </tr>  

        <tr>
        <td class="regw" align="left"><b>Remember Me:</b></td>
        <td class="regw" align="left"><input type="checkbox" name="loginremember" id="loginremember" /></td>
        </tr>  

        <tr><td colspan="2">
            <div>  
                <center>
                    <table><tr><td width="50" valign="middle">
                        <div id="loginLoading" style="height:24px;width:24px;"></div>   
                    </td><td>
                        <button onclick="doLogin();" type="button" class="ok">Submit</button>
                    </td><td>
                        <button onclick="api.close();" type="button" class="cancel">Cancel</button>
                    </td><td width="50">&nbsp;</td></tr></table>
                </center>
            </div>
        </td></tr> 
        </table>
    </form>
</div>

AJAX Call

function doLogin(){
    var ajax = getXmlObject();
    var f = getFormVariables();
    var url= '/login.php?f=' + encodeURIComponent(f);
    if (ajax.readyState == 4 || ajax.readyState == 0) {
        ajax.open("POST", url, true);
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4) {
                var a = ajax.responseText;
                if (a=="OK"){...} else {...}
            }
        };
        ajax.send(null);
      }
      return false;
 }
    
задан Dutchie432 16.11.2010 в 17:53
источник

3 ответа

21

У вас есть два варианта:

  1. Создайте обработчик событий для кнопки ввода и добавьте его в свои привязки.
  2. Использовать <input type=submit> в форме где-нибудь, что является тем, что получает автоматическое поведение Enter Key, которое вы после.
ответ дан g.d.d.c 16.11.2010 в 17:55
  • Я не верю, что это правда. Форма должна быть представлена ​​в любом случае при нажатии клавиши ввода. У меня есть другая форма, делающая практически то же самое. Это не отображается «модально», и это единственное реальное различие, которое я вижу. Конечно, однако, ни одна из форм не имеет кнопки отправки или событий onkeyX. –  Dutchie432 16.11.2010 в 17:58
  • Я бы пошел на <input type = submit>, потому что он более семантически корректен. –  Timo Willemsen 16.11.2010 в 17:58
  • @ Dutchie432 - Как я понимаю (и я бы хотел, чтобы кто-то меня исправил, если я ошибаюсь), поведение, которое вы получаете в другой форме, либо ошибочно, либо как-то фокусируется на передаче одной из ваших перед нажатием кнопки ввода. Формы HTML допускаются только через ключ ввода при использовании <input type = submit>. Если вы на самом деле сосредоточены на кнопке, возможно, клавиша ввода «щелкнет» ее для вас. –  g.d.d.c 16.11.2010 в 18:24
  • Просто примечание: если форма не имеет кнопки отправки (либо <input type="submit" /> или <button type="submit"> </button>), она будет автоматически отправляться на Enter когда у него есть один текстовый ввод. Формы с кнопками отправки должны отправлять на Enter, независимо от количества текстовых вводов (хотя это не происходит на моей форме прямо сейчас, и я не знаю почему). Кроме того, если ваш элемент <button> не имеет типа, он будет действовать как кнопка отправки в более старых версиях IE. –  Paul d'Aoust 11.03.2014 в 21:19
  • Чтобы прояснить комментарий, сделанный @ Pauld'Aoust, [Enter] будет работать только в том случае, если есть только один ввод текста, а не один или несколько. –  Martin 28.08.2016 в 17:40
Показать остальные комментарии
22

Я боролся с этой же проблемой; одна из моих форм отправляла при нажатии «enter» в текстовых полях без проблем; другая, аналогичная, форма на той же странице не представила бы вообще, для моей жизни.

Ни одно поле не имело кнопки отправки, и ни один из них не использовал javascript для отправки.

Я обнаружил, что когда в форме есть только одно текстовое поле, нажатие «вводить» в текстовое поле будет автоматически отправляться; но если имеется более одного (регулярного (то есть однострочного) ввода текста), он ничего не делает, если не существует какой-либо кнопки «отправить».

По-видимому, это часть спецификации HTML 2.0 :

  

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

Старое, но, по-видимому, все еще актуальное и интересное, дальнейшее обсуждение здесь .

  

... очевидно, подразумевается как удобный способ подачи простых запросов, но уменьшает риск в сложной форме досрочного представления его при попытке его заполнить. Многочисленные разработчики браузеров (например, Netscape, Opera, различные версии Lynx, ...) последовали за этим советом, хотя, похоже, это несколько разные интерпретации.

Я сделал JSFiddle, чтобы продемонстрировать . Насколько я могу судить (лениво просто тестирование с помощью Chrome), форма будет отправляться на «Ввод», если есть только одно текстовое поле, или если есть кнопка отправки, даже если она скрыта.

(EDIT: позже я обнаружил, что он также работает, если есть другие поля ввода, которые не являются регулярным однострочным текстовым вводом ... например, текстовыми полями, выбирает и т. д. - благодаря @ user3292788 для эта информация. Обновлен JSFiddle, чтобы отразить это).

<h2>Form with one text field only, no submit button</h2>
<p>Seems to submit automatically when pressing 'enter' in the first text field</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div>
  </div>
</form>

<h2>Form with two text fields, no submit button</h2>
<p>Won't submit when pressing 'enter' in the forms ...</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a></div>
  </div>
</form>



<h2>Form with two text fields and a submit button ...</h2>
<p>Now it submits with 'enter' key</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
      <input type="submit" />
    </div>
  </div>
</form>

<h2>Form with two text fields and a HIDDEN submit button ...</h2>
<p>Seems to work, even with submit hidden ...</p>
<form action="" method="post">
  <div>
    <label for="pt-search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
      <input type="submit" />
    </div>
  </div>
</form>


<h2>Form with no action or method attribute, HIDDEN submit button ...</h2>
<p>Even this seems to work.</p>
<form>
  <div>
    <label for="search-input">Search</label>
    <div>
      <input name="term" type="text" placeholder="Example: budapest amsterdam" />
      <input name="term2" type="text" placeholder="Example: budapest amsterdam" /> <a href="#pt-search-bar">cancel</a>
      <input type="submit" />
    </div>
  </div>
</form>

<h2>Form with multiple fields, but only one text input, no submit button.</h2>
<p>This seems to work as well.</p>
<form action="" method="post">

  <p><input type="text" ></p>

  <textarea name="" id="" cols="30" rows="10"></textarea>

  <p>
    <select name="" id="">
      <option value="">Value</option>
    </select>
   </p>
</form>
    
ответ дан Aaron Wallentine 06.02.2016 в 01:25
  • Я думаю, что вы пропустили одноточечную точность ввода текста. Форма даже представляется с несколькими полями, если другие поля не являются как однострочное текстовое поле ввода. Вы можете проверить этот быстрый JSFiddle. Кстати, ваш ответ правильный и помог мне решить мою проблему. –  user3292788 31.05.2016 в 02:54
  • @ user3292788 о, хорошо. Да, я этого не заметил, потому что мои были обычными текстовыми полями ввода. Не думал, чтобы попробовать другие типы полей. : ) Спасибо за дополнительную информацию. Я обновил ответ, чтобы отразить это. –  Aaron Wallentine 12.07.2016 в 01:48
4

Он также может быть связан с привязкой javascript к <button> в вашей форме. Например, если у вас есть

<button id='button'>Reset</button>
<span id="textToReset">some info</span>

<script type="text/javascript">
$('#button').bind('click', function(){  
    $('#textToReset').text('');     
    return false;
})
</script>

Ваша кнопка Enter будет уловлена ​​где-то return false , и ваша форма не будет отправлена ​​под клавишей Enter. Правильный способ - указать, что <button> ACT как кнопка. Таким образом:

<button id='button' type="button">Reset</button>

и снимите return false , которое вы положили туда, чтобы эта кнопка не отправила форму. ; -)

Для обучения, <button> type по умолчанию отправляет. Если вы хотите, чтобы они выступали в качестве контроля для вашей формы, вы должны указать type="button" или type="reset" См. W3.org об этом

    
ответ дан DColl 11.01.2014 в 14:46