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– John Magnolia2011年08月26日 13:21:42 +00:00Commented Aug 26, 2011 at 13:21
-
I did try submitting the submit button but that didn't workJohn Magnolia– John Magnolia2011年08月26日 13:22:04 +00:00Commented Aug 26, 2011 at 13:22
-
@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– Matt2011年08月26日 13:28:15 +00:00Commented Aug 26, 2011 at 13:28
3 Answers 3
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;
});
1 Comment
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)
Comments
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.