通过输入键和提交按钮提交表单 - Submit form via Enter key and Submit button both

Submit form via Enter key and Submit button both

本文关键字：提交按钮表单输入 | 更新日期: 2023-09-27

你好，我有表格，下面的事情困扰着我:

1. Form does not submit on pressing enter. 2. When i press enter in input field then Search Now button needs to be pressed twice to search places.

表单显示如下:

<form method="POST" id="mylocform" action="">
  <h3 class="animated slideInLeft delay-2">
   <input type="text" placeholder="Start Typing Your Location" id="geocomplete" 
    style="color:black;width:100%;padding:5px;height:45px;border-radius:5px" 
    autocomplete="off" class="chkmeloc" onblur="checkmylocform()"/></h3>
 <input type="submit" class="btn btn-default btn-lg animated fadeInUpBig delay-3"
 style="color: black;background-color: #FFF;border-color: #FFF;"  
 value="Search Now!"/>
</form>

验证如下:

$(document).ready(function(){ 
  $("form#mylocform").submit(function(event) {
  event.preventDefault();
  validate();
  });
});
function checkmylocform(){
  var checkOdlen = $(".chkmeloc").val().length; 
    if(checkOdlen==0){
    $(".chkmeloc").css("border-color","#F05F68");
    $(".chkmeloc").focus();
    $(".chkmelocmess").html('<button type="submit" class="btn btn-default
     btn-lg" style="background: #FFF;color:red">
     <i class="fa fa-warning text-red"></i>
     Select Your Location</button>');
    return false;
}
else{
    $(".chkmeloc").css("border-color","#0C9");
    $(".chkmelocmess").html('<input type="submit" class="btn btn-default 
    btn-lg" style="color: black;background-color: #FFF;border-color: #FFF;"
    value="Search Now!"/>');
    return true;
}
}
function validate(){
$.each($('form :input'),function(){
    $(this).blur().change();        
});
if(!checkmylocform()){
    return false;   
}
else{
    submitform();
}
}

Submit Form有通过ajax提交表单的代码，如下所示。请帮我摆脱这个困境。

$("Your selector").keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    $(input[type = submit]).click();
    return false;  
  }
});

看看这个网站:http://tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/网站说回车键在所有浏览器中都是自动提交的

Try This

File index.html:

<form class="form-inline" action="" method="POST">
                                <input type="password" name="token" placeholder="Enter Facebook access token..." class="subscribe-email">
                                <button type="submit" class="btn">Start!</button>
                            </form>

                            <div class="success-message"></div>
                            <div class="error-message"></div>

File script.js:

$('.get_token form').submit(function(e) {
    e.preventDefault();
    var postdata = $('.get_token form').serialize();
    $.ajax({
        type: 'POST',
        url: 'assets/submit_token.php',
        data: postdata,
        dataType: 'json',
        success: function(json) {
            if(json.valid == 0) {
                $('.success-message').hide();
                $('.error-message').hide();
                $('.error-message').html(json.message);
                $('.error-message').fadeIn();
            }
            else {
                $('.error-message').hide();
                $('.success-message').hide();
                $('.get_token form').hide();
                $('.success-message').html(json.message);
                $('.success-message').fadeIn();
            }
        }
    });
});