submit()<\/code>.<\/p>\n\r\n$(\"#form\").submit(); \/\/ It doesn't really matter how you select a form\r\n<\/pre>\nIf you want to perform some validations, just in case your form shouldn’t be always submitted, you can call preventDefault<\/code> method<\/p>\n\r\n\t\t$(\"form:first\").submit(function(event) {\r\n\t\t\tvar inps = $(\"input[type=text]\", this);\r\n\t\t\tif (inps[0].value 0)\r\n\t\t\t\talert(\"Positive\");\r\n\t\t\telse if (inps[0].value.length > 0 && \/\/ We need this check to forbid empty string which is treated as zero\r\n\t\t\t\tinps[0].value == 0)\r\n\t\t\t\talert(\"Zero\");\r\n\t\t\telse {\r\n\t\t\t\talert(\"Not a number\");\r\n\t\t\t\tevent.preventDefault(); \/\/ Form won't be submitted\r\n\t\t\t}\r\n\t\t});\r\n<\/pre>\nIf you need to submit a form depending on a condition you can return the result of this condition check:<\/p>\n
\r\n$(\"form:first\").submit(function(event) {\r\n\tvar inps = $(\"input[type=text]\", this);\r\n\treturn inps[0].value > 0; \/\/ Form will be submitted only if the value is greater than 0\r\n});\r\n<\/pre>\nBut that’s not all! If you wish you can attach submit event to other DOM elements, like div<\/code>. If you have complex client-side logic, or you want to make AJAX requests fetching some data, you can write the following code:<\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>JQuery submit form example<\/title>\r\n\t<script src="https:\/\/code.jquery.com\/jquery-2.1.3.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n\t<div id="divForm">\r\n\t\t<input id="input" type="text" placeholder="Type something" \/>\r\n\t\t<button id="button" onclick="$('#divForm').submit();">click<\/button>\r\n\t<\/div>\r\n\t<script src="js.js"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nThe js.js file will only contain this:<\/p>\n
\r\n$(\"#divForm\").submit(function(event) {\r\n\tvar val = $(\"input\", this)[0].value;\r\n\t\/\/ Here could be an AJAX request\r\n\talert(\"Div is submitted with value = \" + val);\r\n});\r\n<\/pre>\nOften 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<\/code> behaviour<\/p>\n\r\n$(\"#input\").keypress(function(event) {\r\n if (event.which == 13) { \/\/ Check if \"enter\" was pressed\r\n event.preventDefault();\r\n $(\"#divForm\").submit();\r\n }\r\n});\r\n<\/pre>\nOr, if you’re using form<\/code> element, you can just hide submit-input in case you don’t want it to be visible:<\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>JQuery submit form example<\/title>\r\n\t<script src="https:\/\/code.jquery.com\/jquery-2.1.3.min.js"><\/script>\r\n<\/head>\r\n<body>\r\n\t<form id="divForm">\r\n\t\t<input id="input" type="text" placeholder="Type something" \/>\r\n\t\t<input type="submit" style="display: none;"\/> <!-- hidden submit input -->\r\n\t<\/form>\r\n\t<script src="js.js"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
![\"finalJPG\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/finalJPG.jpg\")
<\/a>![\"test2\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/test2.jpg\")
<\/a>![\"test3\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/test3.jpg\")
<\/a><\/p>\n