javascript表单不会从使用addEventListener捕获的转义键提交()

时间:2013-08-16 01:20:04

标签: javascript forms submit

更新 - 我在html表单中添加了以下链接。单击时,form.submit()可以正常工作。

<a href="#" onClick="post_to_url('abc');">click</a>

form.submit()仅在捕获按键时不起作用。

更新2 - 我将event.keyCode == 27更改为event.keyCode == 65,然后按'A'键,提交()将起作用。所以问题是对转义密钥有些干扰。有什么想法吗?

更新3 - 已解决 - 解决方法是在下面的代码中将keydown更改为keyup

结束更新

我的目标是捕获用户转义按键并转到新网址。我已成功捕获了转义键并调用了函数,该函数即时创建表单以使用传递的url进行提交。我已经验证了url已正确传递了al​​ert(),但表单将不会提交。我无法弄清楚哪些不起作用。提前谢谢。

捕获转义键的密钥处理程序在这里(注意:解决方案是在下面的代码中将keydown更改为keyup-我为了帖子的完整性而单独留下它):

<script type="text/javascript">
window.addEventListener("keydown", function(event) {
    // Bind to both command (for Mac) and control (for Win/Linux)
    if (event.keyCode == 27) {          
    if (document.getElementById('url')){
        path = document.getElementById('url').value;
        post_to_url(path);
    }
    }
}, false);
</script>

创建要发布的表单的功能如下:

<script type="text/javascript">
function post_to_url(path, params, method) {
method = method || "post"; // Set method to post by default if not specified.
// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var key in params) {
    if(params.hasOwnProperty(key)) {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", key);
        hiddenField.setAttribute("value", params[key]);

        form.appendChild(hiddenField);
     }
}

document.body.appendChild(form);
form.submit();
}
</script>

我要包含HTML代码以完成此示例:

<body>
    <form id = 'close' action='' method="POST">
        <input id="url" type="text" value="urlHere">
        <input type="submit" name="OK">
        <!--when clicking on this - form.submit() works as it should -->
        <a href="#" onClick="post_to_url('abc');">click</a>
    </form>
</body>

2 个答案:

答案 0 :(得分:0)

首先确保在致电params时传递post_to_url参数。这似乎不会发生在你的keydown事件处理程序中 再次检查document.getElementById('url').value的值是否指向您希望数据提交的脚本 第三,确保params参数是带成员/键的js对象。

N.B。您无需将表单添加到文档中即可提交。

编辑在通过上述检查清单后,您应该拥有以下有效的代码.....

var prm = {"ABC":"123"}//object to be submitted

function post_to_url(path, params, method) {
    method = method || "post"; // Set method to post by default if not specified.
    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);
    for(var key in params) 
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);
            form.appendChild(hiddenField);
         }
    form.submit();
}

window.addEventListener("keydown", function(event) {
    // Bind to both command (for Mac) and control (for Win/Linux)
    if (event.keyCode == 27) {          
        post_to_url("index.php",prm);//swap index.php with your url, for prm, see above
    }
}, false);

答案 1 :(得分:0)

最后,我将“keydown”更改为“keyup”。这么简单 - 花了我几个小时。最后的监听器代码如下。根据我的需要,除了url路径之外,我没有将任何参数传递给post_to_url()。您可能希望传递参数。你可以在上面看到Moje的例子。

<script type="text/javascript">
window.addEventListener("keydown", function(event) {
    // Bind to both command (for Mac) and control (for Win/Linux)
    if (event.keyCode == 27) {          
    if (document.getElementById('url')){
        path = document.getElementById('url').value;
        post_to_url(path);
    }
    }
}, false);
</script>