CTRL + S提交表单和所有输入

时间:2011-08-26 13:15:04

标签: jquery forms

我有一个我在CMS中使用的表单,我想添加额外的打开以在按键上保存表单:“Ctrl + S”

这适用于除提交按钮之外的所有输入都没有被发送,这个简单的例子显示了我的意思:

<?php 
if(isset($_POST['save'])){
    die('save= ' . $_POST['save']);
}
?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">
        html { height: 100%; }
        body {
            color: #262626;
            background: #f4f4f4;
            font: normal 12px/18px Verdana, sans-serif;
            height: 100%;
        }
        #container {
            width: 760px;
            margin: 0 auto;
            padding: 10px 60px;
            border: solid 1px #cbcbcb;
            background: #fafafa;
            -moz-box-shadow: 0px 0px 10px #cbcbcb;
            -webkit-box-shadow: 0px 0px 10px #cbcbcb;

            min-height: 100%;
            height: auto !important;
            height: 100%;
        }

    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
    (function($){
        $(document).ready(function(){   

            // Save Form
            $(window).keypress(function(event) {
                if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true;
                $("#container form").submit();
                event.preventDefault();
                return false;
            });

        });
    })(jQuery);
    </script>
</head>

<body>
    <div id="container">

        <form action="" method="post">
            <label for="">Name</label>
            <input type="text=" name="name" value="" />

            <input name="save" type="submit" value="Save" />
            <input name="create" type="submit" value="Create" />

        </form>

    </div>
</body>
</html>

3 个答案:

答案 0 :(得分:10)

submit按钮的值仅包含在请求中,如果它是点击的submit按钮。

因为您直接提交表单(使用JS),所以您没有点击提交按钮,因此没有提交。

不要在表单上调用.submit(),而是尝试在要包含的提交按钮上调用.click()

$(window).keypress(function(event) {
    if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) return true;
    $("#container form input[name=save]").click();
    event.preventDefault();
    return false;
});

答案 1 :(得分:3)

尝试:

if($("#container form :submit:first").length)
{
   $("#container form :submit:first").click();
}
else
{
  $("#container form").submit();
}

它会触发点击第一个提交按钮(如果有)

答案 2 :(得分:1)

表单没有设置操作值,并且有多个提交输入。

多个提交可能中断.submit()但我不这么认为 - 我认为没有动作发送表单就是为什么它似乎什么都不做。

编辑/更正:

自从发布这个答案后我已经了解了一些事情(感谢@JohnMagnolia),所以请允许我纠正自己:

实际上HTML 4中允许使用空操作属性,但HTML5中不允许这样做。在大多数情况下,空操作属性将导致表单提交到当前URL,包括 GET参数。多个提交按钮不是问题而不是代码不起作用的原因,请参阅@Matt的答案以获得正确的答案。