Wechat applet - how to obtain the value in the user's form control (traditional form and non form methods to obtain the value of form components)

background

Forms are often used in applet development. We often need to obtain the values in the user's form input box at the applet side (usually the user inputs: switch,input,checkbox,slider,radio,picker), trigger events, and then submit them to the back-end for processing

So what are the ways to get the value in the form in the applet, and how to get the value in the user input box through non form submission

In other words, if the submit button is outside the form, how to submit the form

There are two ways to get the value of the form in the applet

Form gets the value of the form component

This is the most common method. All user input components are placed in the form. When you click the button component with form type submit in the form form

It will submit the value value in the form component, but at this time, you need to add name to the form component as the key

The following UI is shown:

<view class="container">
  <form bindsubmit="formSubmit">
    <view>
      <view class="title">switch</view>
      <switch checked name="switchChecked" />
    </view>
    <view>
      <view class="title">radio</view>
      <radio-group name="radio">
        <label><radio checked value="boy" />male</label>
        <label><radio value="girl" />female</label>
      </radio-group>
    </view>

    <view>
      <view class="title">checkbox</view>
      <checkbox-group name="checkbox">
        <label><checkbox checked value="itclanCoder" />itclanCoder</label>
        <label><checkbox value="itclan" />itclan</label>
      </checkbox-group>
    </view>

    <view>
      <view class="title">slider</view>
      <slider value="50" name="slider" show-value></slider>
    </view>
    <view>
      <input
        class="input"
        value="{{inputVal}}"
        name="input"
        placeholder="This is an input box"
      />
    </view>
    <view>
      <button class="submitBtn" size="default" type="primary" formType="submit">
        Submit
      </button>
    </view>
  </form>
</view>

The following is the wxss code

/* pages/getformdata/getformdata.wxss */
.container {
  padding: 15rpx 40rpx;
}

.title {
  margin: 20rpx 0;
}

label {
  margin-right: 50rpx;
}

.input {
  border-bottom: 1px solid #abcdef;
}

.submitBtn {
  margin-top: 40rpx;
}

button:not([size='mini']) {
  width: 100% !important;
}

In the above example code, you will find that when there are multiple radios and multiple checkboxes, it will be wrapped in radio group and checkbox group. Otherwise, the specific value in the control cannot be obtained. Of course, it is not necessary to wrap, so you can only use the second method to obtain the value in the control

The switch, radio and checked in the checkbox in the form are not necessary. You can fill in a default initial value for control. In this example, I give an initial value

The bindsubmit event method is bound in the form, which will carry the data in the form and trigger the submit event

At the same time, the formType in the button button in the form is bound with the submit event, which is used for the submission of the form component and will trigger the submit / reset event of the form component

Let's take a look at the logic code:

// pages/getformdata/getformdata.js
Page({
  /**
   * Initial data of the page
   */
  data: {
    inputVal: '123',
  },

  /**
   * Life cycle function -- listening for page loading
   */
  onLoad: function(options) {},
  // Form submission
  formSubmit(event) {
    console.log(event); // event.detail.value can get the value in the specific form
    const {
      switchChecked,
      radio,
      checkbox,
      slider,
      input,
    } = event.detail.value; // deconstruction
    console.log(switchChecked, radio, checkbox, slider, input); // true "boy" ["itclanCoder"] 50 "123"
  },
});

Through the form form, we can obtain the values of the controls in the form by adding the name attribute to the switch, radio group, checkbox group, slider and input components, so that the values in the form components can be obtained uniformly through the formType in the button combined with the bindsubmit event of the form

When you get the value in the form, you can continue the following operations, transfer the value, and submit the corresponding field to the background for processing

Advantages: in the traditional form submission method, by setting the value of name in the form control, when the form is submitted uniformly, it can be submitted through event detail. Value gets the value of each form component in the form. It has less code and is simple

Disadvantages: other form control values outside the form cannot be obtained. The button page must be in the form and written in a fixed way

The following describes a non form submission method, that is, independent of form, you can also get the values of form components

This kind of application scenario is very common in small programs. When a form submits data, it does not have to be a button. As long as the value in the form component can be obtained, the purpose can be achieved

Get the value of the form component in a non form way

The following is the example effect

The following is the example code, which is similar to the above, with only a slight change

The form and name attributes are removed, and the bindchange method is added in the form component

<!--pages/getformdata/getformdata.wxml-->
<view class="container">
  <view>
    <view>
      <view class="title">switch</view>
      <switch checked bindchange="handleSwitch" />
    </view>
    <view>
      <view class="title">radio</view>
      <!-- radio-group It can't be less,Otherwise something will go wrong,Below checkbox-group Also -->
      <radio-group bindchange="handleRadio">
        <label><radio checked value="boy" />male</label>
        <label><radio value="girl" />female</label>
      </radio-group>
    </view>

    <view>
      <view class="title">checkbox</view>
      <checkbox-group bindchange="handleCheckBox">
        <label><checkbox checked value="itclanCoder" />itclanCoder</label>
        <label><checkbox value="itclan" />itclan</label>
      </checkbox-group>
    </view>

    <view>
      <view class="title">slider</view>
      <slider
        bindchange="handleSlideChange"
        value="{{sliderVal}}"
        show-value
      ></slider>
    </view>
    <view>
      <input
        bindinput="handleInputChange"
        class="input"
        value="{{inputVal}}"
        placeholder="This is an input box"
      />
    </view>
    <!-- Not used here button Button,You can still submit form data -->
    <view>
      <view class="submitBtn" bindtap="handleSubmit">Submit</view>
    </view>
  </view>
</view>

When the bindchange method is added to switch, radio group, checkbox group, slider and input, the change event will be triggered when the checked and input changes, and then the specific value corresponding to the form component will be obtained by carrying the event object

The following code is shown

// pages/getformdata/getformdata.js
Page({
  /**
   * Initial data of the page
   */
  data: {
    switchVal: true, // Default initialization value of switch
    radioVal: 'boy', // The initialization value of radio, sometimes for men and women, can also be expressed by 1, 0, etc
    checkboxVal: 'itclanCoder', // checkbox initialization value
    sliderVal: 30,
    inputVal: '123', // Input box initialization value
  },

  /**
   * Life cycle function -- listening for page loading
   */
  onLoad: function(options) {},

  // Value in switch
  handleSwitch(event) {
    console.log(event);
    const switchVal = event.detail.value;
    this.setData({
      // Changing data through setData
      switchVal,
    });
  },

  // Trigger readio
  handleRadio(event) {
    console.log(event);
    const radio = event.detail.value;
    this.setData({
      radioVal: radio,
    });
  },

  // Trigger checkbox
  handleCheckBox(event) {
    console.log(event);
    const checkbox = event.detail.value;
    this.setData({
      checkboxVal: checkbox,
    });
  },

  // Trigger slideChange
  handleSlideChange(event) {
    console.log(event);
    const sliderVal = event.detail.value;
    this.setData({
      sliderVal: sliderVal,
    });
  },

  // The value of the input field
  handleInputChange(event) {
    console.log(event);
    const inputVal = event.detail.value;
    this.setData({
      inputVal: inputVal,
    });
  },

  // Form submission
  handleSubmit() {
    console.log(
      this.data.switchVal,
      this.data.radioVal,
      this.data.checkboxVal,
      this.data.sliderVal,
      this.data.inputVal
    ); // true "boy" "itclanCoder" 30 "123"
  },
});

The above is to obtain the value in the form component through non form submission. This method is not limited to form forms. It is more flexible. First initialize the form, and then bind the bindchange event to the form component. When the checked or input of the form component changes, the change event will be triggered, and then the value of the form component can be obtained through the event object

In the method of bindchange event, just reset the data once

Advantages: it is flexible to submit data in non form form and button combination (data can also be submitted outside form form)

Disadvantages: binding bindchange events need to be added and setData needs to be triggered, but frequent triggering of setData consumes performance. This method can be used when there are not many form components

This is an application scenario. For example, in my page in the following applet, I submit data in a non form way

be careful

When submitting data in a traditional form, you must set name as the key, otherwise you will not get the value in the form component. Instead of submitting data in a form, you need to bind bindchang e to the form component to obtain the data in the component through the event object

This is an application scenario. For example, in my page in the following applet, I submit data in a non form way

summary

The full text concludes with two paragraphs:

  1. There are two ways to obtain the value of form components in applet. One is the traditional form combined with button. This method has limitations. All form components need to be in the form, and the value in the form component can be obtained by setting the name value in the form component (it must be set, otherwise the value of the form component is undefined)
  2. The method of submitting data for non form forms is to bind bindchange events on form components and obtain event through event objects detail. Value can be obtained, but at the expense of performance, setData needs to be triggered to get the specific form value when the form is finally submitted

Source of original text- https://coder.itclan.cn/- Wechat applet - how to get the value in the user form control

Relevant reference documents

form component

Tags: Javascript Mini Program

Posted by clodius on Sat, 14 May 2022 02:42:17 +0300