{"id":8147,"date":"2015-11-28T07:06:34","date_gmt":"2015-11-28T07:06:34","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/11\/28\/how-to-submit-a-form-in-semantic-ui-open-source-projects-semantic-org-semantic-ui\/"},"modified":"2022-08-30T15:42:25","modified_gmt":"2022-08-30T15:42:25","slug":"how-to-submit-a-form-in-semantic-ui-open-source-projects-semantic-org-semantic-ui","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/11\/28\/how-to-submit-a-form-in-semantic-ui-open-source-projects-semantic-org-semantic-ui\/","title":{"rendered":"How to submit a form in Semantic UI?-open source projects Semantic-Org\/Semantic-UI"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/i.stack.imgur.com\/F7eno.jpg?s=128&amp;g=1\" \/> <strong>Digital Visual<\/strong><\/p>\n<p>The easiest way is to retrofit a standard HTML form use the code below.<\/p>\n<p>Start with a basic working standard HTML form with a submit button and this will take your values and post them to your form destination, returning the output below your form submit button.<\/p>\n<ol>\n<li>\n<p>Its a good time to double check you are successfully linking to jquery, semantic javascript and semantic css at this point.<\/p>\n<\/li>\n<li>\n<p>Add class=&#8221;ui form&#8221; to your form tag .<\/p>\n<\/li>\n<li>\n<p>Add the javascript below.<\/p>\n<\/li>\n<\/ol>\n<p>.<\/p>\n<pre><code>$(document).ready(function() {\n\n\/\/ validation \n $('.ui.form').form({\n    email: {\n      identifier : 'email',\n      rules: [\n        {\n          type   : 'email',\n          prompt : 'Please enter an email'\n        }\n      ]\n    }\n},\n{\n    inline: true,\n    on: 'blur',\n    transition: 'fade down', \n    onSuccess: validationpassed\n});\n\n\/\/ called if correct data added to form \nfunction validationpassed() {\n\n    \/\/ Multiple instances may have been bound to the form, only submit one.\n    \/\/ This is a workaround and not ideal. \n    \/\/ Improvements welcomed. \n\n    if (window.lock != \"locked\") { \n        var myform = $('.ui.form');\n        $.ajax({\n            type: myform.attr('method'),\n            url: myform.attr('action'),\n            data: myform.serialize(),\n            success: function (data) {\n                \/\/if successful at posting the form via ajax.\n                myformposted(data);\n                window.lock = \"\";\n            }\n        });\n    } \n    window.lock = \"locked\";\n}\n\n\/\/ stop the form from submitting normally \n$('.ui.form').submit(function(e){ \n    \/\/e.preventDefault(); usually use this, but below works best here.\n    return false;\n});\n\n\n\n\nfunction myformposted(data) { \n    \/\/ clear your form and do whatever you want here \n    $('.ui.form').find(\"input[type=text], textarea\").val(\"\");\n    \/\/$('.ui.submit.button').after(\"Message sent. Thank you.\");\n    $('.ui.submit.button').after(data);\n} \n\n});\n<\/code><\/pre>\n<p>Basic form:<\/p>\n<pre><code>    \n    \n    title\n        \n     \n    \n    \n<\/code><\/pre>\n<p>If you want the error message to show in a box rather than within the form itself include this in your form, and remove the words &#8220;inline: true,&#8221; and Semantic UI does the rest:<\/p>\n<pre><code>\n<\/code><\/pre>\n<p>NOTE: Using form tags with Semantic UI isn&#8217;t strictly necessary as you only really need a div with the classes &#8220;ui form&#8221;, however this retrofit code does require a form tag.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Digital Visual The easiest way is to retrofit a standard HTML form use the code below. Start with a basic working standard HTML form with a submit button and this will take your values and post them to your form destination, returning the output below your form submit button. Its a good time to double [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,1],"tags":[],"class_list":["post-8147","post","type-post","status-publish","format-standard","hentry","category-semantic","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=8147"}],"version-history":[{"count":1,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8147\/revisions"}],"predecessor-version":[{"id":8582,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8147\/revisions\/8582"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=8147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=8147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=8147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}