輸入鍵提交Ajax表格

Question

我有一個非常簡單的AJAX表單，要求提供一個電子郵件地址並在提交後將其發送給我。

如何才能在按Enter鍵時提交表單？

此運行時用戶點擊提交按鈕：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#submit_btn").click(function() { 
      // Get input field values: 
      var user_email = $('input[name=email]').val(); 

      // Simple validation at client's end 
      // We simply change border color to red if empty field using .css() 
      var proceed = true; 
      if (user_email === "") { 
       $('input[name=email]').css('border-color', 'red'); 
       proceed = false; 
      } 

      // Everything looks good! Proceed... 
      if (proceed) { 
       /* Submit form via AJAX using jQuery. */ 
      } 
     }); 

     // Reset previously set border colors and hide all message on .keyup() 
     $("#contact_form input, #contact_form textarea").keyup(function() { 
      $("#contact_form input, #contact_form textarea").css('border-color', ''); 
      $("#result").slideUp(); 
     }); 
    }); 
</script> 

---

我知道這個問題已經被問過 - 我遇到麻煩keypress功能工作。

我想這無濟於事：

$("#contact_form").keypress(function (e) { 
    if ((e.keyCode == 13) && (e.target.type != "textarea")) { 
     e.preventDefault(); 
     // Get input field values 
     var user_email = $('input[name=email]').val(); 

     // Simple validation at client's end 
     // We simply change border color to red if empty field using .css() 
     var proceed = true; 

     if (user_email === "") { 
      $('input[name=email]').css('border-color', 'red'); 
      proceed = false; 
     } 

     // Everything looks good! Proceed... 
     if (proceed) { 
      /* Submit form via AJAX using jQuery. */ 
     } 
    } 
}); 

形式是#contact_form。

任何幫助將不勝感激...

Answer 1

只需綁定提交事件的形式，然後回車鍵也將工作：

$("#contact_form").submit(function (e) { 
    e.preventDefault(); 
    // Get input field values 
    var user_email = $('input[name=email]').val(); 

    // Simple validation at client's end 
    // We simply change border color to red if empty field using .css() 
    var proceed = true; 

    if (user_email === "") { 
     $('input[name=email]').css('border-color', 'red'); 
     proceed = false; 
    } 

    if (proceed) { 
     // Insert the AJAX here. 
    } 
}); 

和代碼是在這裏：http://jsfiddle.net/6TSWk/6/

Answer 2

您的if聲明兩個開括號和錯過一個右括號。另外，我會改變e.target.type。試試這個：

$("#contact_form").keypress(function (e) { 
    if ((e.keyCode == 13) && ($('input[name="email"]').is(':focus'))) { 

     e.preventDefault(); 
     //get input field values 
     var user_email = $('input[name=email]').val(); 

     //simple validation at client's end 
     //we simply change border color to red if empty field using .css() 
     var proceed = true; 

     if (user_email === "") { 
      $('input[name=email]').css('border-color', 'red'); 
      proceed = false; 
     } 
    } 
}); 

Answer 3

每fieldbox或複選框=>類keypressbutton 然後用這個替換按鍵代碼，下面添加新類：

$(document).on("keypress",".keypressbutton",function(event) { 
    var keyCode = event.which || event.keyCode; 
    if (keyCode == 13) { 
     $("#submit_btn").click(); 
     return false; 
    } 
}); 

Answer 4

您可以使用提交按鈕來代替在點擊功能上使用按鈕。 裝入validate.js文件

function validateEmail(email) 
{ 
var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ 
if (reg.test(email)) 
{ 
return true; } 
else{ 
return false; 
} 
} 

     $("#test-form").validate({ 



     submitHandler: function(form) { 
      //form.submit(); 
       var email=$("#email").val(); 

      if(email=='') 
      { 
       // Here you can type your own error message 
       $('#valid').css("display","none"); 
       $('#empty').css("display","block"); 
       return false; 
      } 
      if (!(validateEmail(email))) { 
       $('#empty').css("display","none"); 
       $('#valid').css("display","block"); 
return false; 
} 
      else { 
      $.ajax({ 
      url: "signup.php", 
      type: form.method, 
      data: $(form).serialize(), 
      success: function(response) { 


      }    
     }); 
} 
     } 
    }); 

    }); 

Answer 5

$("#myform").keypress(function(event){ 
    if(event.keycode===13){ // enter key has code 13 
     //some ajax code code here 
     //alert("Enter key pressed"); 
    } 
}); 

Answer 6

簡單的方法是這樣的：

在HTML代碼：

<form action="POST" onsubmit="ajax_submit();return false;"> 
    <b>First Name:</b> <input type="text" name="firstname" id="firstname"> 
    <br> 
    <b>Last Name:</b> <input type="text" name="lastname" id="lastname"> 
    <br> 
    <input type="submit" name="send" onclick="ajax_submit();"> 
</form> 

JS中的代碼：

function ajax_submit() 
{ 
    $.ajax({ 
     url: "submit.php", 
     type: "POST", 
     data: { 
      firstname: $("#firstname").val(), 
      lastname: $("#lastname").val() 
     }, 
     dataType: "JSON", 
     success: function (jsonStr) { 
      // another codes when result is success 
     } 
    }); 
}