How to retrieve all values in a form with layui?

2 years ago
Liam
1 minute

You can use the form module of layui to get all the values from the form.

  1. Firstly, the layui form module needs to be introduced.
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
  1. Add the lay-filter attribute to form elements to identify the form.
<form class="layui-form" lay-filter="myForm">
  <!-- 表单元素 -->
</form>
  1. In JavaScript, use the form module’s on method to listen for form submission events and retrieve all the values in the form.
layui.use('form', function(){
  var form = layui.form;

  // 监听表单提交事件
  form.on('submit', function(data){
    // 获取表单中所有的值
    var values = data.field;
    console.log(values);

    // 阻止表单提交
    return false;
  });
});

In the form submission event, you can retrieve all the values in the form using data.field, which will return an object containing key-value pairs of all the form elements.

Please note that the “myForm” in the code above is the value of the lay-filter attribute and should be modified according to the actual situation.

bannerAds