Question

我有一个form如下：

<form onsubmit="doSomething(this.form);">
    <input type="text" name="groupName" />
    <input type="text" name="groupColour" />
</form>

现在我没有提交按钮，我知道。相反，当用户点击回车键时，我希望它触发一个功能。在此示例中doSomething。

现在在函数中我将执行一个AJAX请求以将记录插入数据库，但是我不确定如何访问在我的AJAX函数doSomething中的文本字段中输入的值

如何在提交时将表单的值传递给我的函数？

Answer 1

<强> HTML & JQuery fiddle

因为您正在使用jquery并且想要使用ajax请求，所以您可以使用keypress函数而不是表单并提交：

HTML：

<input type="text" id="groupName" />
<input type="text" id="groupColour" />

JS：

$(document).keypress(function(e) {
    if(e.which == 13) { //When you pressed enter!
        var name = $('#groupName').val();
        var color = $('#groupColour').val();

        $.post('insert.php',{name: name, color: color});
    }
});

PHP（insert.php）：

$name = $_POST['name'];  //Get name
$color = $_POST['color'];  //Get color

//Now you can use $name & $color in insert Query here

希望这有帮助。

Answer 2

尝试this它的工作原理..这很棘手： - ）

<form onsubmit="doSomething();">

    <input type="text" name="groupName" />

    <input type="text" name="groupColour" />

   <input type="submit" 
   style="position: absolute; left: -9999px; width: 1px; height: 1px;"
   tabindex="-1" />

</form>

Answer 3

不要使用onsubmit属性。 Divide your HTML and javascript并使用jQuery处理表单提交。

$("form").on('keypress', function(event){
    // if the key is "enter":
    if(event.which == 13) {
        // trigger AJAX:
        $.ajax({
            url     : 'post-page.php',
            type    : 'post',
            // serialize the form (all the form fields will be posted to PHP):
            data    : $(this).serialize(),
            success : function(response){
                // handle server response...
            }
        });
    }
});

Answer 4

这是一个简单的方法..

＆＃13;

document.onkeypress =function (e) {
    if (e.keyCode == 13) {
       alert(document.forms['myform'].elements['myinput'].value);
    }
};

＆＃13;

<body>
  <form name="myform">
    <input name="myinput" type="text" value="awesome">
    </form>
  </body>

＆＃13;

通过输入值发送到javascript函数

4 个答案: