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:
- 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)
- 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