Forms are probably the most common elements of UI design. When using forms, we usually need to perform some actions before submitting, perhaps validation or anything else.
Using javascript we can handle submit events, which occur when clicking submit button or pressing enter.
In this article we’ll discuss how to do it using jQuery. We should just define a code that will be executed “on submit”, but first let’s build a form.
1. HTML form
<!DOCTYPE html>
<html>
<head>
<title>JQuery submit form example</title>
<!-- we download the latest for now minified version of jQuery from CDN -->
<script src="https://www.webcodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vjquery-2.1.3.min.js"></script>
</head>
<body>
<!-- alert will be called on submit -->
<form id="form" action="javascript:alert('Form submitted!');">
<input type="text" placeholder="Type any text"/>
<input type="submit" value="Submit" />
</form>
<script src="js.js"></script>
</body>
</html>
Now you should have a standard HTML form
Let’s add some JS code to js.js file
2. Javascript
$("form:first").submit(function(event) {
var inps = $("input[type=text]", this);
alert(inps[0].value);
});
Here we select a form element using $("form:first").
Then we pass a function code to submit method which will be executed on submit.
Now, after clicking submit button you will see two alert messages: the first one displays an input text and is maintained by our jQuery code and the second one is the result of executing code in action parameter of the form. Notice, that jQuery code is executed earlier and this is exactly how we want it to work.
Let’s beautify the form a little.
3. CSS
We’ll do it really quickly. First we’ll add a link to the PureCSS library to our head section and then we’ll add some classes to form and input elements.
<!DOCTYPE html>
<html>
<head>
<title>JQuery submit form example</title>
<script src="https://www.webcodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vjquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<form id="form" action="javascript:alert('Form submitted!');" class="pure-form">
<input type="text" placeholder="Type any text"/>
<input type="submit" value="Submit" class="pure-button pure-button-primary"/>
</form>
<script src="js.js"></script>
</body>
</html>
And that’s it! Beautified version of the form should look like this:
4. Other options
If you have a sophisticated logic, you might want to run the submit event from the JS code. It can be done by selecting a form and calling submit().
$("#form").submit(); // It doesn't really matter how you select a form
If you want to perform some validations, just in case your form shouldn’t be always submitted, you can call preventDefault method
$("form:first").submit(function(event) {
var inps = $("input[type=text]", this);
if (inps[0].value 0)
alert("Positive");
else if (inps[0].value.length > 0 && // We need this check to forbid empty string which is treated as zero
inps[0].value == 0)
alert("Zero");
else {
alert("Not a number");
event.preventDefault(); // Form won't be submitted
}
});
If you need to submit a form depending on a condition you can return the result of this condition check:
$("form:first").submit(function(event) {
var inps = $("input[type=text]", this);
return inps[0].value > 0; // Form will be submitted only if the value is greater than 0
});
But that’s not all! If you wish you can attach submit event to other DOM elements, like div. If you have complex client-side logic, or you want to make AJAX requests fetching some data, you can write the following code:
<!DOCTYPE html>
<html>
<head>
<title>JQuery submit form example</title>
<script src="https://www.webcodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vjquery-2.1.3.min.js"></script>
</head>
<body>
<div id="divForm">
<input id="input" type="text" placeholder="Type something" />
<button id="button" onclick="$('#divForm').submit();">click</button>
</div>
<script src="js.js"></script>
</body>
</html>
The js.js file will only contain this:
$("#divForm").submit(function(event) {
var val = $("input", this)[0].value;
// Here could be an AJAX request
alert("Div is submitted with value = " + val);
});
Often we want a form to be submitted after “Enter” key is pressed. It can be implemented several ways. You can select an input element and define keypress behaviour
$("#input").keypress(function(event) {
if (event.which == 13) { // Check if "enter" was pressed
event.preventDefault();
$("#divForm").submit();
}
});
Or, if you’re using form element, you can just hide submit-input in case you don’t want it to be visible:
<!DOCTYPE html> <html> <head> <title>JQuery submit form example</title> <script src="https://www.webcodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vjquery-2.1.3.min.js"></script> </head> <body> <form id="divForm"> <input id="input" type="text" placeholder="Type something" /> <input type="submit" style="display: none;"/> <!-- hidden submit input --> </form> <script src="js.js"></script> </body> </html>
5. Download
You can download the full source code of this example here: JQuerySubmitFormExample
