Formular wird beim Drücken der Eingabetaste nicht gesendet

Question

Ich habe den folgenden HTML/JS/jQuery Code. Dieser Code stellt ein Anmeldeformular dar, das dem Benutzer modal präsentiert wird, um ihm die Anmeldung zu ermöglichen. Das Problem ist, wenn ich die Eingabetaste drücke, scheint das Formular das Ereignis "onsubmit" nicht auszuführen. Wenn ich auf die Schaltfläche am unteren Ende des Formulars klicke (die praktisch den gleichen Code wie das onsubmit-Ereignis enthält), funktioniert es einwandfrei. Ich frage mich, ob mir jemand sagen kann, warum dieses Formular nicht übermittelt wird ? Für jede Hilfe wäre ich dankbar.

jQuery Code zum Anzeigen des Login Modals:

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-Code

<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-Aufruf

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;
 }

Answer 1

Ich kämpfte mit dem gleichen Problem; eines meiner Formulare wurde beim Drücken von "Enter" in den Textfeldern ohne Probleme übermittelt; ein anderes, ähnliches Formular auf derselben Seite würde überhaupt nicht übermittelt, für das Leben von mir.

Keines der beiden Felder hatte eine Übermittlungsschaltfläche, und keines der beiden Felder verwendete Javascript, um eine Übermittlung durchzuführen.

Ich habe festgestellt, dass, wenn es nur ein einziges Textfeld in einem Formular gibt, das Drücken der Eingabetaste im Textfeld automatisch zum Absenden führt; wenn es jedoch mehr als ein (normales, d. h. einzeiliges) Texteingabefeld gibt, geschieht nichts, es sei denn, es gibt auch eine Art Schaltfläche "Absenden".

Offenbar ist dies Teil der HTML 2.0-Spezifikation :

Wenn es in einem Formular nur ein einzeiliges Texteingabefeld gibt, sollte der Benutzeragent die Eingabe in dieses Feld als Aufforderung zum Absenden des Formulars akzeptieren.

Eine alte, aber offenbar immer noch gültige und interessante weitere Diskussion hier .

... offensichtlich als bequeme Möglichkeit gedacht, einfache Abfragen zu übermitteln, aber das Risiko zu verringern, dass ein komplexes Formular beim Versuch, es auszufüllen, vorzeitig abgeschickt wird. Zahlreiche Browser-Implementierer (z.B. Netscape, Opera, verschiedene Versionen von Lynx,...) folgten diesem Rat, wenn auch anscheinend mit leicht unterschiedlichen Interpretationen.

Ich habe ein JSFiddle zur Demonstration . Soweit ich das beurteilen kann (ich teste nur faul mit Chrome), wird das Formular auf "Enter" abgeschickt, wenn es nur ein Textfeld gibt, oder wenn es eine Schaltfläche zum Abschicken gibt, auch wenn sie ausgeblendet ist.

(EDIT: Ich habe später herausgefunden, dass es auch zu funktionieren scheint, wenn es andere Eingabefelder gibt, die keine normalen, einzeiligen Texteingaben sind ... z.B. Textareas, Selects, etc. -- Dank an @user3292788 für diese Information. Ich habe das JSFiddle aktualisiert, um dies zu berücksichtigen).

<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>

Answer 2

Sie haben zwei Möglichkeiten:

1. Erstellen Sie einen Event-Handler für die Eingabetaste und fügen Sie ihn zu Ihren Bindungen hinzu.
2. Verwenden Sie eine <input type=submit> in das Formular einfügen, wodurch das gewünschte automatische Verhalten der Eingabetaste erreicht wird.

Answer 3

Es kann auch von einer Javascript-Bindung an eine <button> in Ihrem Formular. Zum Beispiel, wenn Sie haben

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

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

Ihre Eingabetaste wird irgendwo von der return false und Ihr Formular wird nicht mit der Eingabetaste abgeschickt. Der korrekte Weg ist, anzugeben, dass die <button> ACT als Taste. Auf diese Weise :

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

und lassen Sie die return false die Sie dort platziert haben, um zu verhindern, dass diese Schaltfläche ein Formular absendet ;-)

Um des Lernens willen, <button> Typ ist standardmäßig submit. Wenn Sie möchten, dass sie als Steuerelement für Ihr Formular fungieren, müssen Sie den type="button" oder type="reset" Siehe w3.org darüber

Answer 4

Nur für den Fall, dass jemand denselben Fehler macht wie ich und ebenfalls hier nach einer Antwort sucht:

Wenn Sie eine zwei (oder mehr) Übermittlungsschaltflächen 1 in Ihrem Formular, wird durch Drücken der Eingabetaste nur das erste Absenden ausgelöst und nicht das zweite.

---

1 wie von @paul-daoust in seinem Kommentar zur Antwort von @g-d-d-c angegeben: Beide <input type=submit> と <button type=submit> funktioniert wie eine Schaltfläche zum Abschicken

Answer 5

Wenn Sie die korrekte input-submit-Schaltfläche haben, aber das (Klick-)Ereignis auf dieser Schaltfläche verwenden, wird es bei der Eingabe nicht ausgelöst. Das Formular wird abgeschickt, aber das Klick-Ereignis auf der Schaltfläche wird natürlich nicht ausgelöst. Putting Funktionalität zum Formular selbst und es ist Submit-Ereignis wird es funktionieren.