{"id":17801,"date":"2024-03-15T15:43:53","date_gmt":"2024-03-15T15:43:53","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/"},"modified":"2024-03-21T11:46:40","modified_gmt":"2024-03-21T11:46:40","slug":"how-can-i-retrieve-form-data-in-layui","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/","title":{"rendered":"How can I retrieve form data in layui?"},"content":{"rendered":"

There are two commonly used methods to retrieve form data in layui.<\/p>\n

    \n
  1. To obtain form data, one must first include the Form module from layui and then listen for the submit event.<\/li>\n
  2. The following code uses the ‘form’ module from layui:
    \n“`
    \nlayui.use(‘form’, function(){
    \n var form = layui.form;
    \n});
    \n“` <\/li>\n
  3. Next, listen to the submit event of the form to get the form data, using form.on(‘submit(formDemo)’, function(data){}), where formDemo is the value of the form’s lay-filter attribute.<\/li>\n
  4. When the form with the ID “formDemo” is submitted, the function will be triggered with the form data. This includes all the fields and their corresponding values. The “return false” statement prevents the form from redirecting.<\/li>\n
  5. In the code above, data.field represents the form data, and you can retrieve the value of a specific field by using data.field.fieldName.<\/li>\n
  6. To retrieve form data, you can use either jQuery or native JavaScript. First, you need to render the form using layui’s layui.form.render() method, and then you can use jQuery’s serialize() method to get the form data.<\/li>\n
  7. The following code utilizes the form and jQuery modules from the layui library. It renders the form and prevents the default form submission. It then serializes the form data when the form with the ID “formId” is submitted.<\/li>\n
  8. In the above code, formId is the id attribute value of the form, and you can retrieve form data using $(this).serialize().<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    There are two commonly used methods to retrieve form data in layui. To obtain form data, one must first include the Form module from layui and then listen for the submit event. The following code uses the ‘form’ module from layui: “` layui.use(‘form’, function(){ var form = layui.form; }); “` Next, listen to the submit […]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-17801","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow can I retrieve form data in layui? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How can I retrieve form data in layui?\" \/>\n<meta property=\"og:description\" content=\"There are two commonly used methods to retrieve form data in layui. To obtain form data, one must first include the Form module from layui and then listen for the submit event. The following code uses the ‘form’ module from layui: “` layui.use(‘form’, function(){ var form = layui.form; }); “` Next, listen to the submit […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T15:43:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T11:46:40+00:00\" \/>\n<meta name=\"author\" content=\"Olivia Parker\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olivia Parker\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/\"},\"author\":{\"name\":\"Olivia Parker\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9\"},\"headline\":\"How can I retrieve form data in layui?\",\"datePublished\":\"2024-03-15T15:43:53+00:00\",\"dateModified\":\"2024-03-21T11:46:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/\"},\"wordCount\":250,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/\",\"name\":\"How can I retrieve form data in layui? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T15:43:53+00:00\",\"dateModified\":\"2024-03-21T11:46:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How can I retrieve form data in layui?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9\",\"name\":\"Olivia Parker\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g\",\"caption\":\"Olivia Parker\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/oliviaparker\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How can I retrieve form data in layui? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/","og_locale":"en_US","og_type":"article","og_title":"How can I retrieve form data in layui?","og_description":"There are two commonly used methods to retrieve form data in layui. To obtain form data, one must first include the Form module from layui and then listen for the submit event. The following code uses the ‘form’ module from layui: “` layui.use(‘form’, function(){ var form = layui.form; }); “` Next, listen to the submit […]","og_url":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T15:43:53+00:00","article_modified_time":"2024-03-21T11:46:40+00:00","author":"Olivia Parker","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Olivia Parker","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/"},"author":{"name":"Olivia Parker","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9"},"headline":"How can I retrieve form data in layui?","datePublished":"2024-03-15T15:43:53+00:00","dateModified":"2024-03-21T11:46:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/"},"wordCount":250,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/","url":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/","name":"How can I retrieve form data in layui? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T15:43:53+00:00","dateModified":"2024-03-21T11:46:40+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-can-i-retrieve-form-data-in-layui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How can I retrieve form data in layui?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9","name":"Olivia Parker","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g","caption":"Olivia Parker"},"url":"https:\/\/www.silicloud.com\/blog\/author\/oliviaparker\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=17801"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17801\/revisions"}],"predecessor-version":[{"id":51437,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17801\/revisions\/51437"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=17801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=17801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=17801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}