在点击输入和点击提交按钮时提交表单数据答案

【问题标题】：Submit form data both on clicking enter and hitting the submit button在点击输入和点击提交按钮时提交表单数据
【发布时间】：2013-10-18 05:43:33
【问题描述】：

这是我的一个表格：

<form class="form-horizontal" id="login-form">
<input name="email" id="email" type="email" size="30" class="span4" placeholder="Email" style="margin-top:20px; margin-left:20px; width: 270px;"/>
<br>
<input name="passwd" id="passwd" type="password" class="span4" placeholder="Password" style="margin-top:10px; margin-left:20px; width: 270px;"/>
<br><br>
<input type="button" id="login" name="login" value="Go" class="btn btn-custom" style="width:30%; margin-left:30px; margin-top:20px"/>
 <br>
 <br>
</form>

这是我使用 JavaScript 进行的 ajax 调用，以在单击按钮时提交数据：

$('#login').click(function(){
    $.ajax({
        url:"script.php",
        type:'POST',
        dataType:"json",
        data: $("#login-form").serialize()
    }).done(function(data){
       //do domething
    });
});

如何通过按回车键并单击提交按钮来提交数据？

【问题讨论】：

检查这个：stackoverflow.com/questions/905222/…

标签： javascript jquery ajax forms

【解决方案1】：

这就是想法：

$("input").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        runAjax();
        // or
        // runSubmit();
    }
});

$('#login').click(function(){
    runAjax();
    //or 
    //runSubmit();
});

function runAjax(){
    $.ajax({
        url:"script.php",
        type:'POST',
        dataType:"json",
        data: $("#login-form").serialize()
    }).done(function(data){
       //do domething
    });
}

function runSubmit(){
    $("form").submit();
}

【讨论】：

太笼统了，无法在输入时进行按键操作，因为它会在整个页面上收集。更新解决方案以仅在表单中包含输入。

【解决方案2】：

使用On方法进行输入和点击

 $('#element').on('click keypress', function(event) {
var check = 1; // Default for Click
if (e.keyCode == 13) //When Enter Key is pressed
{
var check = 1;
 }
else
{
 var check = 0; // other keys pressed
}

if (check == 1)
{
 $.ajax({
    url:"script.php",
    type:'POST',
    dataType:"json",
    data: $("#login-form").serialize()
}).done(function(data){
   //do domething
    });
  }
         });

【讨论】：

【解决方案3】：

我已经更新了代码。创建一个函数并在文本框按键事件和识别提交按钮上调用它，然后调用函数和按钮的单击事件。

function submitLogin() {
$.ajax({
    url:"script.php",
    type:'POST',
    dataType:"json",
    data: $("#login-form").serialize()
}).done(function(data){
   //do domething
});
}

$('#email').keypress(function(e) {
if (e.which == '13') {
         submitLogin();
   }
});
$('#passwd').keypress(function(e) {
if (e.which == '13') {
         submitLogin();
   }
});
$('#login').click(function(){
    submitLogin();
});

【讨论】：

您应该更改具有 ID 的元素的选择器。 #email 和 #passwd 就足够了，前面不需要tag元素，因为每页应该只有一个id。
你可以把 if 语句放在一个函数中，传入 'e'，也可以减少一些代码。
是的，删除了#id之前的元素标签
看看这个：stackoverflow.com/questions/19297520/…

【解决方案4】：

您应该能够在电子邮件和密码字段上添加按键功能。

$('#email').keypress(function(e){
    if (e.keyCode == 13) {
    $('#login-form').submit(/*...*/);
    }
}

我给你举了一个领域的例子。

【讨论】：

【解决方案5】：

如何将输入类型改为“提交”并在表单提交中输入点击事件？

<input type="submit" id="login" name="login" value="Go" class="btn btn-custom" style="width:30%; margin-left:30px; margin-top:20px"/>

jQuery

$('#login-form').submit(function(){
    $.ajax({
        url:"script.php",
        type:'POST',
        dataType:"json",
        data: $("#login-form").serialize()
    }).done(function(data){
       //do domething
    });
});

【讨论】：