CTRL + S to submit form and all inputs

Question

I have a form that I use in my CMS that I would like to add the extra open to save the form on keypress: "Ctrl + S"

This works for all inputs apart from the submit buttons are not being sent, this simple example shows what I mean:

<?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>

In the CMS it uses this to work out if it is "save","create","delete" etc so yes it is needed to submit the submit button. — John Magnolia, Aug 26 '11 at 13:21
@Mr.Disappointment: The value of a submit button is only included in the request if it is the submit button that was clicked on. — Matt, Aug 26 '11 at 13:28

score 10 · Accepted Answer · answered Aug 26 '11 at 13:27

The value of a submit button is only included in the request if it is the submit button that was clicked on.

Because you're submitting the form directly (using JS), you're not clicking on a submit button, so none are been submitted.

Instead of calling .submit() on the form, try calling .click() on the submit button you want to be included.

$(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;
});

I did try this but with submit not click. Thanks – John Magnolia Aug 26 '11 at 14:00 — John Magnolia, Aug 26 '11 at 14:00

score 3 · Answer 2 · answered Aug 26 '11 at 13:26

3

Try:

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

It will trigger a click on the first submit-button(if available)

answered Aug 26 '11 at 13:26

Dr.Molle

116,463
16
195
201

totallyNotLizards · Answer 3 · 2013-12-13T14:03:27.533

1

The form has no action value set, and there are more than one submit inputs.

The multiple submits might break .submit() but I don't think so - I think that not having an action to send the form to is why it appears to be doing nothing.

EDIT / CORRECTION:

I've learned of a few things since posting this answer (thanks @JohnMagnolia), so allow me to correct myself:

Actually empty action attributes are allowed in HTML 4, but disallowed in HTML5. In most cases an empty action attribute will cause the form to be submitted to the current URL, including GET paramters. Multiple submit buttons are not a problem and not why the code didn't work, see @Matt's answer for the correct answer.

edited Dec 13 '13 at 14:03

answered Aug 26 '11 at 13:28

totallyNotLizards

8,489
9
51
85

Matt's answer looks better actually – totallyNotLizards Aug 26 '11 at 13:29
1

Sorry but thats incorrect, if a form has an empty action it will automatically post back to itself. – John Magnolia Dec 12 '13 at 13:40
@JohnMagnolia that's what the spec says although it is browser dependant ( see http://stackoverflow.com/a/1132015/846480 ). NB, the correct answer for this question is above ^^ – totallyNotLizards Dec 13 '13 at 08:55
Wow didn't realize that I was wrong, especially with the HTML5 changes best to remove it completely. – John Magnolia Dec 13 '13 at 08:57
1

So it would seem. personally I've used forms with empty action attributes here and there and they do work as you say on browsers that I've tested on, the only drawback is that they will usually send the form to the page address *including* GET parameters which can be a headache if you aren't expecting it. Simpler to specify the pagename if possible IMO, but if you can't or it's dynamic I guess removing the attr would be best. Needless to say I've learned a little since my original incorrect answer (and I do mean a little) :) – totallyNotLizards Dec 13 '13 at 09:02

CTRL + S to submit form and all inputs

3 Answers3

Linked