Question

嗨，我有形式，以下事情困扰着我：

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

提交表格有代码通过ajax提交表格，如下所示。请帮助我摆脱这种情况。

Answer 1

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

Answer 2

看看这个网站： http://tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/ 该网站说，输入密钥自动在所有浏览器中提交

Answer 3

试一下

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

文件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();
            }
        }
    });
});

通过回车键和提交按钮提交表格

3 个答案: