Vraag Formulier niet verzenden wanneer op Enter wordt gedrukt


Ik heb de volgende HTML / JS / jQuery-code. Deze code vertegenwoordigt een aanmeldingsformulier dat modaal aan de gebruiker wordt gepresenteerd zodat ze kunnen inloggen. Het probleem is dat wanneer ik op enter druk, het formulier de "onsubmit" -gebeurtenis niet lijkt uit te voeren. Wanneer ik op de knop klik als de onderkant van het formulier (die vrijwel dezelfde code heeft als de onsubmit-gebeurtenis), werkt deze perfect. Ik vraag me af of iemand me kan vertellen waarom dit formulier niet wordt ingediend ...? Alle hulp wordt op prijs gesteld.

jQuery-code om inlogmodal te tonen:

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

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

23
2017-11-16 16:53


oorsprong


antwoorden:


Je hebt twee keuzes:

  1. Maak een gebeurtenishandler voor de enter-knop en voeg deze toe aan uw bindingen.
  2. Gebruik een <input type=submit> in de vorm ergens, wat het automatische Enter Key-gedrag oplevert.

22
2017-11-16 16:55



Ik worstelde met hetzelfde probleem; een van mijn formulieren diende in wanneer ik zonder problemen op "enter" in de tekstvelden drukte; een ander, vergelijkbaar, formulier op dezelfde pagina zou helemaal niet onderwerpen aan het leven van mij.

Geen van beide velden had een verzendknop en geen van beide gebruikte Javascript om een ​​inzending in te dienen.

Wat ik heb gevonden, is dat wanneer er maar één tekstveld in een formulier staat, het drukken op 'Enter' in het tekstveld automatisch zal worden verzonden; maar als er meer dan één (regulier (dat wil zeggen enkele regel) tekstinvoer) veld is, doet het niets, tenzij er ook een soort van 'submit' knop is.

Blijkbaar is dit onderdeel van de HTML 2.0-specificatie:

Als er slechts één invoerveld met één regel in een formulier is, moet de user-agent in dat veld de invoer accepteren als een verzoek om het formulier in te dienen.

Een oude, maar blijkbaar nog steeds geldige, en interessante, verdere discussie hier.

... kennelijk bedoeld als een handige manier om eenvoudige vragen in te dienen, maar het risico op een complexe vorm te verminderen door het voortijdig in te dienen terwijl het probeert in te vullen. Talrijke browserimplementators (bijv. Netscape, Opera, verschillende versies van Lynx ,. ..) volgde dit advies, hoewel het lijkt met enigszins verschillende interpretaties.

ik maakte een JSFiddle om te demonstreren. Voor zover ik weet (lui gewoon testen met Chrome), zal het formulier op "Enter" worden ingediend als er maar één tekstveld is, of als er een verzendknop is, zelfs als deze is verborgen.

(EDIT: Later ontdekte ik dat het ook lijkt te werken als er andere invoervelden zijn die geen normale tekstinvoer met één regel zijn ... bijvoorbeeld tekstgebieden, selecties, enz. - dankzij @ user3292788 voor die informatie. Vernieuwde de JSFiddle om dit weer te geven).

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

24
2018-02-06 00:25



Het kan ook afkomstig zijn van een javascript bind naar een <button> in jouw vorm. Bijvoorbeeld, als je dat hebt gedaan

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

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

Uw Enter-knop wordt ergens door de return falseen uw formulier verzendt niet onder de Enter-toets. De juiste manier is om aan te geven dat de <button> ACT als een knop. Op deze manier:

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

en laat de return false je hebt je daar neergezet om te voorkomen dat die knop een formulier indient. ;-)

Om het te leren, <button>type is standaard verzenden. Als u wilt dat ze optreden als controle voor uw formulier, moet u het type="button" of type="reset"  Zie w3.org erover


4
2018-01-11 13:46