使用 keypress() 使用 jQuery 发送表单答案

【问题标题】：Send form with jQuery using keypress()使用 keypress() 使用 jQuery 发送表单
【发布时间】：2012-04-01 19:04:12
【问题描述】：

我目前所拥有的：

我在 PHP 中有一个包含以下内容的表单：

<input type="submit" id="0" name="0" value="This button">
<input type="submit" id="1" name="1" value="This button">
<input type="hidden" id="response" name="response" value="150">

问题：

我想将响应值与 name=1 或 name=0 一起发送，具体取决于用户提交的按钮。但是，这应该使用键盘字母 A 和 S 来完成。如果用户按下字母 A，则应提交值 0，如果按下 S，则应发送值 1。

jQuery 代码：

$(document).ready(function()
{       
    // listens for any navigation keypress activity
    $(document).keypress(function(e)
    {
        switch(e.which)
        {
            // user presses the "a"
            case 97:    submitViaKeypress("0");
            break;  

            // user presses the "s" key
            case 115:   submitViaKeypress("1");
            break;
        }
    });
});

// shows a given element and hides all others
function submitViaKeypress(element_id)
{
    var response        = $('#response').attr('value');

    $.ajax({
        type: "POST",
        url: "initiate.php",
        data: "response=" + response + "&" + element_id + "=" + element_id
    });
}

目标：

“initiate.php 接收两个 POST 变量（响应和 0 或 1）。

【问题讨论】：

标签： php jquery forms keypress

【解决方案1】：

听起来你想要做的是：

<form id="key_form" action="initiate.php" method="POST">
  <p>Press A or S</p> 
  <input type="hidden" id="key" name="key" value="">
  <input type="hidden" id="response" name="response" value="150">
</form>

还有

$(document).keypress( function( e )
{
  if ( e.which == 97 ) 
  { 
    $("input#key").val( 1 ); 
    $("form#key_form").submit();

  } else if (e.which == 115) 
  { 
    $("input#key").val( 2 ); 
    $("form#key_form").submit();
  }
}

【讨论】：

我尝试了您的代码，但它没有响应键 A 或 S。虽然我看到代码看起来正确，但不确定是什么问题。
我在“data:”开头的行上有一个分号，现在试试吧。
您必须更具体。我不明白什么不起作用。它对我来说很好：jsfiddle.net/DTWF6/1
没有提交表单（当按下 A 或 S 时）并且没有重新加载按钮所在的页面。
所以，关于 ajax 的事情是正在发送信息。它旨在发送信息而无需重新加载页面。如果您想根据按下的键向页面添加信息，请尝试 $("input#my_hidden_input").val(e.which)。如果您需要使用 javascript 提交表单，请尝试 $("#my_form").submit()。这两个功能应该可以做你需要的。

【解决方案2】：

我不确定这是否会导致 jQuery 'bork'...但看起来您正在将 POST 数据作为 GET 数据发送。

data: "response=" + $('#response').attr('value') + "&key=" + e.which;

如果您尝试使用 $_POST['response'] 在initial.php 中查找这些变量，我想除非 jQuery 知道神奇地将这些变量转换为 post 变量，否则它将无法找到它们。

0 或 1 的 post 变量是否也需要命名为 0 或 1？根据变量的设置来更改变量名有点奇怪。因此，出于本示例的目的，我将变量名称更改为 keyPressed。即（keyPressed = 0 或 keyPressed = 1）。

// shows a given element and hides all others
function submitViaKeypress(element_id)
{
   var response = $('#response').attr('value');

   $.ajax({
      type: "POST",
      url: "initiate.php",
      data: {response:response, keyPressed: element_id}
   });
 }

现在在您的initial.php 文件中使用$_POST 变量获取这些变量。

   $response = $_POST['response'];
   $keyPressed = $_POST['keyPressed'];

【讨论】：

按A或S键还是不提交表单。不知道是什么原因，但我很急于找出问题所在。
您确定按键被识别为您绑定按键的方式吗？试试 alert('keypressed'+ e.which);以确保它听到按键。如果这有效，请在 submitViaKeyPress() 方法的开头添加一个 alert() 以确保调用该方法 alert('submit via key press called with element: '+ element_id);
我刚刚意识到您没有为您的 ajax 帖子定义成功属性。 ajax发布之后应该发生什么？目前您尚未定义任何操作，因此可能看起来没有发布任何内容。你能帮我描述一下你期望它应该如何运作吗？
我想发送页面的形式，响应和按键。表单如下所示：
我知道成功属性应该提醒用户一些反馈，但这不是必需的。我希望 Jquery 做的就是在按下 A 或 S 键时发送带有两个 POST 变量的表单。