background

In the small program development, often useful to the form, we often need to get the user on the small program end form the values in the input box (usually entered by the user are: the switch, the input, the checkbox, the slider, radio, picker), such as by triggering events, and then submitted to the back-end processing

So what are some ways to get a value from a form in an applet, and how do you get a value from a user input field without submitting a form

In other words, how do you submit a form if the submit button is outside the form

There are two ways to get form values in applets

The form gets the value of the form component

This is the most common method. All user-input components are placed inside the form when clicking on the Button component of the form form whose form-type is Submit

It submits the value in the form component, but you need to add name as the key in the form component

As shown in the following UI:

<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=" placeholder "/> </view> <view> <button class="submitBtn" size="default" </button> </form> </view>Copy the code

Here 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; }Copy the code

In the example above, you can see that when there are multiple radios and multiple checkboxes, it will be wrapped in the radio-group and the checkbox-group. Otherwise, you cannot obtain the specific value of the control

Switch,radio, and Checked in the checkbox in the form are not necessary. You can fill in a default initial value for control. In the example of this article, I gave an initial value

The BindSubmit event method is bound to the Form form, which triggers the Submit event with data from the form

At the same time, the Form Type in the button in the form form is bound to the Submit event, which is used for the form component to submit and triggers the Form component’s Submit /reset event

Here’s the logic:

/ / pages/getformdata getformdata. Js Page ({/ * * * * / data Page of the initial data: {inputVal: '123',}, function / * * * life cycle - listening Page load * / onLoad: Function (options) {}, // formSubmit(event) {console.log(event); Const {switchChecked, radio, checkbox, slider, input,} = event.detail. Value; // Event.detail. // Destruct console.log(switchChecked, radio, checkbox, slider, input); // true "boy" ["itclanCoder"] 50 "123" }, });Copy the code

Through the aboveformForm to get the value of a control in the formswitch.radio-group.checkbox-group.slider.inputAdd to componentnameProperty, thereby passing throughbuttonIn theformTypeIn combination withformthebindsubmitEvent to uniformly retrieve the values in the form component

When you get the value in the form, you can proceed to the next operation, pass the value, submit the corresponding field to the background processing, and you are done

Advantages: In the traditional form submission method, by setting the value of name in the form control, the value of each form component in the form can be obtained through event.detail.value when the form is submitted in a unified manner, which has less code and is simple

Disadvantages: The value of any form control outside the form is not available. The button page must be inside the form and written in a fixed way

Here is a non-form submission method that does not rely on the form and can also obtain the values of the form components

This kind of application scenario is very common in the small program, the form submits data, does not have to be a button button way, as long as the form component can get the value, the purpose is achieved

Gets the value of a form component in a non-form manner

Here is the example effect

Here is the sample code, which is similar to the above, with a slight change

Removed the form,name attribute, and added the bindchange method to 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 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=" <view> <view class="submitBtn" bindtap="handleSubmit"> Submit </view> </view> </view> </view> </view>Copy the code

Change is triggered when the switch,radio-group,checkbox-group,slider, and input values are changed Event, and then retrieve the specific value of the form component by carrying the event object

See the code below

/ / pages/getformdata getformdata. Js Page ({/ * * * * / data Page of the initial data: {switchVal: true, / / switch the default initialization values radioVal: CheckboxVal: 'itclanCoder', // checkbox: 30, inputVal: '123', / / input box initialization value}, function / * * * life cycle - listening page load * / onLoad: Function (options) {}, // Switch in the value handleSwitch(event) {console.log(event); const switchVal = event.detail.value; This.setdata ({// Change data with 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, }); }, // Input the value of the input box 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" }, });Copy the code

This method is not limited to the form form. It is flexible. It initializes the form and then binds the form component with a BindChange event To get the value of the form component

In the bindChange event method, you can reset the data once

Advantages: Non-form form,button combination method to submit data, relatively flexible (can also submit data outside the form)

Disadvantages: Binding bindchange event needs to be added, setData needs to be triggered, but frequent triggering setData is a performance cost, in the case of not many form components, this method can be used

This has application scenarios, such as: the following small application in my page, is to submit data in non-form mode

Pay attention to

When traditional form submits data, name must be set as the key, otherwise the value in the form component cannot be retrieved. Instead of submitting data in the form form, bindchang needs to be bound to the form component to obtain the data in the form through the way of event object

This has application scenarios, such as: the following small application in my page, is to submit data in non-form mode

conclusion

The full text summarizes two paragraphs is:

  1. Retrieve the values of the component forms in small program there are two ways, one is through the way of traditional form combining button combinations, the limitations this way, all the form components need to be in the form, by way of setting the name value in the form components to obtain the values in the form components (must be set up, or to form the values of the component is unde fined)
  2. The formformThe way to submit data is by binding the BindChange event to the form component and retrieving it as an event objectevent.detail.valueBut also at the cost of performance, setData needs to be triggered so that when the form is finally submitted, it can get the specific form value

How to get the value in the user form control

Related reference documents

Form component